@adaptabletools/adaptable 23.0.0-canary.4 → 23.0.0-canary.5

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -4,7 +4,7 @@ import { CheckBox } from '../../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
+import { Card } from '../../../../components/Card';
 import { Tag } from '../../../../components/Tag';
 import { summarySupportedExpressions, WEIGHTED_AVERAGE_AGGREGATED_FUNCTION, } from '../../../../AdaptableState/Common/RowSummary';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
@@ -73,6 +73,33 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
     availableExpressionsForColumnTypeCache.set(key, expressions);
     return expressions;
 };
+const buildRowSummaryExpressionOptions = (column, availableScalarExpressions, layout) => {
+    const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
+        label: expression,
+        value: expression,
+    }));
+    const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
+    if (aggregation &&
+        typeof aggregation === 'object' &&
+        aggregation.weightedColumnId) {
+        expressionOptions.push({
+            label: 'WEIGHTERD_AVG',
+            value: WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
+        });
+    }
+    return expressionOptions;
+};
+const getDefaultRowSummaryExpression = (column, availableScalarExpressions, layout) => {
+    const optionValues = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout).map((option) => option.value);
+    if (optionValues.includes('sum')) {
+        return 'sum';
+    }
+    const sumExpression = optionValues.find((value) => value.toLowerCase() === 'sum');
+    if (sumExpression) {
+        return sumExpression;
+    }
+    return optionValues[0] ?? null;
+};
 export const RowSummarySectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -100,76 +127,71 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (_jsxs(Panel, { header: _jsxs(Flex, { className: "twa:w-full", children: [_jsx(Flex, { className: "twa:flex-1", alignItems: "center", children: "Row Summary" }), _jsx(Box, { className: "twa:mr-2", children: _jsx(SuspendToggleButton, { onSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: true,
-                            });
-                        }, onUnSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: false,
-                            });
-                        }, suspendableObject: rowSummary }) }), _jsx(SimpleButton, { icon: "delete", onClick: () => {
-                        onDelete();
-                    } })] }), className: "twa:p-2", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
-                                {
-                                    label: 'Top',
-                                    value: 'Top',
-                                },
-                                {
-                                    label: 'Bottom',
-                                    value: 'Bottom',
-                                },
-                            ], value: rowSummary.Position, onValueChange: (position) => {
-                                onChange({
-                                    ...rowSummary,
-                                    Position: position,
-                                });
-                            } }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
-                                onChange({
-                                    ...rowSummary,
-                                    IncludeOnlyFilteredRows,
-                                });
-                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2", children: "Column Aggregations" }), _jsx(Panel, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]", children: _jsx(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
-                                const label = column.friendlyName ?? column.columnId;
-                                if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
-                                    return (_jsxs(Flex, { alignItems: "center", children: [label, _jsx(ColumnGroupTag, { column: column })] }));
-                                }
-                                const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
-                                    label: expression,
-                                    value: expression,
-                                }));
-                                // check out if this layout has a aggregation with weighted column
-                                const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
-                                if (aggregation &&
-                                    typeof aggregation === 'object' &&
-                                    aggregation.weightedColumnId) {
-                                    expressionOptions.push({
-                                        label: 'WEIGHTERD_AVG',
-                                        value: WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
-                                    });
-                                }
-                                const expression = rowSummary.ColumnsMap[column.columnId];
-                                return (_jsxs(Flex, { children: [_jsxs(Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, _jsx(ColumnGroupTag, { column: column })] }), _jsx(SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
-                                                onChange({
-                                                    ...rowSummary,
-                                                    ColumnsMap: {
-                                                        ...rowSummary.ColumnsMap,
-                                                        [column.columnId]: expression,
-                                                    },
-                                                });
-                                            } })] }));
-                            }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
-                                const newColumnsMap = {};
-                                colIds.forEach((colId) => {
-                                    newColumnsMap[colId] = rowSummary.ColumnsMap[colId] ?? null;
-                                });
-                                onChange({
-                                    ...rowSummary,
-                                    ColumnsMap: newColumnsMap,
-                                });
-                            } }) })] })] }));
+    return (_jsx(Panel, { className: "twa:mb-3", bodyProps: { className: 'twa:p-2' }, children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { className: "twa:w-full", children: [_jsx(Box, { className: "twa:font-medium twa:flex-1", children: "Row Summary" }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:shrink-0", children: [_jsx(SuspendToggleButton, { onSuspend: () => {
+                                        onChange({
+                                            ...rowSummary,
+                                            IsSuspended: true,
+                                        });
+                                    }, onUnSuspend: () => {
+                                        onChange({
+                                            ...rowSummary,
+                                            IsSuspended: false,
+                                        });
+                                    }, suspendableObject: rowSummary }), _jsx(SimpleButton, { icon: "delete", onClick: () => {
+                                        onDelete();
+                                    } })] })] }), _jsxs(Card.Body, { className: "twa:p-1 twa:gap-3", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
+                                            {
+                                                label: 'Top',
+                                                value: 'Top',
+                                            },
+                                            {
+                                                label: 'Bottom',
+                                                value: 'Bottom',
+                                            },
+                                        ], value: rowSummary.Position, onValueChange: (position) => {
+                                            onChange({
+                                                ...rowSummary,
+                                                Position: position,
+                                            });
+                                        } }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
+                                            onChange({
+                                                ...rowSummary,
+                                                IncludeOnlyFilteredRows,
+                                            });
+                                        }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:h-[360px] twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
+                                            const label = column.friendlyName ?? column.columnId;
+                                            if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
+                                                return (_jsxs(Flex, { alignItems: "center", children: [label, _jsx(ColumnGroupTag, { column: column })] }));
+                                            }
+                                            const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
+                                            const expression = rowSummary.ColumnsMap[column.columnId];
+                                            return (_jsxs(Flex, { children: [_jsxs(Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, _jsx(ColumnGroupTag, { column: column })] }), _jsx(SingleSelect, { className: "twa:min-w-[140px]", value: expression, items: expressionOptions, onValueChange: (expression) => {
+                                                            onChange({
+                                                                ...rowSummary,
+                                                                ColumnsMap: {
+                                                                    ...rowSummary.ColumnsMap,
+                                                                    [column.columnId]: expression,
+                                                                },
+                                                            });
+                                                        } })] }));
+                                        }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                                            const newColumnsMap = {};
+                                            colIds.forEach((colId) => {
+                                                const existing = rowSummary.ColumnsMap[colId];
+                                                if (existing) {
+                                                    newColumnsMap[colId] = existing;
+                                                    return;
+                                                }
+                                                const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+                                                newColumnsMap[colId] = column
+                                                    ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
+                                                    : null;
+                                            });
+                                            onChange({
+                                                ...rowSummary,
+                                                ColumnsMap: newColumnsMap,
+                                            });
+                                        } }) })] })] })] }) }));
 });
 export const RowSummarySection = (props) => {
     const adaptable = useAdaptable();
@@ -180,7 +202,7 @@ export const RowSummarySection = (props) => {
             .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return (_jsxs(Tabs, { style: { height: '100%' }, children: [_jsx(Tabs.Tab, { children: "Row Summaries" }), _jsx(Tabs.Content, { children: _jsxs("div", { children: [_jsxs(Flex, { className: "twa:mb-1", children: [_jsx(Flex, { className: "twa:flex-1" }), _jsx(SimpleButton, { onClick: () => {
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Summaries" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), _jsxs(Card.Body, { className: "twa:p-1", children: [_jsxs(Flex, { className: "twa:mb-2", children: [_jsx(Flex, { className: "twa:flex-1" }), _jsx(SimpleButton, { onClick: () => {
                                         props.onChange({
                                             ...layout,
                                             RowSummaries: [
@@ -208,5 +230,5 @@ export const RowSummarySection = (props) => {
                                         RowSummaries: newSummaries,
                                     });
                                 } }, index));
-                        })] }) })] }));
+                        })] })] }) }));
 };

package/src/View/Layout/Wizard/sections/SettingsSection.js

@@ -1,12 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import Input from '../../../../components/Input';
-import Radio from '../../../../components/Radio';
-import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
+import { TypeRadio } from '../../../Wizard/TypeRadio';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const SettingsSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const isPivot = isPivotLayout(layout);
@@ -20,5 +19,5 @@ export const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Grid Type" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(Box, { "data-name": "layout-type-table", children: _jsx(TypeRadio, { disabled: true, checked: !isPivotLayout(layout), text: "Table", description: "A flat layout \u2014 data is shown in standard rows and columns, one row per record" }) }), _jsx(Box, { "data-name": "layout-type-pivot", children: _jsx(TypeRadio, { disabled: true, checked: isPivotLayout(layout), text: "Pivot", description: "An aggregated layout \u2014 data is grouped and summarized by pivot columns" }) })] }) })] })] }));
 };

package/src/View/Layout/Wizard/sections/SortSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
+import { Card } from '../../../../components/Card';
 import { Tag } from '../../../../components/Tag';
 import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -55,5 +55,5 @@ export const SortSection = (props) => {
             }),
         });
     }, [layout]);
-    return (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Column Sorts" }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Sorts" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns to sort and set their sort order. Drag to change sort priority." })] }), _jsx(Card.Body, { className: "twa:p-1 twa:min-h-[200px]", children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }) }));
 };

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -7,7 +7,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box } from '../../../components/Flex';
 export const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
