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

package/src/View/Layout/TransposedPopup.js

@@ -9,72 +9,153 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
 const Flex_1 = require("../../components/Flex");
-const adaptableContainerId = `transposed-adaptable-container`;
-const agGridContainerId = `transposed-adaptable-ag-grid-container`;
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
+const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
+/** Field used for the first column in transposed grid (hidden, holds column id). */
+const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
+/** Header used for the first visible column in transposed grid (shows friendly name). */
+const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
+function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
+    return {
+        primaryKey: TRANSPOSED_FIRST_COLUMN_FIELD,
+        licenseKey: hostOptions.licenseKey,
+        userName: `${hostOptions.userName}`,
+        adaptableId: `${hostOptions.adaptableId}::TransposedView`,
+        containerOptions: {
+            adaptableContainer: ADAPTABLE_CONTAINER_ID,
+            agGridContainer: AG_GRID_CONTAINER_ID,
+        },
+        entitlementOptions: { defaultAccessLevel: 'Hidden' },
+        initialState: {
+            Layout: {
+                Revision: Date.now(),
+                CurrentLayout: 'TransposedView',
+                Layouts: [
+                    {
+                        Name: 'TransposedView',
+                        TableColumns: [
+                            TRANSPOSED_FIRST_COLUMN_HEADER,
+                            ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                        ],
+                        ColumnPinning: { [TRANSPOSED_FIRST_COLUMN_HEADER]: 'left' },
+                        AutoSizeColumns: true,
+                    },
+                ],
+            },
+            Theme: { CurrentTheme: currentTheme },
+        },
+    };
+}
+function buildTransposedGridOptions({ transposedRowsAndColumns, elevatedColumnId, adaptableApi, }) {
+    const firstColumn = {
+        field: TRANSPOSED_FIRST_COLUMN_HEADER,
+        headerName: adaptableApi.columnApi.getFriendlyNameForColumnId(elevatedColumnId),
+    };
+    return {
+        loading: false,
+        defaultColDef: {
+            floatingFilter: false,
+            filter: false,
+            sortable: true,
+            resizable: true,
+            enableRowGroup: false,
+            editable: false,
+            enablePivot: false,
+            enableValue: false,
+            lockPinned: true,
+            menuTabs: [],
+            width: 120,
+        },
+        columnDefs: [
+            { field: TRANSPOSED_FIRST_COLUMN_FIELD, hide: true },
+            firstColumn,
+            ...transposedRowsAndColumns.transposedColumns.map((col) => ({ field: col.colId, headerName: col.header })),
+        ],
+        rowData: transposedRowsAndColumns.transposedRows,
+        sideBar: false,
+    };
+}
 const TransposedPopup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
