@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,17 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { ExpressionEditor } from '../../components/ExpressionEditor';
-import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
-import SimpleButton from '../../components/SimpleButton';
+import { ExpressionEditor, ExpressionUseCaseCard, } from '../../components/aql/ExpressionEditor';
+import { NamedQueryContext, } from '../../components/aql/ExpressionEditor/NamedQueryContext';
 import * as NamedQueryRedux from '../../Redux/ActionsReducers/NamedQueryRedux';
-import { PopupShowForm } from '../../Redux/ActionsReducers/PopupRedux';
 import { GridFilterModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { IsNotNullOrEmpty, IsNullOrEmpty } from '../../Utilities/Extensions/StringExtensions';
-import Helper from '../../Utilities/Helpers/Helper';
 import { useAdaptable } from '../AdaptableContext';
-import { useGridFilterOptionsForExpressionEditorProps } from './useGridFilterOptionsForExpressionEditor';
-import { Box, Flex } from '../../components/Flex';
 export const GridFilterExpressionEditor = (props) => {
     const dispatch = useDispatch();
     const { api } = useAdaptable();
@@ -20,7 +15,6 @@ export const GridFilterExpressionEditor = (props) => {
     const isExpressionValid = api.internalApi
         .getQueryLanguageService()
         .validateBoolean(expression, GridFilterModuleId).isValid;
-    const isExistingNamedQuery = Helper.objectExists(api.namedQueryApi.getNamedQueries().find((q) => q.BooleanExpression == expression));
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const namedQueryValidationError = namedQuery
         ? api.namedQueryApi.isValidNamedQuery(namedQuery).message
@@ -29,78 +23,35 @@ 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({
-            Id: 'save_query_form',
-            Form: {
-                title: 'Save as Named Query',
-                fields: [
-                    {
-                        name: 'name',
-                        label: 'Name',
-                        fieldType: 'text',
-                    },
-                ],
-                buttons: [
-                    {
-                        label: 'Cancel',
-                        buttonStyle: {
-                            variant: 'text',
-                            tone: 'none',
-                        },
-                    },
-                    {
-                        label: 'Save',
-                        buttonStyle: {
-                            variant: 'raised',
-                            tone: 'accent',
-                        },
-                        disabled: (button, context) => {
-                            if (context.formData.name === '') {
-                                return true;
-                            }
-                            const testQuery = {
-                                Name: context.formData.name,
-                                BooleanExpression: expression,
-                            };
-                            const namedQueryValidationResult = api.namedQueryApi.isValidNamedQuery(testQuery);
-                            if (!namedQueryValidationResult.valid) {
-                                return true;
-                            }
-                        },
-                        onClick: (button, context) => {
-                            onAddNamedQuery({
-                                Name: context.formData.name,
-                                BooleanExpression: expression,
-                            });
-                        },
-                    },
-                ],
-            },
-        }));
-    };
-    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
     const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError;
+    const handleApply = () => {
+        if (namedQuery) {
+            onAddNamedQuery({
+                Name: namedQuery.Name,
+                Expression: expression,
+            });
+        }
+        onRunQuery(expression);
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+        else {
+            api.settingsPanelApi.closeSettingsPanel();
+        }
+    };
     return (_jsx(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
                 setNamedQuery(newQuery);
             },
-        }, children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1", children: [props.onDismiss && (_jsx(SimpleButton, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
-                                props.onDismiss();
-                            }, children: "CLOSE" })), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save", children: "Save Query" }), _jsx(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1", children: "Clear Query" }), _jsx(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
-                                if (namedQuery) {
-                                    onAddNamedQuery({
-                                        Name: namedQuery.Name,
-                                        BooleanExpression: expression,
-                                    });
-                                }
-                                onRunQuery(expression);
-                                props?.onDismiss?.();
-                            }, disabled: actionsDisabled, children: "Apply Grid Filter" })] })] }) }));
+        }, children: _jsx(ExpressionUseCaseCard, { title: "Grid Filter", description: _jsx(_Fragment, { children: "Build a boolean (true / false) Expression to filter which rows are shown in the grid." }), examplesKind: "boolean", children: _jsx(ExpressionEditor, { type: 'scalar', module: GridFilterModuleId, className: "twa:pl-0", value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, suppressTypeInfoCard: true, examplesKind: "boolean", secondaryAction: {
+                    label: 'Apply Grid Filter',
+                    onClick: handleApply,
+                    disabled: actionsDisabled,
+                    icon: 'play',
+                    tone: 'accent',
+                    variant: 'raised',
+                    'data-name': 'action-run',
+                } }) }) }));
 };

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,34 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+import { useGridFilterExpressionEditor } from './Utilities/useGridFilterExpressionEditor';
 import { GridFilterPopupUI } from './GridFilterPopupUI';