-        return 'An expression is required.';
+        return 'An expression is required';
     }
     const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, NamedQueryModuleId);
     if (!valid) {

package/src/View/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WizardPanel from '../../../components/WizardPanel';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import ErrorBox from '../../../components/ErrorBox';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import AdaptableInput from '../../Components/AdaptableInput';
+import { useOnePageAdaptableWizardContext, SummaryText } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import Input from '../../../components/Input';
 export const isValidNamedQuerySettings = (data, api) => {
     const validationResult = api.namedQueryApi.isValidNamedQuery(data);
     const ErrorMessage = !validationResult.valid ? validationResult.message : null;
@@ -15,18 +13,15 @@ export const isValidNamedQuerySettings = (data, api) => {
     return ErrorMessage;
 };
 export const renderNamedQuerySettingsSummary = (data) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: ["Name: ", _jsx(Tag, { children: data.Name })] }));
+    return (_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }));
 };
 export const NamedQuerySettingsWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const valid = isValidNamedQuerySettings(data, api);
-    const errorMessage = valid === true ? null : valid;
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
+    const { data } = useOnePageAdaptableWizardContext();
+    const handleNameChange = (event) => {
         props.onChange({
             ...data,
-            Name: e.value,
+            Name: event.target.value,
         });
     };
-    return (_jsx(WizardPanel, { "data-name": 'named-query-settings', children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { "data-name": "query-name", value: data.Name, autoFocus: true, className: "twa:w-[300px]", type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) }) }), ' ', errorMessage ? (_jsx(FormRow, { label: "", children: _jsx(ErrorBox, { children: errorMessage }) })) : null] }) }));
+    return (_jsx(Box, { "data-name": "named-query-settings", children: _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Named Query" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "query-name", value: data.Name ?? '', autoFocus: true, className: "twa:max-w-[300px] twa:w-full", type: "text", placeholder: "Enter name for Named Query", onChange: handleNameChange }) })] }) }) }));
 };

package/src/View/NamedQuery/Wizard/NamedQueryWizard.js

@@ -39,9 +39,7 @@ export function NamedQueryWizard(props) {
                 details: 'Specify a unique Name for the Named Query',
                 renderSummary: renderNamedQuerySettingsSummary,
                 isValid: isValidNamedQuerySettings,
-                render: () => {
-                    return _jsx(NamedQuerySettingsWizardSection, { onChange: setNamedQuery });
-                },
+                render: () => _jsx(NamedQuerySettingsWizardSection, { onChange: setNamedQuery }),
             },
             {
                 details: 'Select Named Query Tags',

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { PlusMinusNudge } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare function PlusMinusRuleSummary(): React.JSX.Element;
+export declare const PlusMinusRuleStepSummary: React.FunctionComponent;
+export declare const isRuleValid: (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
 interface PlusMinusRuleWizardSectionProps {
     onChange: (data: PlusMinusNudge) => void;
     defaultPredicateId: string;

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

@@ -1,7 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
 import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
 import { CodeBlock } from '../../../components/CodeBlock';
+import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
+import { Tag } from '../../../components/Tag';
 export function PlusMinusRuleSummary() {
     const { data } = useOnePageAdaptableWizardContext();
     return (_jsx(EntityRulesSummary, { data: data, renderPredicate: (contents) => {
@@ -10,22 +15,47 @@ export function PlusMinusRuleSummary() {
             return (_jsxs(_Fragment, { children: ["Apply Plus Minus when", ' ', _jsx("b", { children: _jsx(CodeBlock, { children: contents }) })] }));
         } }));
 }
+export const PlusMinusRuleStepSummary = () => {
+    const { data } = useOnePageAdaptableWizardContext();
+    const hasCondition = Boolean(data.Rule);
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Nudge Type ", _jsx(Tag, { children: hasCondition ? 'Conditional' : 'Always Apply' })] }), hasCondition ? _jsx(PlusMinusRuleSummary, {}) : null] }));
+};
+export const isRuleValid = (data, api, context) => {
+    if (!data.Rule) {
+        return true;
+    }
+    if (!data.Rule.BooleanExpression) {
+        return 'A valid rule is required.';
+    }
+    const ruleValidation = isAdaptableRuleValid(data, api, context);
+    if (typeof ruleValidation === 'string') {
+        return ruleValidation;
+    }
+    return true;
+};
 export function PlusMinusRuleWizardSection(props) {
     const { data, moduleInfo } = useOnePageAdaptableWizardContext();
+    const hasCondition = Boolean(data.Rule);
+    const handleNudgeTypeChange = (conditional) => {
+        if (conditional) {
+            props.onChange({
+                ...data,
+                Rule: data.Rule ?? { BooleanExpression: '' },
+            });
+            return;
+        }
+        const preparedData = { ...data };
+        delete preparedData.Rule;
+        props.onChange(preparedData);
+    };
     const plusMinusNudge = {
         ...data,
         Rule: data?.Rule ?? { BooleanExpression: '' },
     };
-    return (_jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, 
-        // min-height 0 so the container does not min-size from it's children
-        // https://stackoverflow.com/questions/33605552/how-to-prevent-a-flex-item-height-to-overflow-due-to-its-content
-        flexProps: { style: { minHeight: 0 } }, defaultPredicateId: props.defaultPredicateId, predicateDefs: [], showAggregation: false, showObservable: false, showPredicate: false, data: plusMinusNudge, 
-        // the cast is to convince TS that it still a PlusMinusNudge
-        // even when Rule is not optional, the type is inferred from `plusMinusNudge`
-        onChange: (plusMinus) => props.onChange(plusMinus), descriptions: {
-            selectPredicate: null,
-            useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-            useObservableQuery: null,
-            useAggregationQuery: null,
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether the nudge is always applied or only when a condition is met" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "nudge-type-always", text: "Always Apply", description: "The nudge value is always applied when using Plus/Minus", checked: !hasCondition, onClick: () => handleNudgeTypeChange(false) }), _jsx(TypeRadio, { "data-name": "nudge-type-condition", text: "Conditional", description: "Apply the nudge only when the row matches a rule", checked: hasCondition, onClick: () => handleNudgeTypeChange(true) })] }) })] }), hasCondition ? (_jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Condition" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a rule that determines when the nudge should be applied" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, flexProps: { style: { minHeight: 0 } }, defaultPredicateId: props.defaultPredicateId, predicateDefs: [], showAggregation: false, showObservable: false, showPredicate: false, data: plusMinusNudge, onChange: (plusMinus) => props.onChange(plusMinus), descriptions: {
+                                selectPredicate: null,
+                                useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+                                useObservableQuery: null,
+                                useAggregationQuery: null,
+                            } }) })] })) : null] }));
 }

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

