@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.1

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { Flex, Text } from 'rebass';
+import { Box, Flex } from 'rebass';
 import { ExpressionEditor } from '../../components/ExpressionEditor';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import SimpleButton from '../../components/SimpleButton';
 import * as QueryRedux 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';
 export const GridFilterExpressionEditor = (props) => {
     const dispatch = useDispatch();
     const { api } = useAdaptable();
@@ -16,15 +19,68 @@ 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.isValidNamedQueryName(namedQuery).message
+        ? api.namedQueryApi.isValidNamedQuery(namedQuery).message
         : '';
     const hasNamedQueryError = IsNotNullOrEmpty(namedQueryValidationError);
     const onRunQuery = (expression) => {
         api.gridFilterApi.setGridFilterExpression(expression);
     };
     const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.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 || isExistingNamedQuery;
     return (React.createElement(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
@@ -32,16 +88,13 @@ export const GridFilterExpressionEditor = (props) => {
             },
         } },
         React.createElement(Flex, { height: "100%", flexDirection: "column" },
-            React.createElement(ExpressionEditor, { showQueryBuilder: true, type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }),
+            React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
             React.createElement(Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
                 props.onDismiss && (React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
                         props.onDismiss();
                     } }, "CLOSE")),
-                React.createElement(Text, { fontSize: 2, mr: 3, style: {
-                        flex: 1,
-                        color: 'var(--ab-color-error)',
-                        textAlign: 'end',
-                    } }, namedQueryValidationError),
+                React.createElement(Box, { flex: 1 }),
+                React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
                 React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
                         var _a;
                         if (namedQuery) {
@@ -52,5 +105,5 @@ export const GridFilterExpressionEditor = (props) => {
                         }
                         onRunQuery(expression);
                         (_a = props === null || props === void 0 ? void 0 : props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
-                    }, disabled: !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError }, "Apply Grid Filter")))));
+                    }, disabled: actionsDisabled }, "Apply Grid Filter")))));
 };

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,12 +1,42 @@
 import * as React from 'react';
+import { Flex } from 'rebass';
+import DropdownButton from '../../components/DropdownButton';
+import FieldWrap from '../../components/FieldWrap';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import Input from '../../components/Input';
 import Panel from '../../components/Panel';
