@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -11,7 +11,6 @@ import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWiza
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
 import { Card } from '../../../components/Card';
-import { TagList } from '../../../components/Tag/Tag';
 import { getFreeTextColumnSettingsTags } from '../Utilities/getFreeTextColumnSettingsTags';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
 const dataTypeOptions = [
@@ -22,7 +21,7 @@ const dataTypeOptions = [
 ];
 export const renderFreeTextColumnSettingsSummary = (data) => {
     const propertyTags = getFreeTextColumnSettingsTags(data.FreeTextColumnSettings);
-    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? (_jsxs(SummaryText, { children: ["Default Value: ", _jsx(Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? (_jsxs(SummaryText, { children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? (_jsx(Box, { className: "twa:mt-2", children: _jsx(TagList, { tags: propertyTags }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? (_jsxs(SummaryText, { children: ["Default Value: ", _jsx(Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? (_jsxs(SummaryText, { children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? (_jsxs(SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => (_jsx(Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
 };
 export const isValidFreeTextColumnSettings = (data) => {
     if (!data.FreeTextColumnSettings?.DataType) {

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
+import { Icon } from '../../../components/icons';
 import FieldWrap from '../../../components/FieldWrap';
 import Input from '../../../components/Input';
 import Panel from '../../../components/Panel';
@@ -23,5 +24,5 @@ export const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", _jsxs(FieldWrap, { className: "twa:mr-1 twa:w-full", children: [_jsx(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), _jsx(Input, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && (_jsx(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions.IsNotNullOrEmpty(expression) && (_jsx(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), _jsxs(Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [_jsx(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? (_jsx(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : (_jsx(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), _jsx(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), _jsx(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
+    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", _jsxs(FieldWrap, { className: "twa:mr-1 twa:w-full", children: [_jsx(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), _jsx(Input, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && (_jsx(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions.IsNotNullOrEmpty(expression) && (_jsx(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), _jsxs(Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [_jsx(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? (_jsx(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : (_jsx(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), _jsxs(NewDropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", children: [_jsx(Icon, { name: "list" }), "Columns"] }), _jsx(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import FieldWrap from '../../components/FieldWrap';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
@@ -13,6 +12,7 @@ import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { Box, Flex } from '../../components/Flex';
 import Tooltip from '../../components/Tooltip';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
+import { cn } from '../../lib/utils';
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
@@ -24,10 +24,10 @@ const QueryViewPanelComponent = (props) => {
     const renderExpressionLabel = () => {
         const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
-        const labelClassName = clsx(baseClasses, {
+        const labelClassName = cn(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = (_jsx(Tooltip, { label: expression || 'Click to edit Grid Filter', children: _jsx(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        const expressionLabel = (_jsx(Tooltip, { label: expression || 'Click to edit Grid Filter', children: _jsx(Box, { className: cn('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
         return (_jsxs(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
@@ -42,9 +42,9 @@ const QueryViewPanelComponent = (props) => {
         return (_jsxs(_Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+    return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: cn(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }), children: [_jsx(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), _jsx(Flex, { className: clsx('twa:flex-shrink-0', {
+        }), children: [_jsx(Flex, { className: cn({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), _jsx(Flex, { className: cn('twa:flex-shrink-0', {
                     'twa:pl-1': isToolbar,
                     'twa:pt-1': !isToolbar,
                 }), children: renderButtons() })] }));

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
 import { Box } from '../../../components/Flex';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
 import { useRerender } from '../../../components/utils/useRerender';
 import { useEffect } from 'react';
-import clsx from 'clsx';
 export const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = useAdaptable();
     const rerender = useRerender();
@@ -13,7 +13,7 @@ export const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (_jsx(Box, { className: clsx(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+    return (_jsx(Box, { className: cn(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
             if (!module.isModuleVisible()) {
                 return null;
             }

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -8,7 +8,7 @@ import { Tabs } from '../../../components/Tabs';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { getDefaultAdaptableOptions } from '../../../AdaptableOptions/DefaultAdaptableOptions';
-import clsx from 'clsx';
+import { cn } from '../../../lib/utils';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
@@ -234,7 +234,7 @@ export const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (_jsx(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -12,7 +12,7 @@ import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
-import { NewDropdownButton } from '../../components/NewDropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
 import { Flex } from '../../components/Flex';
 import { SingleSelect } from '../../components/NewSelect';

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -10,7 +10,6 @@ import { ColumnsSection, ColumnsSectionSummary } from './sections/ColumnsSection
 import { PivotColumnsSection, PivotColumnsSectionSummary } from './sections/PivotColumnsSection';
 import { RowGroupingSection, RowGroupingSectionSummary } from './sections/RowGroupingSection';
 import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionValid, } from './sections/AggregationsSection';
-import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
 import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
 import { areSummaryRowsValid, RowSummarySection, RowSummarySectionSummary, } from './sections/RowSummarySection';
@@ -24,11 +23,22 @@ const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
     const layoutName = layout.Name?.trim();
     return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
 };
+const getLayoutWizardMode = (popupParams, initialLayout) => {
+    const action = popupParams?.action;
+    if (action === 'Edit') {
+        return 'edit';
+    }
+    if (action === 'New' || action === 'Clone') {
+        return 'create';
+    }
+    return initialLayout ? 'edit' : 'create';
+};
 export const LayoutWizard = (props) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
     const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = props.data ?? props.popupParams?.value;
+    const layoutWizardMode = getLayoutWizardMode(props.popupParams, initialLayout);
     const [layout, setLayout] = React.useState(() => {
         let preparedLayout = null;
         if (initialLayout) {
@@ -98,36 +108,29 @@ export const LayoutWizard = (props) => {
                 title: 'Pivot Row Groups',
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
-                renderSummary: () => _jsx(PivotRowGroupingSectionSummary, {}),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotRowGroupingSection, { onChange: (newLayout) => {
+                renderSummary: (data) => _jsx(PivotRowGroupingSectionSummary, { layout: data }),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotRowGroupingSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => {
                             setLayout(newLayout);
                         } }) })),
             },
             {
                 title: 'Pivot Columns',
-                details: 'Select Pivot Columns',
+                details: 'Select Pivot Columns and Column Sorting',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => _jsx(PivotColumnsSectionSummary, {}),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Aggregations',
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
-                renderSummary: () => _jsx(PivotAggregationsSectionSummary, {}),
+                renderSummary: (data) => _jsx(PivotAggregationsSectionSummary, { layout: data }),
                 isValid: (data) => isPivotAggregationsSectionValid(data),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotAggregationsSection, { onChange: (layout) => {
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotAggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             const newLayout = cloneObject(layout);
                             setLayout(newLayout);
                         } }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => _jsx(SortSectionSummary, {}),
-                details: 'Configure Aggregated Column Sorts',
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
@@ -176,23 +179,23 @@ export const LayoutWizard = (props) => {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Row Grouping and Display Behaviour',
-                renderSummary: () => _jsx(RowGroupingSectionSummary, {}),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowGroupingSection, { onChange: setLayout }) })),
+                renderSummary: (data) => _jsx(RowGroupingSectionSummary, { layout: data }),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowGroupingSection, { onChange: setLayout, layoutWizardMode: layoutWizardMode }) })),
             },
             {
                 title: 'Columns',
-                details: 'Select Columns',
+                details: 'Configure Column Visibility, Order, Pinning, Sizing and Sorting',
                 isVisible: () => true,
-                renderSummary: () => _jsx(ColumnsSectionSummary, {}),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(ColumnsSection, { onChange: setLayout }) })),
+                renderSummary: (data) => _jsx(ColumnsSectionSummary, { layout: data }),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(ColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: setLayout }) })),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
                 details: 'Select Aggregation Columns and Behaviour',
-                renderSummary: () => _jsx(AggregationsSectionSummary, {}),
+                renderSummary: (data) => _jsx(AggregationsSectionSummary, { layout: data }),
                 isValid: (data) => isAggregationsSectionValid(data),
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { onChange: (layout) => {
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             let newLayout = cloneObject(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
@@ -231,13 +234,6 @@ export const LayoutWizard = (props) => {
                 isValid: areSummaryRowsValid,
                 render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowSummarySection, { onChange: setLayout }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => _jsx(SortSectionSummary, {}),
-                details: 'Configure Column Sorts',
-                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,

package/src/View/Layout/Wizard/sections/AggregationsSection.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { Layout, TableLayout } from '../../../../../types';
+import { AggregationColumnValue } from '../../../../AdaptableState/Common/AggregationColumns';
+export type GrandTotalRowPosition = 'top' | 'bottom' | 'pinnedTop' | 'pinnedBottom';
+export declare const GRAND_TOTAL_ROW_LABELS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_DESCRIPTIONS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_OPTIONS: (GrandTotalRowPosition | 'off')[];
+export declare function getGrandTotalRowKey(layout: Layout): GrandTotalRowPosition | 'off';
+export declare function getGrandTotalRowLabel(layout: Layout): string;
+export declare function getGrandTotalRowDescription(layout: Layout): string;
+export declare function getAggFuncSummaryLabel(columnId: string, aggFunc: AggregationColumnValue, aggregationColumnsMap: Record<string, string>): string;
 export declare const isAggregationsSectionValid: (data: Layout) => true | string;
-export declare const AggregationsSectionSummary: React.FunctionComponent;
+export declare const AggregationsSectionSummary: React.FunctionComponent<{
+    layout?: TableLayout;
+}>;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const AggregationsSection: React.FunctionComponent<AggregationsSectionProps>;
 export {};

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

@@ -1,20 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { CheckBox } from '../../../../components/CheckBox';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Card } from '../../../../components/Card';
-import { Tag } from '../../../../components/Tag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { getDisplayAggFuncNames, } from '../../../../AdaptableState/Common/AggregationColumns';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { getLayoutWizardInitialExpandedCardId, isTableAggregationsSectionConfigured, } from './layoutWizardAccordionHelpers';
 import { columnFilter } from './Utilities';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { Card } from '../../../../components/Card';
 import { Box, Flex } from '../../../../components/Flex';
 import { SingleSelect } from '../../../../components/NewSelect';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import Radio, { RadioGroup } from '../../../../components/Radio';
+import { TypeRadio } from '../../../Wizard/TypeRadio';
+import { getTableAggregationSummaryValues } from '../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
+export const GRAND_TOTAL_ROW_LABELS = {
+    off: 'None',
+    top: 'Top',
+    bottom: 'Bottom',
+    pinnedTop: 'Pinned Top',
+    pinnedBottom: 'Pinned Bottom',
+};
+export const GRAND_TOTAL_ROW_DESCRIPTIONS = {
+    off: 'Grand Total Row is not displayed in the grid',
+    top: 'Grand Total Row is displayed at the top of the grid',
+    bottom: 'Grand Total Row is displayed at the bottom of the grid',
+    pinnedTop: 'Grand Total Row is pinned to the top of the grid',
+    pinnedBottom: 'Grand Total Row is pinned to the bottom of the grid',
+};
+export const GRAND_TOTAL_ROW_OPTIONS = [
+    'off',
+    'top',
+    'bottom',
+    'pinnedTop',
+    'pinnedBottom',
+];
+export function getGrandTotalRowKey(layout) {
+    const value = layout.GrandTotalRow;
+    if (value == null || value === false) {
+        return 'off';
+    }
+    return value;
+}
+export function getGrandTotalRowLabel(layout) {
+    return GRAND_TOTAL_ROW_LABELS[getGrandTotalRowKey(layout)];
+}
+export function getGrandTotalRowDescription(layout) {
+    return GRAND_TOTAL_ROW_DESCRIPTIONS[getGrandTotalRowKey(layout)];
+}
+export function getAggFuncSummaryLabel(columnId, aggFunc, aggregationColumnsMap) {
+    if (aggregationColumnsMap[columnId]) {
+        return aggregationColumnsMap[columnId];
+    }
+    if (typeof aggFunc === 'object' && aggFunc.type === 'weightedAverage') {
+        return WEIGHTED_AVERAGE_AGG_FN_NAME;
+    }
+    if (typeof aggFunc === 'string') {
+        return aggFunc;
+    }
+    return 'agg';
+}
 export const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.TableAggregationColumns
         ? (data.TableAggregationColumns || []).find(({ AggFunc }) => typeof AggFunc === 'object' &&
@@ -25,18 +75,15 @@ export const isAggregationsSectionValid = (data) => {
     }
     return true;
 };
-export const AggregationsSectionSummary = () => {
+export const AggregationsSectionSummary = (props) => {
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const entries = layout.TableAggregationColumns || [];
-    let content = null;
-    if (entries.length) {
-        content = (_jsx(FormLayout, { children: entries.map(({ ColumnId, AggFunc }) => (_jsx(FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), children: _jsx(Tag, { children: typeof AggFunc === 'object' ? AggFunc.type : AggFunc }) }, ColumnId))) }));
-    }
-    else {
-        content = _jsx(Tag, { children: "No Aggregations" });
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
+    const values = getTableAggregationSummaryValues(layout, adaptable.api);
+    if (!values.length) {
+        return _jsx(Tag, { children: "No Aggregations" });
     }
-    return _jsx(Box, { children: content });
+    return renderSummaryStringTags(values);
 };
 const ColumnRow = (props) => {
     const aggValue = props.layout?.TableAggregationColumns?.find((agg) => agg.ColumnId === props.column.columnId)?.AggFunc;
@@ -103,10 +150,10 @@ const ColumnRow = (props) => {
         label: col.friendlyName,
         value: col.columnId,
     }));
-    return (_jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName, _jsx(ColumnGroupTag, { column: props.column }), aggValue && (_jsx(SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0 twa:flex-wrap twa:gap-x-1.5 twa:gap-y-0.5", children: [_jsx(Box, { className: "twa:truncate", children: props.column.friendlyName }), _jsx(ColumnGroupTag, { column: props.column }), aggValue && (_jsx(SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem] twa:shrink-0", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
                     label: fnName,
                     value: fnName,
-                })), onValueChange: updateAggFunc })), currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (_jsxs(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [_jsx(Box, { children: "Weight" }), _jsx(SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", placeholder: "Select Weight", value: weightColumnId, items: weightColumnOptions, onValueChange: updateWeightedColumn })] }))] }));
+                })), onValueChange: updateAggFunc })), currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [_jsx(Box, { className: "twa:text-3", children: "Weight" }), _jsx(SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem]", placeholder: "Select Weight", value: weightColumnId, items: weightColumnOptions, onValueChange: updateWeightedColumn })] }))] }));
 };
 export const AggregationsSection = (props) => {
     const adaptable = useAdaptable();
@@ -174,20 +221,13 @@ export const AggregationsSection = (props) => {
             SuppressAggFuncInHeader: checked,
         });
     };
-    return (_jsxs(Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [_jsxs(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Aggregation Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and an aggregation function" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }), _jsxs(Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: [_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Omit Aggregation from Header" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader, children: "Do not show aggregation function names in column headers" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grand Total Row" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of the grand total row in the grid" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { className: "twa:w-[180px]", items: [
-                                        {
-                                            label: 'Off',
-                                            value: null,
-                                        },
-                                    ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                        return {
-                                            label: StringExtensions.CamelCaseToHumanText(position),
-                                            value: position,
-                                        };
-                                    })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                        props.onChange({
-                                            ...layout,
-                                            GrandTotalRow: value,
-                                        });
-                                    } }) })] })] })] }));
+    const aggregationEntries = layout.TableAggregationColumns || [];
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isTableAggregationsSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactColumnTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
+                        props.onChange({
+                            ...layout,
+                            GrandTotalRow: key === 'off' ? null : key,
+                        });
+                    }, children: GRAND_TOTAL_ROW_OPTIONS.map((key) => (_jsx(TypeRadio, { value: key, text: GRAND_TOTAL_ROW_LABELS[key], description: GRAND_TOTAL_ROW_DESCRIPTIONS[key] }, key))) }) })] }));
 };

package/src/View/Layout/Wizard/sections/ColumnsSection.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const ColumnsSectionSummary: React.FunctionComponent;
+export declare const ColumnsSectionSummary: React.FunctionComponent<{
+    layout?: Layout;
+}>;
 interface ColumnsSectionProps {
     onChange: (data: Layout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const ColumnsSection: React.FunctionComponent<ColumnsSectionProps>;
 export {};