@adaptabletools/adaptable-cjs 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -3,15 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertRulesWizardSection = exports.renderAlertRulesSummary = exports.getRuleStepDescription = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const getAvailablePredicates_1 = require("../Utilities/getAvailablePredicates");
-const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
+const Card_1 = require("../../../components/Card");
 const Flex_1 = require("../../../components/Flex");
+const GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
+const Flex_2 = require("../../../components/Flex");
 const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
@@ -56,7 +57,7 @@ const RowChangeEditor = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Change" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowAddedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_2.Box, { className: "twa:font-medium", children: "Row Change" }), (0, jsx_runtime_1.jsx)(Flex_2.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which type of Row Change will trigger the Alert" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowAddedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
 };
 const AlertRulesWizardSection = (props) => {
     const { data: alertData, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

package/src/View/Alert/Wizard/AlertScheduledWizardSection.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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertScheduledWizardSection = exports.renderAlertScheduledSummary = exports.isScheduledAlertTimeValid = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ScheduleScheduleWizard_1 = require("../../Schedule/Wizard/ScheduleScheduleWizard");
 const Tag_1 = require("../../../components/Tag");
@@ -17,8 +17,7 @@ const isScheduledAlertTimeValid = (alert) => {
     return (0, ScheduleScheduleWizard_1.isScheduleValid)({ Schedule: alert.Schedule });
 };
 exports.isScheduledAlertTimeValid = isScheduledAlertTimeValid;
-const renderAlertScheduledSummary = () => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertScheduledSummary = (data) => {
     if (!(0, ScheduledAlertHelper_1.isScheduledAlertDefinition)(data)) {
         return null;
     }
@@ -33,6 +32,6 @@ const AlertScheduledWizardSection = (props) => {
             Schedule: scheduleData.Schedule,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduleScheduleWizard_1.ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduleScheduleWizard_1.ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
 };
 exports.AlertScheduledWizardSection = AlertScheduledWizardSection;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertScopeWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
@@ -19,42 +19,34 @@ const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
-                rowScope: 'Changes in any Column in the row will trigger an Alert',
-                columnScope: 'Changes in selected Columns will trigger an Alert',
-                dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
-            }, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                if (newData.Rule.ObservableExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had observable expression and the scope is changed to partial
-                    // we need to reset to not be an observable expression, as observable is not supported
-                    // for partial scope
-                    delete newData.Rule.ObservableExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had aggregation expression and the scope is changed to partial
-                    // we need to reset to not be an aggregation expression, as aggregation is not supported
-                    // for partial scope
-                    delete newData.Rule.AggregatedBooleanExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                props.onChange(newData);
-            } }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which columns should trigger the Alert" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+                        rowScope: 'Changes in any Column in the row will trigger an Alert',
+                        columnScope: 'Changes in selected Columns will trigger an Alert',
+                        dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
+                    }, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        if (newData.Rule.ObservableExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.ObservableExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.AggregatedBooleanExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
 exports.AlertScopeWizardSection = AlertScopeWizardSection;

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,17 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Tabs_1 = require("../../../components/Tabs");
 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 WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -24,12 +20,38 @@ const isSettingsValid = (data, api) => {
     return true;
 };
 exports.isSettingsValid = isSettingsValid;
-const renderAlertTypeSummary = (alertType) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertTypeSummary = (alertType, data) => {
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Type ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: text })] })] }));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
+const ALERT_TYPE_OPTIONS = [
+    {
+        type: getAlertType_1.AlertType.DataChange,
+        description: "A data change has been made to the Grid's data source",
+    },
+    {
+        type: getAlertType_1.AlertType.RowChange,
+        description: 'A Row has been added or removed from the data source',
+    },
+    {
+        type: getAlertType_1.AlertType.Aggregation,
+        description: 'A change has been made to aggregated data (i.e. from multiple Rows)',
+    },
+    {
+        type: getAlertType_1.AlertType.Observable,
+        description: 'A specified change (or lack of change) over time has been observed in the Grid',
+    },
+    {
+        type: getAlertType_1.AlertType.Validation,
+        description: "A change made to the Grid's data has broken a validation rule",
+    },
+    {
+        type: getAlertType_1.AlertType.Scheduled,
+        description: 'A reminder is triggered to display at a specfied date and time',
+    },
+];
+const ALERT_TYPE_COUNT = ALERT_TYPE_OPTIONS.length;
 const AlertTypeWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const handleNameChange = (event) => {
@@ -38,6 +60,6 @@ const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(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 ?? '' }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Alert Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(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 }), (0, jsx_runtime_1.jsx)(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 }), (0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === getAlertType_1.AlertType.Scheduled, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Scheduled) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardNameFieldSection, { value: data.Name ?? '', onChange: handleNameChange, inputDataName: "alert-name" }), (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "alert-type-heading", title: "Alert Type", dataName: "alert-type", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(ALERT_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: (0, getAlertType_1.getAlertTypeText)(option.type), description: option.description, selected: props.alertType === option.type, dataName: `alert-type-${option.type}`, onSelect: () => props.onAlertTypeChange(option.type) }, option.type))) })] }));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertWizard = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
@@ -15,7 +16,7 @@ const AlertMessageWizardSection_1 = require("./AlertMessageWizardSection");
 const isValidAlertMessage_1 = require("./isValidAlertMessage");
 const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