+import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
 export const GridFilterPopup = () => {
-    const hookData = useGridFilterExpressionEditor();
-    const handleExpressionChange = (value) => {
-        hookData.setExpression(value);
-    };
-    const handleRunQuery = (expression) => {
-        hookData.runQuery(expression);
-    };
-    const handleClearQuery = () => {
-        hookData.clearQuery();
-    };
-    const handleSaveQuery = () => {
-        hookData.saveQuery();
-    };
-    const handleSuspend = () => {
-        hookData.suspendGridFilter();
-    };
-    const handleUnsuspend = () => {
-        hookData.unSuspendGridFilter();
-    };
-    const handleExpand = () => {
-        hookData.onExpand();
-    };
-    const handleSelectNamedQuery = (query) => {
-        handleRunQuery(query);
-    };
-    const handleSetGridFilterExpression = (query) => {
-        hookData.setGridFilterExpression(query);
-    };
-    return (_jsx(GridFilterPopupUI, { expression: hookData.expression, isExpressionValid: hookData.isExpressionValid, isExpressionNamedQuery: hookData.isExpressionNamedQuery, isSuspended: hookData.isSuspended, isReadOnly: hookData.isReadOnly, availableColumns: hookData.availableColumns, namedQueries: hookData.namedQueries, cachedQueries: hookData.cachedQueries, currentGridFilterExpression: hookData.gridFilter?.Expression, headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: hookData.gridFilterHelpPage, infoLinkDisabled: hookData.gridFilterLinkDisabled, onExpressionChange: handleExpressionChange, onRunQuery: handleRunQuery, onClearQuery: handleClearQuery, onSaveQuery: handleSaveQuery, onSuspend: handleSuspend, onUnsuspend: handleUnsuspend, onExpand: handleExpand, onSelectNamedQuery: handleSelectNamedQuery, onSetGridFilterExpression: handleSetGridFilterExpression, gridFilterAccessLevel: hookData.gridFilterAccessLevel, namedQueryAccessLevel: hookData.namedQueryModuleAccessLevel }));
+    const { gridFilter, gridFilterHelpPage, gridFilterLinkDisabled } = useGridFilterExpressionEditor();
+    return (_jsx(GridFilterPopupUI, { headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled, children: _jsx(GridFilterExpressionEditor, { expression: gridFilter?.Expression ?? '' }) }));
 };

package/src/View/GridFilter/GridFilterPopupUI.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Props for the GridFilterPopupUI component.
+ * Settings Panel shell: header + embedded Expression Editor.
+ */
+export interface GridFilterPopupUIProps {
+    /** Header text for the popup panel */
+    headerText: string;
+    /** Icon name for the popup panel */
+    glyphicon: string;
+    /** Help page URL for the info link */
+    infoLink?: string;
+    /** Whether the info link should be disabled */
+    infoLinkDisabled?: boolean;
+    /** Embedded Expression Editor / Query Builder */
+    children?: React.ReactNode;
+}
+export declare const GridFilterPopupUI: (props: GridFilterPopupUIProps) => React.JSX.Element;

package/src/View/GridFilter/GridFilterPopupUI.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { Flex } from '../../components/Flex';
+export const GridFilterPopupUI = (props) => {
+    const { headerText, glyphicon, infoLink, infoLinkDisabled, children } = props;
+    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, scrollable: false, children: _jsx(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:bg-(--ab-cmp-tabs-active__background)", children: children }) }));
+};

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import FieldWrap from '../../components/FieldWrap';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
@@ -8,11 +9,43 @@ import { ButtonPause } from '../Components/Buttons/ButtonPause';
 import { ButtonSave } from '../Components/Buttons/ButtonSave';
 import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
 import { NamedQuerySelector } from './NamedQuerySelector';
-import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+import { useGridFilterExpressionEditor } from './Utilities/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';
+import { Tooltip } from '../../components/Tooltip';
+const GridFilterExpressionLabel = (props) => {
+    const { expression, disabled, onExpand } = props;
+    const textRef = React.useRef(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    const updateTruncation = React.useCallback(() => {
+        const el = textRef.current;
+        if (!el) {
+            setIsTruncated(false);
+            return;
+        }
+        setIsTruncated(el.scrollWidth > el.clientWidth + 1);
+    }, []);
+    React.useLayoutEffect(() => {
+        updateTruncation();
+    }, [expression, updateTruncation]);
+    React.useEffect(() => {
+        const el = textRef.current;
+        if (!el || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => updateTruncation());
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [updateTruncation]);
+    const labelClassName = cn('twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:bg-background twa:rounded twa:leading-4 twa:flex twa:items-center', {
+        'twa:text-gray-400 twa:italic': !expression,
+        'twa:text-foreground twa:cursor-pointer': expression && !disabled,
+        'twa:text-gray-400 twa:opacity-60 twa:cursor-not-allowed': disabled && !!expression,
+    });
+    const expressionLabel = (_jsx(Box, { className: cn('twa:flex-1 twa:h-full twa:min-w-0 twa:w-full', labelClassName), "data-name": "grid-filter-input", onClick: disabled ? undefined : onExpand, children: _jsx("span", { ref: textRef, className: "twa:min-w-0 twa:flex-1 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap", children: expression || 'Grid Filter...' }) }));
+    return (_jsx(Tooltip, { label: isTruncated && expression ? expression : undefined, className: "twa:flex-1 twa:min-w-0 twa:max-w-full twa:w-full", children: expressionLabel }));
+};
 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) {
@@ -20,21 +53,18 @@ const QueryViewPanelComponent = (props) => {
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
-    const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
+    const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit Grid Filter in Settings Panel", className: "twa:ml-1" }));
     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 = cn(baseClasses, {
-            [placeholderClasses]: !expression,
-        });
-        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" }))] }));
+        return (_jsxs(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, _jsx(GridFilterExpressionLabel, { expression: expression, disabled: disabled, onExpand: onExpand }), gridFilter && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
     const clearButton = hasExpression ? (_jsx(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (_jsx(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (_jsx(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly ||
+            gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY ||
+            !isExpressionValid ||
+            isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
     const suspendButton = hasActiveGridFilter ? (_jsx(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const unSuspendButton = hasActiveGridFilter ? (_jsx(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const namedQuerySelector = hasNamedQueries ? (_jsx(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
@@ -42,8 +72,11 @@ const QueryViewPanelComponent = (props) => {
         return (_jsxs(_Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
+    const isPinnedToolbar = isToolbar && props.toolbarPlacement === 'pinned';
     return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: cn(`ab-${elementType}__Query__wrap`, {
-            'twa:w-[500px]': isToolbar,
+            'twa:min-w-[14rem] twa:w-fit': isToolbar,
+            'twa:max-w-[750px]': isPinnedToolbar,
+            'twa:max-w-[500px]': isToolbar && !isPinnedToolbar,
         }), 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,

package/src/View/GridFilter/NamedQuerySelector.js

@@ -2,22 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
-import { Tag } from '../../components/Tag';
+import { ExpressionTag } from '../../components/Tag';
 import { SortOrder } from '../../AdaptableState/Common/Enums';
+import { isBooleanNamedQuery } from '../../AdaptableState/NamedQueryState';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
 import { Box, Flex } from '../../components/Flex';
 export const AvailableSearchLabel = (props) => {
-    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full", children: [_jsx(Box, { className: "twa:mb-2 twa:flex-1", children: props.label }), _jsx(Tag, { children: props.expression })] }));
+    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full", children: [_jsx(Box, { className: "twa:mb-2 twa:flex-1", children: props.label }), _jsx(ExpressionTag, { children: props.expression })] }));
 };
 export const NamedQuerySelector = (props) => {
-    const sortedNamedQueries = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name') ?? [];
+    const booleanNamedQueries = props.namedQueries.filter(isBooleanNamedQuery);
+    const sortedNamedQueries = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, booleanNamedQueries, 'Name') ?? [];
     const availableSearches = sortedNamedQueries.map((expression) => {
         return {
-            label: (_jsx(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
-            icon: expression.BooleanExpression === props.currentQuery ? _jsx(Icon, { name: 'check' }) : null,
-            onClick: () => props.onSelect(expression.BooleanExpression),
+            label: (_jsx(AvailableSearchLabel, { label: expression.Name, expression: expression.Expression })),
+            icon: expression.Expression === props.currentQuery ? _jsx(Icon, { name: 'check' }) : null,
+            onClick: () => props.onSelect(expression.Expression),
         };
     });
     const cachedQueries = ArrayExtensions.IsNotNullOrEmpty(props.cachedQueries)

package/src/View/GridFilter/Utilities/useGridFilterExpressionEditor.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { CachedQuery } from '../../../AdaptableState/NamedQueryState';
+export declare const useGridFilterExpressionEditor: () => {
+    isReadOnly: boolean;
+    namedQueryModuleAccessLevel: import("../../../types").AccessLevel;
+    cachedQueries: CachedQuery[];
+    expression: string;
+    setExpression: React.Dispatch<React.SetStateAction<string>>;
+    isExpressionNamedQuery: boolean;
+    isExpressionValid: boolean;
+    isSuspended: boolean;
+    gridFilter: import("../../../types").GridFilter;
+    isAdaptableReady: boolean;
+    namedQueries: import("../../../types").NamedQuery[];
+    onAddCachedQuery: (cachedQuery: CachedQuery) => void;
+    runQuery: (newExpression?: string) => void;
+    clearQuery: () => void;
+    onExpand: () => void;
+    saveQuery: () => void;
+    suspendGridFilter: () => void;
+    unSuspendGridFilter: () => void;
+    setGridFilterExpression: (expression: string) => void;
+    gridFilterAccessLevel: import("../../../types").AccessLevel;
+    gridFilterHelpPage: string;
+    gridFilterLinkDisabled: boolean;
+};

package/src/View/GridFilter/Utilities/useGridFilterExpressionEditor.js

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
+import { GridFilterModuleId, NamedQueryModuleId } from '../../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { useAdaptable } from '../../AdaptableContext';
+import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
+export const useGridFilterExpressionEditor = () => {
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const currentLayout = useSelector((state) => {
+        return state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout);
+    });
+    const isReadOnly = Boolean(currentLayout?.IsReadOnly);
+    const gridFilter = currentLayout?.GridFilter;
+    const [isAdaptableReady, setIsAdaptableReady] = React.useState(false);
+    const [expression, setExpression] = React.useState(() => {
+        return adaptable.api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+    });
+    const namedQueries = useSelector((state) => state.NamedQuery.NamedQueries) ?? [];
+    const cachedQueries = useSelector((state) => state.Internal.CachedQueries) ?? [];
+    const isSuspended = gridFilter?.IsSuspended ?? false;
+    const onAddCachedQuery = (cachedQuery) => {
+        dispatch(InternalRedux.CachedQueryAdd(cachedQuery));
+    };
+    const gridFilterHelpPage = adaptable.ModuleService.getModuleById('GridFilter').moduleInfo.HelpPage;
+    const gridFilterLinkDisabled = !adaptable.api.internalApi.isDocumentationLinksDisplayed();
+    React.useEffect(() => {
+        adaptable.api.eventApi.on('AdaptableReady', () => {
+            setIsAdaptableReady(true);
+        });
+    }, []);
+    React.useEffect(() => {
+        if (gridFilter?.Expression != expression) {
+            setExpression(gridFilter?.Expression ?? '');
+        }
+    }, [gridFilter?.Expression]);
+    const isExpressionValid = expression == '' ||
+        adaptable.api.internalApi
+            .getQueryLanguageService()
+            .validateBoolean(expression, NamedQueryModuleId).isValid;
+    const isExpressionNamedQuery = namedQueries.find((sq) => sq.Expression == expression) != null;
+    const clearQuery = () => {
+        adaptable.api.filterApi.gridFilterApi.clearGridFilter();
+        setExpression('');
+    };
+    const runQuery = (newExpression = expression) => {
+        if (StringExtensions.IsNullOrEmpty(newExpression) &&
+            StringExtensions.IsNotNullOrEmpty(gridFilter?.Expression)) {
+            adaptable.api.filterApi.gridFilterApi.setGridFilterExpression('');
+            return;
+        }
+        if (!adaptable.api.internalApi
+            .getQueryLanguageService()
+            .validateBoolean(newExpression, NamedQueryModuleId).isValid) {
+            return;
+        }
+        if (StringExtensions.IsNotNullOrEmpty(expression)) {
+            let cachedQuery = {
+                expression: expression,
+                time: new Date(),
+            };
+            if (cachedQuery) {
+                onAddCachedQuery(cachedQuery);
+            }
+        }
+        adaptable.api.filterApi.gridFilterApi.setGridFilterExpression(newExpression);
+    };
+    const gridFilterAccessLevel = React.useMemo(() => {
+        return adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(GridFilterModuleId);
+    }, []);
+    const namedQueryModuleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(NamedQueryModuleId);
+    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(NamedQueryModuleId, popup, {
+        action: 'New',
+        source: 'Other',
+        value,
+        config: { defaultCurrentSectionName: 'Settings' },
+    }));
+    const saveQuery = () => {
+        const namedqueryPopuName = adaptable.api.internalApi
+            .getModuleService()
+            .getModuleById(NamedQueryModuleId).moduleInfo.Popup;
+        onShowNamedQueries(expression, namedqueryPopuName);
+    };
+    const suspendGridFilter = () => {
+        adaptable.api.filterApi.gridFilterApi.suspendGridFilter();
+    };
+    const unSuspendGridFilter = () => {
+        adaptable.api.filterApi.gridFilterApi.unSuspendGridFilter();
+    };
+    return {
+        isReadOnly,
+        namedQueryModuleAccessLevel,
+        cachedQueries,
+        expression,
+        setExpression,
+        isExpressionNamedQuery,
+        isExpressionValid,
+        isSuspended,
+        gridFilter,
+        isAdaptableReady,
+        namedQueries,
+        onAddCachedQuery,
+        runQuery,
+        clearQuery,
+        onExpand: () => adaptable.api.settingsPanelApi.openSettingsPanel('GridFilter'),
+        saveQuery,
+        suspendGridFilter,
+        unSuspendGridFilter,
+        setGridFilterExpression: (expression) => {
+            adaptable.api.filterApi.gridFilterApi.setGridFilterExpression(expression);
+        },
+        gridFilterAccessLevel,
+        gridFilterHelpPage,
+        gridFilterLinkDisabled,
+    };
+};

package/src/View/GridInfo/AdaptableObjectsSummary.js

@@ -0,0 +1,26 @@
+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';
+export const AdaptableObjectsSummary = ({ className, }) => {
+    const adaptable = useAdaptable();
+    const rerender = useRerender();
+    useEffect(() => {
+        return adaptable.api.eventApi.on('AdaptableStateChanged', rerender);
+    }, [adaptable]);
+    const modules = adaptable.ModuleService.getModuleCollection();
+    const baseClassName = 'ab-AdaptableObjectsSummary';
+    return (_jsx(Box, { className: cn(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+            if (!module.isModuleVisible()) {
+                return null;
+            }
+            const items = module?.toViewAll?.();
+            if (!items?.length) {
+                return null;
+            }
+            return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, children: [_jsx("b", { className: `${baseClassName}__header`, children: module.moduleInfo.FriendlyName }), items?.length && _jsx(AdaptableObjectList, { items: items, module: module })] }, module.moduleInfo.ModuleName));
+        }) }));
+};

package/src/View/GridInfo/GridInfoPopup.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+interface GridInfoPopupProps extends ModuleViewPopupProps<any> {
+}
+export declare const GridInfoPopup: (props: GridInfoPopupProps) => React.JSX.Element;
+export {};