@@ -1,25 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
+import { Box, Flex } from '../../../components/Flex';
 export const PlusMinusScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
-    return (_jsx(NewScopeComponent, { availableDataTypes: ['number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
-            rowScope: 'Matching rows will have the plus/minus applied',
-            columnScope: 'Matching Columns will have the plus/minus applied',
-        }, updateScope: (Scope) => {
-            let preparedScope = Scope;
-            if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-                // default to checked
-                preparedScope = {
-                    ...Scope,
-                    DataTypes: ['number'],
-                };
-            }
-            props.onChange({
-                ...data,
-                Scope: preparedScope,
-            });
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify where the Plus/Minus Nudge should be applied (numeric columns only)" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { disableDataTypes: true, scopeColumns: availableColumns, scope: data.Scope, descriptions: {
+                        rowScope: 'Matching rows will have the plus/minus applied',
+                        columnScope: 'Selected Columns will have the plus/minus applied',
+                    }, updateScope: (Scope) => {
+                        props.onChange({
+                            ...data,
+                            Scope: Scope,
+                        });
+                    } }) })] }));
 };

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
 import { AdaptableApi, PlusMinusNudge } from '../../../types';
-export declare const PlusMinusSettingsSummary: React.FunctionComponent<{
-    hasCondition: boolean;
-}>;
-export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
+export declare const PlusMinusSettingsSummary: React.FunctionComponent;
+export declare const isSettingsValid: (data: PlusMinusNudge, api: AdaptableApi, _context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => true | "A name is required." | "A Plus/Minus Nudge with this name already exists." | "A nudge value is required." | "Nudge value must not be zero." | "Increment and decrement keys cannot be the same for this nudge.";
 interface PlusMinusSettingsWizardSectionProps {
     onChange: (plusMinusNudge: PlusMinusNudge) => void;
-    hasCondition: boolean;
-    onConditionChange: (hasCondition: boolean) => void;
 }
 export declare const PlusMinusSettingsWizardSection: React.FunctionComponent<PlusMinusSettingsWizardSectionProps>;
 export {};

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

@@ -1,24 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../components/Input';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { Tabs } from '../../../components/Tabs';
 import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
-import { PlusMinusRuleSummary, PlusMinusRuleWizardSection } from './PlusMinusRuleWizardSection';
-import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 import { Tag } from '../../../components/Tag';
-import { Flex } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/plusMinusTriggerKeys';
-const plusMinusSettingsFormColumns = [
-    { name: 'label', style: { textAlign: 'start' } },
-    { name: 'children' },
-];
-export const PlusMinusSettingsSummary = (props) => {
+export const PlusMinusSettingsSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
-    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Nudge Value ", _jsx(Tag, { children: data.NudgeValue ?? 'Not selected' })] }), _jsxs(SummaryText, { children: ["Keys ", _jsx(Tag, { children: incrementKey }), " / ", _jsx(Tag, { children: decrementKey })] }), _jsxs(SummaryText, { children: ["Nudge Type ", _jsx(Tag, { children: props.hasCondition ? 'Conditional' : 'Always Apply' })] }), props.hasCondition && _jsx(PlusMinusRuleSummary, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Nudge Value ", _jsx(Tag, { children: data.NudgeValue ?? 'Not selected' })] }), _jsxs(SummaryText, { children: ["Keys ", _jsx(Tag, { children: incrementKey }), " / ", _jsx(Tag, { children: decrementKey })] })] }));
 };