-const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
 const AlertRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/AlertRedux"));
@@ -81,13 +82,20 @@ const AlertWizard = (props) => {
         setAlertType(newAlertType);
         doSetAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
-    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.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 = (0, getAlertType_1.getAlertType)(props.data);
+        return type === getAlertType_1.AlertType.Scheduled ? 'Schedule' : 'Rule';
+    }, [props.defaultCurrentSectionName, props.data]);
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultEditSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Name & Type',
                 isValid: AlertTypeWizardSection_1.isSettingsValid,
                 details: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
-                renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
+                renderSummary: (data) => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType, data),
             },
             {
                 title: 'Schedule',
@@ -117,7 +125,7 @@ const AlertWizard = (props) => {
                 details: "Select the Alert's Message Type and Text",
                 isValid: (data) => (0, isValidAlertMessage_1.isValidAlertMessage)(data, alertType),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertMessageWizardSection_1.AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: () => (0, AlertMessageWizardSection_1.renderAlertMessageSummary)(alertType),
+                renderSummary: (data) => (0, AlertMessageWizardSection_1.renderAlertMessageSummary)(alertType, data),
             },
             {
                 title: 'Notification',
@@ -129,7 +137,7 @@ const AlertWizard = (props) => {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourWizardSummary,
+                renderSummary: AlertBehaviourWizardSection_1.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,23 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderScopeSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const Tag_1 = require("../../../components/Tag/Tag");
-const renderScopeSummary = () => {
-    const { data, api: { columnScopeApi: scopeApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const scopeSummaryTags_1 = require("../../Wizard/scopeSummaryTags");
+const renderScopeSummary = (data) => {
     if (!('Scope' in data)) {
         return null;
     }
-    const scope = data.Scope;
-    const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
-                        ? 'Changes to any Column in the row will trigger an Alert'
-                        : null }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => {
-                                return `DataType: ${dataType}`;
-                            }) })] })) : null })] }));
+    return (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: data.Scope });
 };
 exports.renderScopeSummary = renderScopeSummary;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isValidAlertRules = void 0;
 const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
-const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper");
 const isValidAlertRules = (alert, api, context) => {
     if ((0, ScheduledAlertHelper_1.isScheduledAlertDefinition)(alert)) {
         return true;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -46,7 +46,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(PanelWithImage_1.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' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.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]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+        return ((0, jsx_runtime_1.jsxs)(PanelWithImage_1.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' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.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]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                                         this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                                         this.onApplyClick();
                                     }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.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]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -16,7 +16,7 @@ const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 class BulkUpdateViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -58,15 +58,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
                 'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:flex-1', {
                         'twa:min-w-[100px]': !isToolbar,
                         'twa:min-w-0': isToolbar,
-                    }), children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
-                            listMinWidth: 160,
-                        }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: (0, jsx_runtime_1.jsx)(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
+                    }), children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: (0, jsx_runtime_1.jsx)(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.js

@@ -5,13 +5,11 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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 CheckBox_1 = require("../../../components/CheckBox");
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const renderCalculatedColumnDefinitionSummary = (data) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Identifier:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId }) }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Name:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
 };
