@adaptabletools/adaptable 22.0.0-canary.3 → 22.0.0-canary.5

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

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

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

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

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

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

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

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

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

@@ -2,15 +2,30 @@ import * as React from 'react';
 import { useRef } from 'react';
 import Input from '../../../components/Input';
 import usePrevious from '../../../components/utils/usePrevious';
-import Radio from '../../../components/Radio';
 import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CodeBlock } from '../../../components/CodeBlock';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+export const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allFlashingCells = api.flashingCellApi.getFlashingCellDefinitions();
+    const isDuplicateName = allFlashingCells.some((fc) => fc.Name === data.Name && fc.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Flashing Cell already exists with that name';
+    }
+    return true;
+};
 export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
+        React.createElement(SummaryText, null,
+            "Name ",
+            React.createElement(Tag, null, flashingAlert.Name || 'Not specified')),
         React.createElement(Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
             "Flashing is removed after ",
             React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
@@ -20,6 +35,12 @@ export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
 export const FlashingAlertSettingsWizardSection = (props) => {
     let { data: flashingCell } = useOnePageAdaptableWizardContext();
     flashingCell = flashingCell ?? props.flashingCell;
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...flashingCell,
+            Name: event.target.value,
+        });
+    };
     const setDuration = (FlashDuration) => {
         props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
     };
@@ -58,23 +79,22 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Duration Type" },
-                        React.createElement(Radio, { "data-name": "duration-type-always", className: "twa:mr-3", checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
-                    React.createElement(FormRow, { label: "" },
-                        duration !== 'always' && (React.createElement(Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(Box, { className: "twa:text-2 twa:mr-2" }, "After"),
-                            React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, className: "twa:mt-2 twa:mr-1", value: duration, onChange: (event) => {
-                                    const value = event.target.value;
-                                    setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                } }),
-                            React.createElement(Box, { className: "twa:text-2" }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(Box, { className: "twa:text-3 twa:h-[43px]" }, "Persists the flashing style indeterminately - can be removed manually"))),
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
                     React.createElement(FormRow, { label: "Flash Target" },
                         React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
                                 flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
                         React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                 flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                         React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
+                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")),
+                    React.createElement(FormRow, { label: "Duration" },
+                        React.createElement(Flex, { alignItems: "center" },
+                            React.createElement(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
+                            duration !== 'always' && (React.createElement(React.Fragment, null,
+                                React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
+                                        const value = event.target.value;
+                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
+                                    } }),
+                                React.createElement(Box, { className: "twa:text-2" }, "ms"))))))))));
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
-import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary, } from './FlashingCellSettingsWizardSection';
+import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary, isSettingsValid, } from './FlashingCellSettingsWizardSection';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FlashingAlertRulesWizardSection, renderFlashingAlertRulesSummary, } from './FlashingCellRulesWizardSection';
 import { FlashingAlertStyleWizardSection, renderFlashingAlertStyleSummary, } from './FlashingCellStyleWizardSection';
