@adaptabletools/adaptable-cjs 22.0.0-canary.2 → 22.0.0-canary.4

package/src/View/Export/ExportViewPanel.js

@@ -19,6 +19,7 @@ const ReportNameSelector_1 = require("./ReportNameSelector");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
 const Flex_1 = require("../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ExportViewPanel = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const exportApi = props.api.exportApi;
@@ -30,28 +31,34 @@ const ExportViewPanel = (props) => {
     const deleteMessage = currentReport
         ? `Are you sure you want to delete '${currentReport.Name}'?`
         : 'Are you sure you want to delete this report?';
-    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__panel twa:gap-2`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+    const isToolbar = props.viewType === 'Toolbar';
+    const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+            'twa:min-w-[486px] twa:flex-nowrap': isToolbar,
+            'twa:flex-1 twa:flex-wrap': !isToolbar,
+        }) },
         React.createElement(ReportNameSelector_1.ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
         React.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
         React.createElement(Flex_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls twa:w-full`) },
-            React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat }),
-            React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
-                    action: 'Edit',
-                    source: 'Toolbar',
-                })), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null, accessLevel: accessLevel }),
-            React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
-                    action: 'New',
-                    source: 'Toolbar',
-                })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
-            React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
-            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { className: `ab-${elementType}__Export__schedule twa:ml-1`, onClick: () => {
-                    const reportSchedule = ObjectFactory_1.default.CreateReportSchedule(currentReportName, currentFormat);
-                    dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
+            React.createElement(Flex_1.Flex, { className: "twa:min-w-[44px]" },
+                React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat })),
+            React.createElement(Flex_1.Flex, null,
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
+                        action: 'Edit',
+                        source: 'Toolbar',
+                    })), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null, accessLevel: accessLevel }),
+                React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
                         action: 'New',
                         source: 'Toolbar',
-                        value: reportSchedule,
-                    }));
-                }, tooltip: "Schedule", disabled: currentReport == null, accessLevel: props.accessLevel })))));
+                    })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
+                React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
+                props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { className: `ab-${elementType}__Export__schedule`, onClick: () => {
+                        const reportSchedule = ObjectFactory_1.default.CreateReportSchedule(currentReportName, currentFormat);
+                        dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
+                            action: 'New',
+                            source: 'Toolbar',
+                            value: reportSchedule,
+                        }));
+                    }, tooltip: "Schedule", disabled: currentReport == null, accessLevel: props.accessLevel }))))));
 };
 exports.ExportViewPanel = ExportViewPanel;

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

@@ -1,20 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = void 0;
+exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+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;
+};
+exports.isSettingsValid = isSettingsValid;
 const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, flashingAlert.Name || 'Not specified')),
         React.createElement(Flex_1.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_1.CodeBlock, null, flashingAlert.FlashDuration),
@@ -25,6 +41,12 @@ exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
 const FlashingAlertSettingsWizardSection = (props) => {
     let { data: flashingCell } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingCell = flashingCell ?? props.flashingCell;
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...flashingCell,
+            Name: event.target.value,
+        });
+    };
     const setDuration = (FlashDuration) => {
         props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
     };