-    const rowNodes = React.useMemo(() => {
-        return props.popupProps.visibleRows
-            ? adaptable.api.gridApi.getVisibleRowNodes()
-            : adaptable.api.gridApi.getAllRowNodes();
-    }, [
-    // can be later triggered by tickng data
-    ]);
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    const [syntheticTransposedByColumnId, doSetSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
-    const setSyntheticTransposedByColumnId = (syntheticTransposedByColumnId) => {
+    const rawConfig = (props.popupProps ?? {});
+    const transposeConfig = {
+        transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
+        hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
+        autosize: rawConfig.autosize ?? true,
+        columnsToTranspose: rawConfig.columnsToTranspose,
+        rowsToTranspose: rawConfig.rowsToTranspose,
+    };
+    const rowNodes = React.useMemo(() => {
+        let transposableRowNodes = [];
+        const rowsToTranspose = transposeConfig.rowsToTranspose;
+        if (rowsToTranspose === 'VisibleOnly') {
+            return adaptable.api.gridApi.getVisibleRowNodes();
+        }
+        if (rowsToTranspose === 'All') {
+            return adaptable.api.gridApi.getAllRowNodes();
+        }
+        if (StringExtensions_1.default.IsNotNullOrEmpty(rowsToTranspose)) {
+            adaptable.api.gridApi.getAllRowNodes().forEach((rn) => {
+                const shouldTransposeRow = adaptable.api.internalApi
+                    .getQueryLanguageService()
+                    .evaluateBooleanExpression(rowsToTranspose, ModuleConstants_1.ExportModuleId, rn);
+                if (shouldTransposeRow) {
+                    transposableRowNodes.push(rn);
+                }
+            });
+            return transposableRowNodes;
+        }
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [transposeConfig.rowsToTranspose, adaptable.api]);
+    const [elevatedColumnId, setElevatedColumnIdState] = React.useState(() => transposeConfig.transposedColumnId ?? primaryKey);
+    const setElevatedColumnId = (newElevatedColumnId) => {
         transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
-        doSetSyntheticTransposedByColumnId(syntheticTransposedByColumnId);
+        setElevatedColumnIdState(newElevatedColumnId);
     };
     const transposedAdaptableApiRef = React.useRef(null);
     const columns = React.useMemo(() => {
-        // customisable
-        return visibleColumns
-            ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getUIAvailableColumns();
-    }, []);
+        const allUIColumns = adaptable.api.columnApi.getUIAvailableColumns();
+        const columnsToTranspose = transposeConfig.columnsToTranspose;
+        if (!columnsToTranspose) {
+            return allUIColumns;
+        }
+        const columnIds = typeof columnsToTranspose === 'function'
+            ? columnsToTranspose({
+                ...adaptable.api.internalApi.buildBaseContext(),
+                columns: allUIColumns,
+            })
+            : columnsToTranspose;
+        return columnIds
+            .map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
+            .filter((col) => col != null);
+    }, [transposeConfig.columnsToTranspose, adaptable.api]);
     /**
-     * This is used as first field
+     * Build transposed structure: original rows become columns (colId = primaryKey value),
+     * original columns become rows. Each transposed row has the column id/header plus
+     * one cell per original row keyed by primaryKey value.
      */
-    const transposedFirstColumnField = '_transposed_column_value';
-    const transposedFirstColumnHeader = '_transposed_column_header';
     const transposedRowsAndColumns = React.useMemo(() => {
-        /**
-         * transposed column values become primaryKey of the new tarnsposed rows
-         * we build row by row, might be easer
-         */
         const transposedColumns = [];
         const transposedRows = [];
         for (const row of rowNodes) {
-            // we force the col-ids to be strings, easer to work with
-            //row[transposeByColumnId] + '';
             const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
-            //row[synteticTransposedByColumnId] + '';
-            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
-                '';
-            transposedColumns.push({
-                colId,
-                header,
-            });
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, elevatedColumnId) + '';
+            transposedColumns.push({ colId, header });
         }
         for (const column of columns) {
-            /**
-             * We can hide the transposed column, if we want
-             */
-            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
+            if (transposeConfig.hideTransposedColumn &&
+                column.columnId === elevatedColumnId) {
                 continue;
             }
             const transposedRow = {
-                // [transposed-by-column-id]: [other column id],
-                // the value can be set to friendlyname
-                [transposedFirstColumnField]: column.columnId,
-                [transposedFirstColumnHeader]: column.friendlyName,
+                [TRANSPOSED_FIRST_COLUMN_FIELD]: column.columnId,
+                [TRANSPOSED_FIRST_COLUMN_HEADER]: column.friendlyName,
             };
-            for (let row of rowNodes) {
-                // [transposed-by-column-value[n]]: [other column value[n]]
+            for (const row of rowNodes) {
                 const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
-                // row[column.field]
                 let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
                 if (value instanceof Date) {
                     value = value.toLocaleString();
@@ -83,90 +164,25 @@ const TransposedPopup = (props) => {
             }
             transposedRows.push(transposedRow);
         }
-        return {
-            transposedColumns,
-            transposedRows,
-        };
-    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
+        return { transposedColumns, transposedRows };
+    }, [rowNodes, primaryKey, elevatedColumnId, columns, transposeConfig.hideTransposedColumn, adaptable.api]);
     React.useEffect(() => {
-        // Mounting in an effect, so the nodes are rendered/available
-        const hostAdaptableOptions = adaptable.adaptableOptions;
-        const adaptableOptions = {
-            primaryKey: transposedFirstColumnField,
-            licenseKey: hostAdaptableOptions.licenseKey,
-            userName: `${hostAdaptableOptions.userName}`,
-            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
-            containerOptions: {
-                adaptableContainer: adaptableContainerId,
-                agGridContainer: agGridContainerId,
-            },
-            entitlementOptions: {
-                defaultAccessLevel: 'Hidden',
-            },
-            initialState: {
-                Layout: {
-                    Revision: Date.now(),
-                    CurrentLayout: 'TransposedView',
-                    Layouts: [
-                        {
-                            Name: 'TransposedView',
-                            TableColumns: [
-                                transposedFirstColumnHeader,
-                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
-                            ],
-                            ColumnPinning: {
-                                [transposedFirstColumnHeader]: 'left',
-                            },
-                            AutoSizeColumns: true,
-                        },
-                    ],
-                },
-                Theme: {
-                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
-                },
-            },
-        };
-        const firstColumn = {
-            field: transposedFirstColumnHeader, // use the column friendly name
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
-        };
-        const agGridOptions = {
-            loading: false,
-            defaultColDef: {
-                floatingFilter: false,
-                filter: false,
-                sortable: true,
-                resizable: true,
-                enableRowGroup: false,
-                editable: false,
-                enablePivot: false,
-                enableValue: false,
-                lockPinned: true,
-                menuTabs: [],
-                width: 120,
-            },
-            columnDefs: [
-                {
-                    field: transposedFirstColumnField,
-                    hide: true,
-                },
-                firstColumn,
-                ...transposedRowsAndColumns.transposedColumns.map((col) => {
-                    return {
-                        field: col.colId,
-                        type: null,
-                        headerName: col.header,
-                    };
-                }),
-            ],
-            rowData: transposedRowsAndColumns.transposedRows,
-            sideBar: false,
-        };
+        const hostOptions = adaptable.adaptableOptions;
+        const adaptableOptions = buildTransposedAdaptableOptions({
+            hostOptions,
+            transposedRowsAndColumns,
+            currentTheme: adaptable.api.themeApi.getCurrentTheme(),
+        });
+        const gridOptions = buildTransposedGridOptions({
+            transposedRowsAndColumns,
+            elevatedColumnId,
+            adaptableApi: adaptable.api,
+        });
         const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,
-            gridOptions: agGridOptions,
+            gridOptions,
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
@@ -174,31 +190,21 @@ const TransposedPopup = (props) => {
                 transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
         });
-    }, [syntheticTransposedByColumnId]);
+    }, [elevatedColumnId, adaptable]);
     React.useEffect(() => {
-        // destroy when closing the popup
         return () => {
             requestAnimationFrame(() => {
                 transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
             });
         };
     }, []);