-import { useAdaptable } from '../AdaptableContext';
+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 { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
+import { NamedQuerySelector } from './NamedQuerySelector';
+import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 export const GridFilterPopup = () => {
-    const adaptable = useAdaptable();
-    const gridFilter = adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, } = useGridFilterExpressionEditor();
+    const handleEnter = (e) => {
+        if (e.key === 'Enter') {
+            runQuery();
+        }
+    };
+    const disabled = isSuspended || gridFilterAccessLevel === 'ReadOnly';
     return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter" },
-        React.createElement(Panel, { flex: 1 },
-            React.createElement(GridFilterExpressionEditor, { expression: gridFilter }))));
+        React.createElement(Panel, { bodyProps: { height: '100%' }, height: "100%" },
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Expression" },
+                    React.createElement(FieldWrap, { marginRight: 1, width: "100%" },
+                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }),
+                        React.createElement(Input, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
+                        isExpressionValid ? (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: isSuspended || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })) : (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+                        ' ',
+                        (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== '' && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
+                React.createElement(FormRow, { label: "" },
+                    React.createElement(Flex, { justifyContent: "space-around" },
+                        React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
+                        isSuspended ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: isSuspended || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
+                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
+                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
 };

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -6,7 +6,6 @@ export const GridFilterStatusbar = (props) => {
     const currentLayoutName = useSelector((state) => state.Layout.CurrentLayout);
     const currentLayout = useSelector((state) => state.Layout.Layouts).find((layout) => layout.Name === currentLayoutName);
     const query = (_b = (_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '';
-    console.log('currentLayout', currentLayout);
     let text = query;
     let popover = null;
     if (query.length > queryMaxLength) {

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

@@ -1,29 +1,5 @@
-import * as React from 'react';
-import { CachedQuery } from '../../PredefinedConfig/NamedQueryState';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import { NamedQuery } from '../../types';
+/// <reference types="react" />
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export interface QueryViewPanelComponentProps extends ViewPanelProps {
-    CurrentQuery: string;
-    NamedQueries: NamedQuery[];
-    CachedQueries: CachedQuery[];
-    onAddCachedQuery: (cachedQuery: CachedQuery) => SystemRedux.SystemCachedQueryAddAction;
-    onShowNamedQueries: (value: string, popup: string) => PopupRedux.PopupShowScreenAction;
 }
-interface QueryViewPanelComponentState {
-    isAdaptableReady: boolean;
-    expression: string;
-}
-declare class QueryViewPanelComponent extends React.Component<QueryViewPanelComponentProps, QueryViewPanelComponentState> {
-    constructor(props: QueryViewPanelComponentProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: QueryViewPanelComponentProps): void;
-    render(): JSX.Element;
-    private clearQuery;
-    saveQuery(): void;
-    onSelectedQueryChanged(queryName: string): void;
-    runQuery(expression?: string): void;
-}
-export declare let GridFilterPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof QueryViewPanelComponentProps>>;
-export {};
+export declare const GridFilterPanelControl: (props: QueryViewPanelComponentProps) => JSX.Element;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,165 +1,64 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
 import { Flex } from 'rebass';
 import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
 import { Icon } from '../../components/icons';
 import Input from '../../components/Input';
-import { SortOrder } from '../../PredefinedConfig/Common/Enums';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 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';
-class QueryViewPanelComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isAdaptableReady: false,
-            expression: this.props.CurrentQuery || '',
-        };
+import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
+import { NamedQuerySelector } from './NamedQuerySelector';
+import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+const QueryViewPanelComponent = (props) => {
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, } = useGridFilterExpressionEditor();
+    if (!isAdaptableReady) {
+        return null;
     }
-    componentDidMount() {
-        this.props.api.eventApi.on('AdaptableReady', () => {
-            this.setState({ isAdaptableReady: true });
-        });
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.CurrentQuery !== this.props.CurrentQuery) {
-            this.setState({
-                expression: this.props.CurrentQuery,
-            });
-        }
-    }
-    render() {
-        if (this.state.isAdaptableReady === false) {
-            return null;
-        }
-        const isExpressionValid = this.state.expression == '' ||
-            this.props.api.internalApi
-                .getQueryLanguageService()
-                .validateBoolean(this.state.expression, NamedQueryModuleId).isValid;
-        const isExpressionNamedQuery = this.props.NamedQueries.find((sq) => sq.BooleanExpression == this.state.expression) != null;
-        let sortedNamedQueries = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, this.props.NamedQueries, 'Name');
-        let availableSearches = [
-            ...sortedNamedQueries.map((expression) => {
-                return {
-                    label: expression.Name,
-                    icon: expression.BooleanExpression === this.props.CurrentQuery ? (React.createElement(Icon, { name: 'check' })) : null,
-                    onClick: () => this.runQuery(expression.BooleanExpression),
-                };
-            }),
-            ...(ArrayExtensions.IsNotNullOrEmpty(this.props.CachedQueries) ? [{ separator: true }] : []),
-            ...(ArrayExtensions.IsNotNullOrEmpty(this.props.CachedQueries)
-                ? this.props.CachedQueries.slice(-5)
-                    .reverse()
-                    .map((item) => ({
-                    label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`,
-                    icon: React.createElement(Icon, { name: 'history' }),
-                    onClick: () => this.props.api.gridFilterApi.setGridFilterExpression(item.expression),
-                }))
-                : []),
-        ];
-        let availableColumns = this.props.api.columnApi.getColumns().map((col) => {
-            return {
-                label: col.friendlyName,
-                onClick: () => this.setState({
-                    expression: this.state.expression + `[${col.columnId}]`,
-                }),
-            };
-        });
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        const handleEnter = (e) => {
-            if (e.key === 'Enter') {
-                this.runQuery();
-            }
-        };
-        const renderTextInput = () => {
-            return this.props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500 },
-                React.createElement(ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.api.gridFilterApi.expandGridFilterEditor(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
-                React.createElement(Input, { type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { fontFamily: 'monospace', fontSize: 12 } }),
-                isExpressionValid ? (React.createElement(ButtonPlay, { onClick: () => this.runQuery(), tooltip: '', accessLevel: 'Full', variant: "text", tone: "neutral", disabled: this.state.expression == '' || this.state.expression == this.props.CurrentQuery, marginRight: 1 })) : (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
-                ' ',
-                this.props.CurrentQuery !== '' && (React.createElement(ButtonClear, { onClick: () => this.clearQuery(), tooltip: "Clear Grid Filter", accessLevel: 'Full' })))) : (React.createElement(Input, { type: "text", placeholder: "Grid Filter", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { width: '100%' } }));
-        };
-        const queryModuleAccessLevel = this.props.api.internalApi
-            .getEntitlementService()
-            .getEntitlementAccessLevelForModule(NamedQueryModuleId);
-        const saveButton = (React.createElement(ButtonSave, { onClick: () => this.saveQuery(), tooltip: "Save as Named Query", accessLevel: queryModuleAccessLevel, disabled: !isExpressionValid || isExpressionNamedQuery || this.state.expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
-        const renderButtons = () => {
-            return this.props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
-                saveButton,
-                React.createElement(DropdownButton, { variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
-                    React.createElement(Icon, { name: 'list' })),
-                React.createElement(DropdownButton, { disabled: ArrayExtensions.IsNullOrEmpty(availableSearches), variant: "text", items: availableSearches, marginRight: 1, tooltip: "Load Named Query", icon: "folder-open" }),
-                ' ')) : (React.createElement(React.Fragment, null,
-                saveButton,
-                React.createElement(ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.api.gridFilterApi.expandGridFilterEditor(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
-                React.createElement(ButtonClear, { onClick: () => this.clearQuery(), tooltip: "Clear Grid Filter", accessLevel: 'Full', disabled: this.state.expression == '' }),
-                React.createElement(ButtonPlay, { onClick: () => this.runQuery(), tooltip: "Run Grid Filter", accessLevel: 'Full', variant: "text", tone: "neutral", disabled: !isExpressionValid ||
-                        this.state.expression == '' ||
-                        this.state.expression == this.props.CurrentQuery, marginRight: 1 }),
-                React.createElement(DropdownButton, { variant: "text", disabled: ArrayExtensions.IsNullOrEmpty(availableSearches), items: availableSearches, marginRight: 1, tooltip: "Load Named Query", icon: "folder-open" })));
-        };
-        return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, null, renderTextInput()),
-            React.createElement(Flex, null, renderButtons())));
-    }
-    clearQuery() {
-        this.props.api.gridFilterApi.setGridFilterExpression('');
-    }
-    saveQuery() {
-        this.props.onShowNamedQueries(this.state.expression, this.props.moduleInfo.Popup);
-    }
-    onSelectedQueryChanged(queryName) {
-        this.props.api.gridFilterApi.setGridFilterExpression(queryName);
-    }
-    runQuery(expression = this.state.expression) {
-        if (StringExtensions.IsNullOrEmpty(expression) &&
-            StringExtensions.IsNotNullOrEmpty(this.props.CurrentQuery)) {
-            // user pressed enter key with an empty input => clear existing current query
-            this.props.api.gridFilterApi.setGridFilterExpression('');
-            return;
-        }
-        if (!this.props.api.internalApi
-            .getQueryLanguageService()
-            .validateBoolean(expression, NamedQueryModuleId).isValid) {
-            return;
+    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    const handleEnter = (e) => {
+        if (e.key === 'Enter') {
+            runQuery();
         }
-        if (StringExtensions.IsNotNullOrEmpty(this.state.expression)) {
-            let cachedQuery = {
-                expression: this.state.expression,
-                time: new Date(),
-            };
-            if (cachedQuery) {
-                this.props.onAddCachedQuery(cachedQuery);
-            }
-        }
-        this.props.api.gridFilterApi.setGridFilterExpression(expression);
-    }
-}
-function mapStateToProps(state) {
-    var _a, _b, _c;
-    return {
-        CurrentQuery: (_c = (_b = (_a = state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout)) === null || _a === void 0 ? void 0 : _a.GridFilter) === null || _b === void 0 ? void 0 : _b.Expression) !== null && _c !== void 0 ? _c : '',
-        NamedQueries: state.NamedQuery.NamedQueries,
-        CachedQueries: state.System.CachedQueries,
     };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onAddCachedQuery: (cachedQuery) => dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery)),
-        onShowNamedQueries: (value, popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.NamedQueryModuleId, popup, {
-            action: 'New',
-            source: 'Toolbar',
-            value,
-        })),
+    const buttonExpand = (React.createElement(ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }));
+    const renderTextInput = () => {
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500 },
+            buttonExpand,
+            React.createElement(Input, { disabled: isSuspended || gridFilterAccessLevel == 'ReadOnly', type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
+            isExpressionValid ? (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: isSuspended || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })) : (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            ' ',
+            (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== '' && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, null,
+            ' ',
+            buttonExpand,
+            React.createElement(Input, { disabled: isSuspended || gridFilterAccessLevel == 'ReadOnly', type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { width: '100%' } })));
+    };
+    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isSuspended || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
+    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
+    const columnsDropdown = (React.createElement(DropdownButton, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+        React.createElement(Icon, { name: 'list' })));
+    const renderButtons = () => {
+        return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
+            saveButton,
+            isSuspended ? unSuspendButton : suspendButton,
+            columnsDropdown,
+            namedQuerySelector,
+            ' ')) : (React.createElement(React.Fragment, null,
+            React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: isSuspended || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            ' ',
+            React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
+            ' ',
+            saveButton,
+            isSuspended ? unSuspendButton : suspendButton,
+            namedQuerySelector));
     };
-}
-export let GridFilterPanelControl = connect(mapStateToProps, mapDispatchToProps)(QueryViewPanelComponent);
+    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex, null, renderTextInput()),
+        React.createElement(Flex, null, renderButtons())));
+};
+export const GridFilterPanelControl = QueryViewPanelComponent;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CachedQuery } from '../../PredefinedConfig/NamedQueryState';
+import { NamedQuery } from '../../types';
+export declare const AvailableSearchLabel: (props: {
+    label: string;
+    expression: string;
+}) => JSX.Element;
+export declare const NamedQuerySelector: (props: {
+    namedQueries: NamedQuery[];
+    cachedQueries: CachedQuery[];
+    currentQuery: string;
+    onSelect: (query: string) => void;
+    setGridFilterExpression: (query: string) => void;
+    children?: any;
+    disabled?: boolean;
+}) => JSX.Element;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { Icon } from '../../components/icons';
+import Panel from '../../components/Panel';
+import SimpleButton from '../../components/SimpleButton';
+import { Tag } from '../../components/Tag';
+import { SortOrder } from '../../PredefinedConfig/Common/Enums';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { AdaptablePopover } from '../AdaptablePopover';
+import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
+export const AvailableSearchLabel = (props) => {
+    return (React.createElement(Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
+        React.createElement(Box, { mb: 2, flex: 1 }, props.label),
+        React.createElement(Tag, null, props.expression)));
+};
+export const NamedQuerySelector = (props) => {
+    var _a;
+    const sortedNamedQueries = (_a = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name')) !== null && _a !== void 0 ? _a : [];
+    const availableSearches = sortedNamedQueries.map((expression) => {
+        return {
+            label: (React.createElement(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(Icon, { name: 'check' }) : null,
+            onClick: () => props.onSelect(expression.BooleanExpression),
+        };
+    });
+    const cachedQueries = ArrayExtensions.IsNotNullOrEmpty(props.cachedQueries)
+        ? props.cachedQueries
+            .slice(-3)
+            .reverse()
+            .map((item) => ({
+            label: (React.createElement(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: React.createElement(Icon, { name: 'history' }),
+            onClick: () => props.setGridFilterExpression(item.expression),
+        }))
+        : null;
+    return ArrayExtensions.IsNotNullOrEmpty(cachedQueries) ||
+        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            React.createElement(Flex, { justifyContent: "stretch", flexDirection: "column" },
+                React.createElement(Panel, { header: "Named Queries" },
+                    React.createElement(Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
+                        return (React.createElement(SimpleButton, { mb: 2, variant: "text", key: index, onClick: item.onClick }, item.label));
+                    }))),
+                cachedQueries ? (React.createElement(React.Fragment, null,
+                    React.createElement(Panel, { mt: 2, header: "Recent Grid Filters" },
+                        React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton, { mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
+                        }))))) : null),
+        ] },
+        React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { CachedQuery } from '../../PredefinedConfig/NamedQueryState';
+export declare const useGridFilterExpressionEditor: () => {
+    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;
+    availableColumns: any[];
+    runQuery: (newExpression?: string) => void;
+    clearQuery: () => void;
+    onExpand: () => void;
+    saveQuery: () => void;
+    suspendGridFilter: () => void;
+    unSuspendGridFilter: () => void;
+    setGridFilterExpression: (expression: string) => void;
+    gridFilterAccessLevel: import("../../types").AccessLevel;
+};