@@ -63,24 +85,23 @@ const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", className: "twa:mr-3", checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
-                    React.createElement(FormLayout_1.FormRow, { label: "" },
-                        duration !== 'always' && (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mr-2" }, "After"),
-                            React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:text-2" }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(Flex_1.Box, { className: "twa:text-3 twa:h-[43px]" }, "Persists the flashing style indeterminately - can be removed manually"))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
                         React.createElement(CheckBox_1.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_1.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_1.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(FormLayout_1.FormRow, { label: "Duration" },
+                        React.createElement(Flex_1.Flex, { alignItems: "center" },
+                            React.createElement(CheckBox_1.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_1.default, { "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(Flex_1.Box, { className: "twa:text-2" }, "ms"))))))))));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

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

@@ -21,7 +21,7 @@ const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection"
 const Flex_1 = require("../../../components/Flex");
 const FlashingCellWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
+    const [flashingCell, doSetFlashingCell] = (0, react_1.useState)(() => {
         let flashingCell = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
@@ -37,9 +37,12 @@ const FlashingCellWizard = (props) => {
         }
         return flashingCell;
     });
+    const setFlashingCell = (0, react_1.useCallback)((data) => {
+        doSetFlashingCell(data);
+    }, []);
     const updateProperty = (propName) => {
         return (value) => {
-            setFlashingCell((flashingCell) => {
+            doSetFlashingCell((flashingCell) => {
                 flashingCell = { ...flashingCell, [propName]: value };
                 return flashingCell;
             });
@@ -61,6 +64,14 @@ const FlashingCellWizard = (props) => {
         props.onFinishWizard(flashingCell);
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                details: 'Set Name, Duration and Target Properties',
+                isValid: FlashingCellSettingsWizardSection_1.isSettingsValid,
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
             {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: NewScopeComponent_1.isScopeValid,
@@ -84,13 +95,6 @@ const FlashingCellWizard = (props) => {
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
-            {
-                details: 'Set Duration and Target Properties',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
-                title: 'Settings',
-            },
             {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',

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

@@ -7,16 +7,15 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
-const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
-const Toggle_1 = require("../../../components/Toggle/Toggle");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const Flex_1 = require("../../../components/Flex");
-const Card_1 = require("../../../components/Card");
+const Tabs_1 = require("../../../components/Tabs");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-        React.createElement(Flex_1.Box, null,
-            "Cell alignment ",
-            React.createElement(Tag_1.Tag, null, data.CellAlignment ?? 'default')),
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name)),
         React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
@@ -40,12 +39,11 @@ const renderFormatColumnSettingsSummary = (data) => {
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const onCellAlignmentSelectChanged = (CellAlignment) => {
-        const newData = { ...data, CellAlignment };
-        if (CellAlignment === null) {
-            delete newData.CellAlignment;
-        }
-        props.onChange(newData);
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
     };
     const onExcludeDataRowsChanged = (ExcludeDataRows) => {
         props.onChange({
@@ -83,44 +81,41 @@ const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Card_1.Card, null,
-        React.createElement(Card_1.Card.Title, null, "Settings"),
-        React.createElement(Card_1.Card.Body, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                        React.createElement(ToggleGroup_1.ToggleGroup, null,
-                            React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Left')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Center')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Right')
-                                    : onCellAlignmentSelectChanged(null) }))),
-                    data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
-                        React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
-                                props.onChange({
-                                    ...data,
-                                    ColumnGroupScope: columnGroupScope,
-                                });
-                            } },
-                            React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
-                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "Expanded"),
-                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "Collapsed"))))))));
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Configuration"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null,
+                        data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
+                            React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                    props.onChange({
+                                        ...data,
+                                        ColumnGroupScope: columnGroupScope,
+                                    });
+                                } },
+                                React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
+                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
+                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

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

@@ -13,7 +13,6 @@ const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
-        data.CellAlignment === undefined &&
         !api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
@@ -25,7 +24,8 @@ const toStyle = (data) => {
         ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(data.Style ?? {}),
         borderWidth: data.Style?.BorderColor ? 2 : 0,
         borderStyle: 'solid',
-        textAlign: data.CellAlignment ? data.CellAlignment.toLowerCase() : undefined,
+        // ToDO abcdefg
+        textAlign: data.Style?.Alignment ? data.Style.Alignment.toLowerCase() : undefined,
     };
 };
 const renderFormatColumnStyleWizardSummary = (data) => {

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

@@ -11,9 +11,10 @@ const FormatColumnStyleWizardSection_1 = require("./FormatColumnStyleWizardSecti
 const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FormatColumnSettingsWizardSection_1 = require("./FormatColumnSettingsWizardSection");
+const react_redux_1 = require("react-redux");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const react_redux_1 = require("react-redux");
+const react_redux_2 = require("react-redux");
 const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
@@ -61,6 +62,7 @@ const adjustFormatColumn = (formatColumn, api) => {
 };
 function FormatColumnWizard(props) {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const allFormatColumns = (0, react_redux_1.useSelector)((state) => state.FormatColumn?.FormatColumns ?? []);
     const data = props.data ?? props.popupParams?.value;
     const [formatColumn, doSetFormatColumn] = (0, react_1.useState)(() => {
         let formatColumn = data ? (0, Helper_1.cloneObject)(data) : ObjectFactory_1.default.CreateEmptyFormatColumn();
@@ -78,7 +80,7 @@ function FormatColumnWizard(props) {
     const setFormatColumn = React.useCallback((formatColumn) => {
         doSetFormatColumn(adjustFormatColumn(formatColumn, api));
     }, []);
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dispatch = (0, react_redux_2.useDispatch)();
     const handleFinish = () => {
         if (formatColumn?.DisplayFormat?.Options &&
             (0, ObjectExtensions_1.isObjectEmpty)(formatColumn?.DisplayFormat?.Options)) {
@@ -96,6 +98,24 @@ function FormatColumnWizard(props) {
         props.onFinishWizard(formatColumn);
     };
     return (React.createElement(OnePageAdaptableWizard_1.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: FormatColumnSettingsWizardSection_1.renderFormatColumnSettingsSummary,
+                render: () => {
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                        React.createElement(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 title: 'Scope',
                 details: 'Select which Columns will be formatted',
@@ -146,15 +166,6 @@ function FormatColumnWizard(props) {
                     return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },
             },
-            {
-                title: 'Settings',
-                details: 'Set Additional Properties',
-                renderSummary: FormatColumnSettingsWizardSection_1.renderFormatColumnSettingsSummary,
-                render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
-                },
-            },
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',

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

@@ -3,84 +3,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const EnvVars_1 = require("../../../EnvVars");
+const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Tabs_1 = require("../../../components/Tabs");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-const AdaptablePopover_1 = require("../../AdaptablePopover");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
-const EnvVars_1 = require("../../../EnvVars");
-const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
     const api = props.api;
-    const CreateGridSummaries = (colItems) => {
-        const returnRows = [];
-        const calcColumns = api.calculatedColumnApi
-            .getCalculatedColumns()
-            .map((c) => c.ColumnId);
-        const actionColumns = api.actionColumnApi
-            .getActionColumns()
-            .map((ac) => ac.columnId);
-        const freeTextColumns = api.freeTextColumnApi
-            .getFreeTextColumns()
-            .map((c) => c.ColumnId);
-        const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
-        const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
-        const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
-            ? api.gridApi.getColumnSorts().map((gs) => {
-                return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
-            })
-            : null;
-        const selectedRowInfo = api.gridApi.getSelectedRowInfo();
-        if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', adaptableVersion));
-        }
-        if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AG Grid Version', agGridVersion));
-        }
-        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
-        returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
-        returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo?.gridRows.length));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length));
-        returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns)
+    const keyValuePairs = [];
+    const calcColumns = api.calculatedColumnApi
+        .getCalculatedColumns()
+        .map((c) => c.ColumnId);
+    const actionColumns = api.actionColumnApi
+        .getActionColumns()
+        .map((ac) => ac.columnId);
+    const freeTextColumns = api.freeTextColumnApi
+        .getFreeTextColumns()
+        .map((c) => c.ColumnId);
+    const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
+    const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+    const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+        ? api.gridApi.getColumnSorts().map((gs) => {
+            return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+        })
+        : null;
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
+        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+    }
+    if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
+        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+    }
+    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(calcColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(freeTextColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(actionColumns)
-            : 'None'));
-        return returnRows;
+            : 'None' });
+    const domProps = {
+        className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    const createReadOnlyColItem = (colItems, item1, item2, item3) => {
-        let rowColItems = Helper_1.default.cloneObject(colItems);
-        rowColItems[0].Content = item1;
-        rowColItems[1].Content = item2;
-        if (item3) {
-            let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [item3] });
-            rowColItems[2].Content = infoButton;
-        }
-        return rowColItems;
+    keyValuePairs.map((keyValuePair) => {
+        return {
+            Key: keyValuePair.Key,
+            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
+        };
+    })
+        .filter((x) => x.Value);
+    const columnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
-    let propValueColItems = [
-        { Content: 'Property', Size: 5 },
-        { Content: 'Value', Size: 7 },
-    ];
-    let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
-    });
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
         React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
@@ -89,7 +80,8 @@ const GridInfoPopup = (props) => {
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
                     React.createElement(Tabs_1.Tabs.Content, null,
                         React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };