@adaptabletools/adaptable 22.0.0-canary.0 → 22.0.0-canary.10

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/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => React.JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column Id cannot be empty" | "A Column already exists with that id" | "No data type specified for column";
+export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column ID is required." | "A column with this ID already exists." | "A data type is required for the column.";
 export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;

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

@@ -40,15 +40,15 @@ export const renderFreeTextColumnSummary = (data) => {
 export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getUIAvailableColumns();
     if (!data.ColumnId) {
-        return 'Column Id cannot be empty';
+        return 'A Column ID is required.';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
     if (hasAlreadyExistingId) {
-        return 'A Column already exists with that id';
+        return 'A column with this ID already exists.';
     }
     if (!data.FreeTextColumnSettings.DataType) {
-        return 'No data type specified for column';
+        return 'A data type is required for the column.';
     }
     return true;
 };

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/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -1,82 +1,73 @@
 import * as React from 'react';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { ADAPTABLE_VERSION } from '../../../EnvVars';
+import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
+import { DataSource, InfiniteTableGrid } from '../../../components/InfiniteTable';
 import Panel from '../../../components/Panel';
 import { Tabs } from '../../../components/Tabs';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import Helper from '../../../Utilities/Helpers/Helper';
-import { AdaptablePopover } from '../../AdaptablePopover';
-import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
-import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
-import { ADAPTABLE_VERSION } from '../../../EnvVars';
-import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
 import clsx from 'clsx';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export 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.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.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.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.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.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.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions.createCommaSeparatedString(calcColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.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.cloneObject(colItems);
-        rowColItems[0].Content = item1;
-        rowColItems[1].Content = item2;
-        if (item3) {
-            let infoButton = React.createElement(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, { key: index, colItems: x });
-    });
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
         React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
@@ -85,7 +76,8 @@ export const GridInfoPopup = (props) => {
                     React.createElement(Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
                     React.createElement(Tabs.Content, null,
                         React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -79,7 +79,7 @@ function mapDispatchToProps(dispatch) {
         showMissingLayoutsError: () => {
             dispatch(PopupRedux.PopupShowConfirmation({
                 Header: 'Missing Layouts',
-                Msg: 'You have not defined any Layout! See the console for more details.',
+                Msg: 'No Layouts have been defined. Please check the console for details.',
                 ConfirmAction: null,
                 ConfirmButtonText: 'OK',
                 CancelButtonText: null,