-    /**
-     * Need to get all data, manualy pivot the grid using the primary key.
-     *
-     * 1. get the data, and pivot using the primary key
-     * 2. create the col definitios, a col definition for each row
-     * 3. create the grid
-     */
     return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
         React.createElement(Panel_1.default, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
-                            setSyntheticTransposedByColumnId(colId);
-                        } })))),
+                    React.createElement(ColumnSelector_1.ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
         React.createElement(Flex_1.Flex, { className: "twa:h-full" },
-            React.createElement(Flex_1.Box, { id: adaptableContainerId }),
-            React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id: agGridContainerId }))));
+            React.createElement(Flex_1.Box, { id: ADAPTABLE_CONTAINER_ID }),
+            React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
 };
 exports.TransposedPopup = TransposedPopup;

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

@@ -23,7 +23,7 @@ const isAggregationsSectionValid = (data) => {
             AggFunc.type === 'weightedAverage')?.AggFunc
         : null;
     if (weightedAvg && !weightedAvg.weightedColumnId) {
-        return 'The Weighted Average Aggregation requires a Weighted Column';
+        return 'Weighted Average requires a weight column to be selected.';
     }
     return true;
 };

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

@@ -17,7 +17,7 @@ const Flex_1 = require("../../../../components/Flex");
 const isColumnFiltersValid = (layout) => {
     const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
-        return 'Please select a Predicate for each Column Filter';
+        return 'Please select a predicate for each column filter.';
     }
     return true;
 };

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

@@ -17,7 +17,7 @@ const isGridFiltersValid = (layout, api) => {
         return true;
     }
     return (api.internalApi.getQueryLanguageService().validateBoolean(expression, ModuleConstants_1.GridFilterModuleId)
-        .isValid || 'Invalid Expression');
+        .isValid || 'The expression is not valid.');
 };
 exports.isGridFiltersValid = isGridFiltersValid;
 const GridFilterSectionSummary = () => {

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

@@ -220,7 +220,7 @@ const isPivotAggregationsSectionValid = (data) => {
             .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
         : null;
     if (weightedAvg && !weightedAvg.weightedColumnId) {
-        return 'The Weighted Average Aggregation requires a Weighted Column';
+        return 'Weighted Average requires a weight column to be selected.';
     }
     return true;
 };
@@ -309,12 +309,12 @@ const PivotAggregationsSection = (props) => {
         }
         const firstAggFuncName = (0, AggregationColumns_1.getAggFuncName)(aggregationColumns[0].AggFunc);
         if (layout.PivotAggregationColumns?.some((aggCol) => (0, AggregationColumns_1.getAggFuncName)(aggCol.AggFunc) !== firstAggFuncName)) {
-            return 'Requires identical aggregation on all columns';
+            return 'All columns must use the same aggregation function.';
         }
         // check that no Aggregation Total Column is enabled
         const hasAggregationTotalColumn = aggregationColumns.some((aggCol) => aggCol.Total !== false && aggCol.Total != null);
         if (hasAggregationTotalColumn) {
-            return 'Can only be enabled when no Aggregation Total Column is present';
+            return 'This option is not available when an Aggregation Total Column is present.';
         }
         return true;
     };

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

@@ -11,6 +11,7 @@ const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard
 const Utilities_1 = require("./Utilities");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
+const CheckBox_1 = require("../../../../components/CheckBox");
 const PivotColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -33,6 +34,13 @@ const PivotColumnsSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
         React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
         React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(Flex_1.Box, { className: "twa:mb-3 twa:px-2" },
+                React.createElement(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
+                        props.onChange({
+                            ...layout,
+                            PivotResultColumnsOrder: checked,
+                        });
+                    } }, "Persist Order of Pivot Result Columns")),
             React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
 };
 exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -28,7 +28,7 @@ const areSummaryRowsValid = (layout) => {
     layout.RowSummaries?.find((rowSummary) => {
         for (const [_, fn] of Object.entries(rowSummary.ColumnsMap ?? {})) {
             if (!fn) {
-                valid = 'All row summary columns must have an aggregation function.';
+                valid = 'Each row summary column requires an aggregation function.';
                 return true;
             }
         }

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

@@ -11,11 +11,11 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
-        return 'Expression is empty';
+        return 'An expression is required.';
     }
     const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, ModuleConstants_1.NamedQueryModuleId);
     if (!valid) {
-        return 'Query is not a valid Boolean Query';
+        return 'The query is not a valid Boolean expression.';
     }
     return valid;
 };

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

@@ -4,7 +4,6 @@ exports.PlusMinusSettingsWizardSection = exports.isSettingsValid = exports.PlusM
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -16,16 +15,30 @@ const Flex_1 = require("../../../components/Flex");
 const PlusMinusSettingsSummary = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name || 'Not specified')),
         React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
             "Nudge Value ",
             React.createElement(Tag_1.Tag, null, data.NudgeValue ?? 'Not selected')),
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Nudge Type ",
+            React.createElement(Tag_1.Tag, null, props.hasCondition ? 'Conditional' : 'Always Apply')),
         props.hasCondition && React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleSummary, null)));
 };
 exports.PlusMinusSettingsSummary = PlusMinusSettingsSummary;
 const isSettingsValid = (hasCondition) => (data, api, context) => {
+    if (!data.Name?.trim()) {
+        return 'A name is required.';
+    }
+    const allPlusMinusNudges = api.plusMinusApi.getAllPlusMinus();
+    const isDuplicateName = allPlusMinusNudges.some((nudge) => nudge.Name === data.Name && nudge.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Plus/Minus Nudge with this name already exists.';
+    }
     if (hasCondition) {
         if (!data?.Rule?.BooleanExpression) {
-            return 'No valid Rule is specified';
+            return 'A valid rule is required.';
         }
         const ruleValidation = (0, Utilities_1.isAdaptableRuleValid)(data, api, context);
         if (typeof ruleValidation === 'string') {
@@ -33,16 +46,22 @@ const isSettingsValid = (hasCondition) => (data, api, context) => {
         }
     }
     if (typeof data.NudgeValue !== 'number') {
-        return 'Nudge value is not specified';
+        return 'A nudge value is required.';
     }
     if (data.NudgeValue === 0) {
-        return 'Nudge value must be different than 0';
+        return 'Nudge value must not be zero.';
     }
     return true;
 };
 exports.isSettingsValid = isSettingsValid;
 const PlusMinusSettingsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const handleNudgeValueChange = (event) => {
         const newValue = parseFloat(event.target.value);
         props.onChange({
@@ -51,16 +70,20 @@ const PlusMinusSettingsWizardSection = (props) => {
         });
     };
     return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Plus Minus Settings"),
+        React.createElement(Tabs_1.Tabs, { className: "twa:p-2" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "plus-minus-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Value" },
-                        React.createElement(Input_1.default, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Nudge Type" },
-                        React.createElement(Flex_1.Flex, null,
-                            React.createElement(Radio_1.default, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio_1.default, { "data-name": "nudge-type-condition", className: "twa:ml-3", value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
-        props.hasCondition && (React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
+                        React.createElement(Input_1.default, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:p-2", selectedIndex: props.hasCondition ? 1 : 0, onSelectedIndexChange: (index) => props.onConditionChange(index === 1) },
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "nudge-type-always" }, "Always Apply"),
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "nudge-type-condition" }, "Conditional"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { className: "twa:text-2 twa:py-2" }, "The nudge value is always applied when using Plus/Minus")),
+            React.createElement(Tabs_1.Tabs.Content, { className: "twa:p-0" },
+                React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange })))));
 };
 exports.PlusMinusSettingsWizardSection = PlusMinusSettingsWizardSection;

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

@@ -13,7 +13,7 @@ const PlusMinusRedux = tslib_1.__importStar(require("../../../Redux/ActionsReduc
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const Flex_1 = require("../../../components/Flex");
 const PlusMinusWizard = (props) => {
-    const [plusMinus, setPlusMinus] = React.useState(() => {
+    const [plusMinus, doSetPlusMinus] = React.useState(() => {
         const newPlusMinus = {
             ...(props.data ? props.data : ObjectFactory_1.default.CreateEmptyPlusMinusNudge()),
             Scope: props?.data?.Scope ?? { All: true },
@@ -26,19 +26,24 @@ const PlusMinusWizard = (props) => {
         }
         return newPlusMinus;
     });
+    const setPlusMinus = React.useCallback((data) => {
+        doSetPlusMinus(data);
+    }, []);
     const [hasCondition, setHasCondition] = React.useState(() => {
         // true if on edit and it has a condition
         return Boolean(props?.data?.Rule);
     });
     React.useEffect(() => {
-        const preparedData = { ...plusMinus };
-        if (hasCondition) {
-            preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
-        }
-        else {
-            delete preparedData.Rule;
-        }
-        setPlusMinus(preparedData);
+        doSetPlusMinus((prev) => {
+            const preparedData = { ...prev };
+            if (hasCondition) {
+                preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
+            }
+            else {
+                delete preparedData.Rule;
+            }
+            return preparedData;
+        });
     }, [hasCondition]);
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
@@ -51,6 +56,12 @@ const PlusMinusWizard = (props) => {
         props.onFinishWizard(plusMinus);
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: plusMinus, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                isValid: (0, PlusMinusSettingsWizardSection_1.isSettingsValid)(hasCondition),
+                renderSummary: () => React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsSummary, { hasCondition: hasCondition }),
+                render: () => (React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
+            },
             {
                 title: 'Target',
                 isValid: NewScopeComponent_1.isScopeValid,
@@ -63,12 +74,6 @@ const PlusMinusWizard = (props) => {
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(PlusMinusScopeWizardSection_1.PlusMinusScopeWizardSection, { onChange: setPlusMinus }))),
             },
-            {
-                title: 'Settings',
-                isValid: (0, PlusMinusSettingsWizardSection_1.isSettingsValid)(hasCondition),
-                renderSummary: () => React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsSummary, { hasCondition: hasCondition }),
-                render: () => (React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
-            },
             {
                 details: 'Select Plus/Minus Tags',
                 title: 'Tags',

package/src/View/QuickSearch/QuickSearchPopup.js

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