@@ -17,7 +17,7 @@ import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/
 import { Box } from '../../../components/Flex';
 export const FlashingCellWizard = (props) => {
     const { api } = useAdaptable();
-    const [flashingCell, setFlashingCell] = useState(() => {
+    const [flashingCell, doSetFlashingCell] = useState(() => {
         let flashingCell = props.data
             ? cloneObject(props.data)
             : ObjectFactory.CreateEmptyFlashingCellDefinition();
@@ -33,9 +33,12 @@ export const FlashingCellWizard = (props) => {
         }
         return flashingCell;
     });
+    const setFlashingCell = useCallback((data) => {
+        doSetFlashingCell(data);
+    }, []);
     const updateProperty = (propName) => {
         return (value) => {
-            setFlashingCell((flashingCell) => {
+            doSetFlashingCell((flashingCell) => {
                 flashingCell = { ...flashingCell, [propName]: value };
                 return flashingCell;
             });
@@ -57,6 +60,14 @@ export const FlashingCellWizard = (props) => {
         props.onFinishWizard(flashingCell);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                details: 'Set Name, Duration and Target Properties',
+                isValid: isSettingsValid,
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
             {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: isScopeValid,
@@ -80,13 +91,6 @@ export const FlashingCellWizard = (props) => {
                 renderSummary: renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
-            {
-                details: 'Set Duration and Target Properties',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: renderFlashingAlertSettingsSummary,
-                title: 'Settings',
-            },
             {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',

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

@@ -5,9 +5,13 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { Box, Flex } from '../../../components/Flex';
-import { Card } from '../../../components/Card';
+import { Tabs } from '../../../components/Tabs';
+import Input from '../../../components/Input';
 export const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Box, { className: "twa:p-2" },
+        React.createElement(Box, { className: "twa:mt-3" },
+            "Name ",
+            React.createElement(Tag, null, data.Name)),
         React.createElement(Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
@@ -30,6 +34,12 @@ export const renderFormatColumnSettingsSummary = (data) => {
 };
 export const FormatColumnSettingsWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const onExcludeDataRowsChanged = (ExcludeDataRows) => {
         props.onChange({
             ...data,
@@ -66,32 +76,40 @@ export const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Card, null,
-        React.createElement(Card.Title, null, "Settings"),
-        React.createElement(Card.Body, null,
-            React.createElement(Flex, { flexDirection: "row" },
-                React.createElement(FormLayout, null,
-                    data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                        React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
-                    React.createElement(FormRow, { label: "Apply on Column Group:" },
-                        React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
-                                props.onChange({
-                                    ...data,
-                                    ColumnGroupScope: columnGroupScope,
-                                });
-                            } },
-                            React.createElement(Radio, { className: "twa:ml-1", value: "Both" }, "Always"),
-                            React.createElement(Radio, { className: "twa:ml-4", value: "Expanded" }, "Expanded"),
-                            React.createElement(Radio, { className: "twa:ml-4", value: "Collapsed" }, "Collapsed"))))))));
+    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormRow, { label: "Name" },
+                            React.createElement(Input, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Configuration"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, null,
+                        data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                            React.createElement(FormRow, { label: "Exclude Data Rows:" },
+                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormRow, { label: "Exclude Group Rows:" },
+                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormRow, { label: "Exclude Row Summaries:" },
+                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
+                        React.createElement(FormRow, { label: "Apply on Column Group:" },
+                            React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                    props.onChange({
+                                        ...data,
+                                        ColumnGroupScope: columnGroupScope,
+                                    });
+                                } },
+                                React.createElement(Radio, { className: "twa:ml-1", value: "Both" }, "Always"),
+                                React.createElement(Radio, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
+                                React.createElement(Radio, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
 };

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

@@ -7,6 +7,7 @@ import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatC
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
 import { FormatColumnSettingsWizardSection, renderFormatColumnSettingsSummary, } from './FormatColumnSettingsWizardSection';
+import { useSelector } from 'react-redux';
 import { isScopeValid } from '../../Components/NewScopeComponent';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
@@ -57,6 +58,7 @@ const adjustFormatColumn = (formatColumn, api) => {
 };
 export function FormatColumnWizard(props) {
     const { api } = useAdaptable();
+    const allFormatColumns = useSelector((state) => state.FormatColumn?.FormatColumns ?? []);
     const data = props.data ?? props.popupParams?.value;
     const [formatColumn, doSetFormatColumn] = useState(() => {
         let formatColumn = data ? cloneObject(data) : ObjectFactory.CreateEmptyFormatColumn();
@@ -92,6 +94,24 @@ export function FormatColumnWizard(props) {
         props.onFinishWizard(formatColumn);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                details: 'Enter Name and set Additional Properties',
+                isValid: (formatColumnData) => {
+                    if (!formatColumnData.Name) {
+                        return 'Format Column Name cannot be blank';
+                    }
+                    if (allFormatColumns.some((fc) => fc.Name === formatColumnData.Name && fc.Uuid !== formatColumnData.Uuid)) {
+                        return 'A Format Column already exists with that name';
+                    }
+                    return true;
+                },
+                renderSummary: renderFormatColumnSettingsSummary,
+                render: () => {
+                    return (React.createElement(Box, { className: "twa:p-2" },
+                        React.createElement(FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 title: 'Scope',
                 details: 'Select which Columns will be formatted',
@@ -142,15 +162,6 @@ export function FormatColumnWizard(props) {
                     return React.createElement(FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },
             },
-            {
-                title: 'Settings',
-                details: 'Set Additional Properties',
-                renderSummary: renderFormatColumnSettingsSummary,
-                render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
-                },
-            },
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -28,6 +28,10 @@ export const GridFilterExpressionEditor = (props) => {
     const onRunQuery = (expression) => {
         api.filterApi.gridFilterApi.setGridFilterExpression(expression);
     };
+    const onClearExpression = () => {
+        setExpression('');
+        api.filterApi.gridFilterApi.clearGridFilter();
+    };
     const onAddNamedQuery = (namedQuery) => dispatch(NamedQueryRedux.NamedQueryAdd(namedQuery));
     const handleSaveQuery = () => {
         dispatch(PopupShowForm({
@@ -80,7 +84,7 @@ export const GridFilterExpressionEditor = (props) => {
         }));
     };
     const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError || isExistingNamedQuery;
+    const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError;
     return (React.createElement(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
@@ -95,6 +99,7 @@ export const GridFilterExpressionEditor = (props) => {
                     } }, "CLOSE")),
                 React.createElement(Box, { className: "twa:flex-1" }),
                 React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
+                React.createElement(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1" }, "Clear Query"),
                 React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
                         if (namedQuery) {
                             onAddNamedQuery({

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,98 +1,61 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
-import Textarea from '../../components/Textarea';
-import { Icon } from '../../components/icons';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
 import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
 import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonSave } from '../Components/Buttons/ButtonSave';
 import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
 import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { Box, Flex } from '../../components/Flex';
+import Tooltip from '../../components/Tooltip';
 const QueryViewPanelComponent = (props) => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
+    const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            runQuery();
-        }
-    };
     const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
-    const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
-            buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:h-full" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 52,
-                        height: '100%',
-                        paddingTop: 6,
-                        overflow: 'hidden',
-                        zIndex: 100,
-                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
-            isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, className: "twa:mr-1" })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-            ' ',
-            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { className: "twa:w-full twa:overflow-visible" },
-            ' ',
+    const renderExpressionLabel = () => {
+        const baseClasses = 'twa:font-mono twa:text-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
+        const placeholderClasses = 'twa:text-gray-400 twa:italic';
+        const labelClassName = clsx(baseClasses, {
+            [placeholderClasses]: !expression,
+        });
+        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
+            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter')));
+        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
             buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 60,
-                        paddingTop: 7,
-                        zIndex: 100,
-                        height: '100%',
-                        overflow: 'hidden',
-                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+            expressionLabel,
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
     };
-    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
-        React.createElement(Icon, { name: 'list' })));
+    const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
+    const hasActiveGridFilter = gridFilter != null && hasExpression;
+    const hasNamedQueries = namedQueries && namedQueries.length > 0;
+    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
     const renderButtons = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
-            saveButton,
+        return (React.createElement(React.Fragment, null,
+            clearButton,
             isSuspended ? unSuspendButton : suspendButton,
-            columnsDropdown,
-            namedQuerySelector,
-            ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
-            ' ',
-            React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
-            ' ',
             saveButton,
-            isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
-        React.createElement(Flex, null, renderButtons())));
+    const isToolbar = props.viewType === 'Toolbar';
+    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+            'twa:w-[500px]': isToolbar,
+        }) },
+        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
+        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
+                'twa:pl-1': isToolbar,
+                'twa:pt-1': !isToolbar,
+            }) }, renderButtons())));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

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

@@ -7,6 +7,7 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box } from '../../../../components/Flex';
+import { CheckBox } from '../../../../components/CheckBox';
 export const PivotColumnsSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -28,5 +29,12 @@ export const PivotColumnsSection = (props) => {
     return (React.createElement(Tabs, { className: "twa:h-full" },
         React.createElement(Tabs.Tab, null, "Pivot Columns"),
         React.createElement(Tabs.Content, null,
+            React.createElement(Box, { className: "twa:mb-3 twa:px-2" },
+                React.createElement(CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
+                        props.onChange({
+                            ...layout,
+                            PivotResultColumnsOrder: checked,
+                        });
+                    } }, "Persist Order of Pivot Result Columns")),
             React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
 };