-export const isSettingsValid = (hasCondition) => (data, api, context) => {
+export const isSettingsValid = (data, api, _context) => {
     if (!data.Name?.trim()) {
         return 'A name is required.';
     }
@@ -27,15 +20,6 @@ export const isSettingsValid = (hasCondition) => (data, api, context) => {
     if (isDuplicateName) {
         return 'A Plus/Minus Nudge with this name already exists.';
     }
-    if (hasCondition) {
-        if (!data?.Rule?.BooleanExpression) {
-            return 'A valid rule is required.';
-        }
-        const ruleValidation = isAdaptableRuleValid(data, api, context);
-        if (typeof ruleValidation === 'string') {
-            return ruleValidation;
-        }
-    }
     if (typeof data.NudgeValue !== 'number') {
         return 'A nudge value is required.';
     }
@@ -125,5 +109,5 @@ export const PlusMinusSettingsWizardSection = (props) => {
         commitDecrementKey(event.target.value);
         setDecrementEdit(undefined);
     };
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [_jsxs(Tabs, { className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { columns: plusMinusSettingsFormColumns, sizes: ['minmax(140px, max-content)', '1fr'], children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:mr-3 twa:max-w-md twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) }), _jsx(FormRow, { label: "Nudge Value", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:mr-3 twa:max-w-md twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) }), _jsx(FormRow, { label: "Increment key", children: _jsx(Input, { "data-name": "plus-minus-increment-key", className: "twa:mr-3 twa:max-w-md twa:w-full", onBlur: handleIncrementKeyBlur, onChange: handleIncrementKeyChange, onFocus: handleIncrementKeyFocus, value: incrementDisplayValue }) }), _jsx(FormRow, { label: "Decrement key", children: _jsx(Input, { "data-name": "plus-minus-decrement-key", className: "twa:mr-3 twa:max-w-md twa:w-full", onBlur: handleDecrementKeyBlur, onChange: handleDecrementKeyChange, onFocus: handleDecrementKeyFocus, value: decrementDisplayValue }) })] }) })] }), _jsxs(Tabs, { className: "twa:p-2", selectedIndex: props.hasCondition ? 1 : 0, onSelectedIndexChange: (index) => props.onConditionChange(index === 1), children: [_jsx(Tabs.Tab, { "data-name": "nudge-type-always", children: "Always Apply" }), _jsx(Tabs.Tab, { "data-name": "nudge-type-condition", children: "Conditional" }), _jsx(Tabs.Content, { children: _jsx(Flex, { className: "twa:text-2 twa:py-2", children: "The nudge value is always applied when using Plus/Minus" }) }), _jsx(Tabs.Content, { className: "twa:p-0", children: _jsx(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }) })] })] }));
+    return (_jsx(Box, { "data-name": "plus-minus-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Plus/Minus Nudge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Amount added to or subtracted from the cell value when Plus/Minus is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Trigger Keys" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard keys that trigger increment and decrement" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Increment key" }), _jsx(Input, { "data-name": "plus-minus-increment-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleIncrementKeyBlur, onChange: handleIncrementKeyChange, onFocus: handleIncrementKeyFocus, value: incrementDisplayValue })] }), _jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Decrement key" }), _jsx(Input, { "data-name": "plus-minus-decrement-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleDecrementKeyBlur, onChange: handleDecrementKeyChange, onFocus: handleDecrementKeyFocus, value: decrementDisplayValue })] })] }) })] })] }) }));
 };

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

@@ -4,6 +4,7 @@ import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wiz
 import { renderScopeSummary, isScopeValid } from '../../Components/NewScopeComponent';
 import { PlusMinusScopeWizardSection } from './PlusMinusScopeWizardSection';
 import { PlusMinusSettingsWizardSection, PlusMinusSettingsSummary, isSettingsValid, } from './PlusMinusSettingsWizardSection';
+import { PlusMinusRuleWizardSection, PlusMinusRuleStepSummary, isRuleValid, } from './PlusMinusRuleWizardSection';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as PlusMinusRedux from '../../../Redux/ActionsReducers/PlusMinusRedux';
@@ -26,22 +27,6 @@ export const PlusMinusWizard = (props) => {
     const setPlusMinus = React.useCallback((data) => {
         doSetPlusMinus(data);
     }, []);
-    const [hasCondition, setHasCondition] = React.useState(() => {
-        // true if on edit and it has a condition
-        return Boolean(props?.data?.Rule);
-    });
-    React.useEffect(() => {
-        doSetPlusMinus((prev) => {
-            const preparedData = { ...prev };
-            if (hasCondition) {
-                preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
-            }
-            else {
-                delete preparedData.Rule;
-            }
-            return preparedData;
-        });
-    }, [hasCondition]);
     const dispatch = useDispatch();
     const handleFinish = () => {
         if (props.data) {
@@ -55,9 +40,17 @@ export const PlusMinusWizard = (props) => {
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: plusMinus, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
-                isValid: isSettingsValid(hasCondition),
-                renderSummary: () => _jsx(PlusMinusSettingsSummary, { hasCondition: hasCondition }),
-                render: () => (_jsx(PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
+                details: 'Provide details of the Plus/Minus Nudge',
+                isValid: isSettingsValid,
+                renderSummary: () => _jsx(PlusMinusSettingsSummary, {}),
+                render: () => _jsx(PlusMinusSettingsWizardSection, { onChange: setPlusMinus }),
+            },
+            {
+                title: 'Rule',
+                details: 'Choose when the nudge should be applied',
+                isValid: isRuleValid,
+                renderSummary: () => _jsx(PlusMinusRuleStepSummary, {}),
+                render: () => (_jsx(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: setPlusMinus })),
             },
             {
                 title: 'Target',
@@ -66,9 +59,9 @@ export const PlusMinusWizard = (props) => {
                 renderSummary: () => renderScopeSummary(plusMinus.Scope, {
                     scopeWholeRow: 'Plus/Minus is applied for matching rows',
                     scopeColumns: 'Plus/Minus is applied in cells in selected columns',
-                    scopeDataTypes: 'Plus/Minus is applied for cells with selected data type',
+                    scopeDataTypes: '',
                 }),
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(PlusMinusScopeWizardSection, { onChange: setPlusMinus }) })),
+                render: () => _jsx(PlusMinusScopeWizardSection, { onChange: setPlusMinus }),
             },
             {
                 details: 'Select Plus/Minus Tags',
@@ -79,6 +72,7 @@ export const PlusMinusWizard = (props) => {
             },
             '-',
             {
+                details: 'Review the Plus/Minus Nudge',
                 render: () => {
                     return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },