@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

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

@@ -1,49 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
-const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
-const Tag_1 = require("../../../components/Tag");
-const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
+import * as React from 'react';
+import { useState } from 'react';
+import { Box } from 'rebass';
+import Input from '../../../components/Input';
+import ErrorBox from '../../../components/ErrorBox';
+import Radio from '../../../components/Radio';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import DropdownButton from '../../../components/DropdownButton';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import AdaptableInput from '../../Components/AdaptableInput';
+import { CheckBox } from '../../../components/CheckBox';
+import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
+import { Tag } from '../../../components/Tag';
+import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
 const options = [
     { value: 'Number', label: 'Number' },
     { value: 'String', label: 'String' },
     { value: 'Date', label: 'Date' },
     { value: 'Boolean', label: 'Boolean' },
 ];
-const renderFreeTextColumnSummary = (data) => {
+export const renderFreeTextColumnSummary = (data) => {
     var _a;
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(rebass_1.Box, null,
+    return (React.createElement(Box, { fontSize: 2 },
+        React.createElement(Box, null,
             "Column Identifier: ",
-            React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.ColumnId)),
+        data.FriendlyName ? (React.createElement(Box, { mt: 3 },
             "Column Name: ",
-            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
-        React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
+        React.createElement(Box, { mt: 3 },
             "Data Type: ",
-            React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
+        data.DefaultValue !== undefined ? (React.createElement(Box, { mt: 3 },
             "Default Value: ",
-            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.DefaultValue))) : null,
+        data.TextEditor !== undefined ? (React.createElement(Box, { mt: 3 },
             "Editor Type: ",
-            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
+            React.createElement(Tag, null, data.TextEditor))) : null));
 };
-exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
-const isValidFreeTextColumn = (data, api) => {
+export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
         return 'Column Id cannot be empty';
@@ -58,14 +53,13 @@ const isValidFreeTextColumn = (data, api) => {
     }
     return true;
 };
-exports.isValidFreeTextColumn = isValidFreeTextColumn;
-const FreeTextColumnSettingsWizardSection = (props) => {
+export const FreeTextColumnSettingsWizardSection = (props) => {
     var _a;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
+    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
     const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
+    const validCheck = isValidFreeTextColumn(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     const handleColumnIdChange = (event) => {
         let e = event.target;
@@ -95,7 +89,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         let e = event.target;
         let DefaultValue = e.value;
         if (data.FreeTextColumnSettings.DataType === 'Date') {
-            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
+            DefaultValue = DateFormatter(DefaultValue, {
                 Pattern,
             });
         }
@@ -107,17 +101,17 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { FreeTextColumnSettings: Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.FreeTextColumnSettings), settings) }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormLayout_1.default, null,
-            React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
-                React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "ColumnId" },
+                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
+            React.createElement(FormRow, { label: "Column Name" },
+                React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                React.createElement(DropdownButton_1.default, { "data-name": "column-type-dropdown", style: {
+            React.createElement(FormRow, { label: "Type" },
+                React.createElement(DropdownButton, { "data-name": "column-type-dropdown", style: {
                         width: '300px',
                         whiteSpace: 'normal',
                         overflow: 'hidden',
@@ -129,25 +123,24 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                     })) }, data.FreeTextColumnSettings.DataType
                     ? data.FreeTextColumnSettings.DataType
                     : 'Select Data Type')),
-            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+            React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
-                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
-                    ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
+                } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
+                    ? parseToISO(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.FreeTextColumnSettings.DataType === 'Number'
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'Date'
                         ? 'date'
                         : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
-            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
-                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
+            React.createElement(FormRow, { label: "Header Tooltip" },
+                React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
                         HeaderToolTip: e.target.value,
                     }) })),
             ' ',
-            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
-                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
-                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
-        React.createElement(rebass_1.Box, { mt: 2 },
-            React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
+            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormRow, { label: "Editor Type" },
+                React.createElement(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
+                React.createElement(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
+        ErrorMessage ? (React.createElement(ErrorBox, { mt: 2, mb: 2 }, ErrorMessage)) : null,
+        React.createElement(Box, { mt: 2 },
+            React.createElement(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
 };
-exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

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

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
-const react_redux_1 = require("react-redux");
-const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
-const FreeTextColumnWizard = (props) => {
+import * as React from 'react';
+import { useState } from 'react';
+import { Box } from 'rebass';
+import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
+import { cloneObject } from '../../../Utilities/Helpers/Helper';
+import { FreeTextColumnSettingsWizardSection, isValidFreeTextColumn, renderFreeTextColumnSummary, } from './FreeTextColumnSettingsWizardSection';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextColumnRedux';
+import { useDispatch, useSelector } from 'react-redux';
+import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+export const FreeTextColumnWizard = (props) => {
     var _a;
-    const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
-    const [freeTextColumn, setFreeTextColumn] = (0, react_1.useState)(() => {
+    const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
+    const [freeTextColumn, setFreeTextColumn] = useState(() => {
         var _a, _b;
         if (props.data) {
-            return (0, Helper_1.cloneObject)(props.data);
+            return cloneObject(props.data);
         }
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
             return allFreeTextColumns.find((column) => column.ColumnId === props.popupParams.column.columnId);
         }
-        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
+        return ObjectFactory.CreateEmptyFreeTextColumn();
     });
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dispatch = useDispatch();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
@@ -36,34 +32,33 @@ const FreeTextColumnWizard = (props) => {
         }
         props.onFinishWizard(freeTextColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
-                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
+                isValid: isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
+                    return (React.createElement(Box, { padding: 2 },
+                        React.createElement(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
             {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
-                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
+                renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
+                renderSummary: renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return (React.createElement(Box, { padding: 2 },
+                        React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',
             },
         ] }));
 };
-exports.FreeTextColumnWizard = FreeTextColumnWizard;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const GridFilterExpressionEditor: (props: {
+    expression?: string;
+    onDismiss?: () => void;
+}) => JSX.Element;

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import { Flex, Text } 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 { GridFilterModuleId } from '../../Utilities/Constants/ModuleConstants';
+import { IsNotNullOrEmpty, IsNullOrEmpty } from '../../Utilities/Extensions/StringExtensions';
+import { useAdaptable } from '../AdaptableContext';
+export const GridFilterExpressionEditor = (props) => {
+    const dispatch = useDispatch();
+    const { api } = useAdaptable();
+    const [namedQuery, setNamedQuery] = React.useState(null);
+    const [expression, setExpression] = React.useState(props.expression);
+    const isExpressionValid = api.internalApi
+        .getQueryLanguageService()
+        .validateBoolean(expression, GridFilterModuleId).isValid;
+    const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    const namedQueryValidationError = namedQuery
+        ? api.namedQueryApi.isValidNamedQueryName(namedQuery).message
+        : '';
+    const hasNamedQueryError = IsNotNullOrEmpty(namedQueryValidationError);
+    const onRunQuery = (expression) => {
+        api.gridFilterApi.setGridFilterExpression(expression);
+    };
+    const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery));
+    return (React.createElement(NamedQueryContext.Provider, { value: {
+            namedQuery: namedQuery,
+            setNamedQuery: (newQuery) => {
+                setNamedQuery(newQuery);
+            },
+        } },
+        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(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(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
+                        var _a;
+                        if (namedQuery) {
+                            onAddNamedQuery({
+                                Name: namedQuery.Name,
+                                BooleanExpression: expression,
+                            });
+                        }
+                        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")))));
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GridFilterPopup: () => JSX.Element;

package/src/View/GridFilter/GridFilterPopup.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Panel from '../../components/Panel';
+import { useAdaptable } from '../AdaptableContext';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
+export const GridFilterPopup = () => {
+    const adaptable = useAdaptable();
+    const gridFilter = adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
+    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter" },
+        React.createElement(Panel, { flex: 1 },
+            React.createElement(GridFilterExpressionEditor, { expression: gridFilter }))));
+};

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridFilterStatusbar: React.FunctionComponent;

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+export const GridFilterStatusbar = (props) => {
+    var _a, _b;
+    const queryMaxLength = 15;
+    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) {
+        text = query.substring(0, queryMaxLength - 3) + '...';
+        popover = query;
+    }
+    return React.createElement(React.Fragment, null, text !== null && text !== void 0 ? text : 'No Query');
+};

package/src/View/{Query/QueryViewPanel.d.ts → GridFilter/GridFilterViewPanel.d.ts}

@@ -1,15 +1,14 @@
-import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import { CachedQuery, NamedQuery } from '../../PredefinedConfig/QueryState';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import * as QueryRedux from '../../Redux/ActionsReducers/QueryRedux';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 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';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export interface QueryViewPanelComponentProps extends ViewPanelProps {
     CurrentQuery: string;
     NamedQueries: NamedQuery[];
     CachedQueries: CachedQuery[];
     onAddCachedQuery: (cachedQuery: CachedQuery) => SystemRedux.SystemCachedQueryAddAction;
-    onRunQuery: (expression: string) => QueryRedux.QueryRunAction;
     onShowNamedQueries: (value: string, popup: string) => PopupRedux.PopupShowScreenAction;
 }
 interface QueryViewPanelComponentState {
@@ -26,5 +25,5 @@ declare class QueryViewPanelComponent extends React.Component<QueryViewPanelComp
     onSelectedQueryChanged(queryName: string): void;
     runQuery(expression?: string): void;
 }
-export declare let QueryViewPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<QueryViewPanelComponent> & QueryViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "NamedQueries" | "CurrentQuery" | "CachedQueries" | "viewType" | "onAddCachedQuery" | "onRunQuery" | "onShowNamedQueries">>;
+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 {};

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -0,0 +1,165 @@
+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 { 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 || '',
+        };
+    }
+    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;
+        }
+        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,
+        })),
+    };
+}
+export let GridFilterPanelControl = connect(mapStateToProps, mapDispatchToProps)(QueryViewPanelComponent);

package/src/View/{Query/ExpandedQueryPopup.d.ts → GridFilter/GridFilterWindowPopup.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
-export declare const ExpandedQueryPopup: React.FunctionComponent<WindowPopupChildProps>;
+export declare const GridFilterWindowPopup: React.FunctionComponent<WindowPopupChildProps>;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
+export const GridFilterWindowPopup = (props) => {
+    return (React.createElement(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+};

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableObjectsSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
-const AdaptableObjectsSummary = () => {
-    const state = (0, react_redux_1.useSelector)((state) => state);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box } from 'rebass';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
+export const AdaptableObjectsSummary = () => {
+    const state = useSelector((state) => state);
+    const adaptable = useAdaptable();
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
         var _a;
         if (!module.isModuleAvailable()) {
             return null;
@@ -21,9 +17,8 @@ const AdaptableObjectsSummary = () => {
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return null;
         }
-        return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
+        return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
             React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
-            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
+            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList, { items: items, module: module })));
     })));
 };
-exports.AdaptableObjectsSummary = AdaptableObjectsSummary;