@@ -27,7 +25,7 @@ const isValidCalculatedColumnDefinition = (data, api) => {
 };
 exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
 const CalculatedColumnDefinitionWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const handleColumnIdChange = (event) => {
         let e = event.target;
         props.onChange({
@@ -43,8 +41,6 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
         });
     };
     const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidCalculatedColumnDefinition)(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
     const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
     const ColumnName = data.FriendlyName;
     const ColumnId = data.ColumnId;
@@ -58,12 +54,12 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-definition', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Details" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                                setColumnNameFocused(true);
-                                            }, onBlur: () => {
-                                                setColumnNameFocused(false);
-                                            }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                                HeaderToolTip: e.target.value,
-                                            }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-definition', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Calculated Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Display name shown in the Column Header (Name used if not provided)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                    setColumnNameFocused(true);
+                                }, onBlur: () => {
+                                    setColumnNameFocused(false);
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', className: "twa:max-w-[500px] twa:w-full", type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional text shown when hovering over the Column Header" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Show the Expression as a tooltip when hovering over each cell" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] })] }) }));
 };
 exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.d.ts

@@ -6,6 +6,6 @@ export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     expressionType: ExpressionType;
 };
-export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn) => React.JSX.Element;
+export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn, api: AdaptableApi) => React.JSX.Element;
 export declare const isValidCalculatedColumnExpression: (data: CalculatedColumn, api: AdaptableApi) => true | string;
 export declare const CalculatedColumnExpressionWizardSection: (props: CalculatedColumnExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -5,12 +5,25 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Flex_1 = require("../../../components/Flex");
-const renderCalculatedColumnExpressionSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const Card_1 = require("../../../components/Card");
+const getExpressionTypeDescription = (expressionType) => {
+    switch (expressionType) {
+        case 'ScalarExpression':
+            return 'Define an expression using values from other cells in each row';
+        case 'AggregatedScalarExpression':
+            return 'Define an expression using aggregated values from other rows';
+        case 'CumulativeAggregatedExpression':
+            return 'Define a cumulative expression using values from other rows';
+        case 'QuantileAggregatedExpression':
+            return 'Define a quantile expression using values from other rows';
+        default:
+            return '';
+    }
+};
+const renderCalculatedColumnExpressionSummary = (data, api) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
 };
 exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressionSummary;
@@ -39,8 +52,6 @@ const CalculatedColumnExpressionWizardSection = (props) => {
             CalculatedColumnSettings: {
                 ...data.CalculatedColumnSettings,
                 DataType: dataType,
-                //  Pivotable,
-                //  Aggregatable,
             },
         });
     };
@@ -55,17 +66,18 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         }
     };
     const columns = api.columnApi.internalApi.getQueryableColumnsForUIEditor();
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, height: "100%", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: (0, StringExtensions_1.Humanize)(props.expressionType) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (() => {
-                    switch (props.expressionType) {
-                        case 'ScalarExpression':
-                            return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-                        case 'AggregatedScalarExpression':
-                        case 'CumulativeAggregatedExpression':
-                        case 'QuantileAggregatedExpression':
-                            return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-                        default:
-                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                })() })] }));
+    const expressionEditor = (() => {
+        switch (props.expressionType) {
+            case 'ScalarExpression':
+                return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+            case 'AggregatedScalarExpression':
+            case 'CumulativeAggregatedExpression':
+            case 'QuantileAggregatedExpression':
+                return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+            default:
+                return null;
+        }
+    })();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: (0, StringExtensions_1.Humanize)(props.expressionType) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: getExpressionTypeDescription(props.expressionType) })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: expressionEditor })] }) }));
 };
 exports.CalculatedColumnExpressionWizardSection = CalculatedColumnExpressionWizardSection;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -6,15 +6,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 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 ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Tabs_1 = require("../../../components/Tabs");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
 const renderCalculatedColumnSettingsSummary = (data) => {
     const options = (0, getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags)(data.CalculatedColumnSettings);
     return (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: options });
@@ -22,7 +20,7 @@ const renderCalculatedColumnSettingsSummary = (data) => {
 exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
 const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
-        return 'A data type is required. It could not be inferred from the expression.';
+        return 'Please select a data type (could not be inferred from the expression)';
     }
     return true;
 };
@@ -70,10 +68,10 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Width", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                                Width: Number(e.target.value),
-                                            }) }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
-                // @ts-ignore CalculatedColumn has a broader DataType
-                settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-destructive", children: ErrorMessage })) : null] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                    Width: Number(e.target.value),
+                                }) }) })] }), (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
+                    // @ts-ignore CalculatedColumn has a broader DataType
+                    settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };
 exports.CalculatedColumnSettingsWizardSection = CalculatedColumnSettingsWizardSection;