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

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

@@ -1,44 +1,49 @@
-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';
+"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 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");
+const Select_1 = require("../../../components/Select");
 const options = [
     { value: 'Number', label: 'Number' },
     { value: 'String', label: 'String' },
     { value: 'Date', label: 'Date' },
     { value: 'Boolean', label: 'Boolean' },
 ];
-export const renderFreeTextColumnSummary = (data) => {
+const renderFreeTextColumnSummary = (data) => {
     var _a;
-    return (React.createElement(Box, { fontSize: 2 },
-        React.createElement(Box, null,
+    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+        React.createElement(rebass_1.Box, null,
             "Column Identifier: ",
-            React.createElement(Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(Box, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.ColumnId)),
+        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Column Name: ",
-            React.createElement(Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
-        React.createElement(Box, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
+        React.createElement(rebass_1.Box, { mt: 3 },
             "Data Type: ",
-            React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(Box, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
+        data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Default Value: ",
-            React.createElement(Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(Box, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
+        data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Editor Type: ",
-            React.createElement(Tag, null, data.TextEditor))) : null));
+            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
 };
-export const isValidFreeTextColumn = (data, api) => {
+exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
+const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
         return 'Column Id cannot be empty';
@@ -53,13 +58,14 @@ export const isValidFreeTextColumn = (data, api) => {
     }
     return true;
 };
-export const FreeTextColumnSettingsWizardSection = (props) => {
+exports.isValidFreeTextColumn = isValidFreeTextColumn;
+const FreeTextColumnSettingsWizardSection = (props) => {
     var _a;
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
+    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
     const inEdit = props.isEdit;
-    const validCheck = isValidFreeTextColumn(data, api);
+    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     const handleColumnIdChange = (event) => {
         let e = event.target;
@@ -89,7 +95,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
         let e = event.target;
         let DefaultValue = e.value;
         if (data.FreeTextColumnSettings.DataType === 'Date') {
-            DefaultValue = DateFormatter(DefaultValue, {
+            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
                 Pattern,
             });
         }
@@ -101,46 +107,37 @@ export 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, 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: () => {
+        React.createElement(FormLayout_1.default, null,
+            React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
+                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: () => {
                         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(FormRow, { label: "Type" },
-                React.createElement(DropdownButton, { "data-name": "column-type-dropdown", style: {
-                        width: '300px',
-                        whiteSpace: 'normal',
-                        overflow: 'hidden',
-                        maxWidth: 'inherit',
-                    }, placeholder: "Select Data Type", showClearButton: !!data.FreeTextColumnSettings.DataType, onClear: () => handleDataTypeChange(null), columns: ['label'], items: options.map((item) => ({
-                        value: item.value,
-                        label: item.label,
-                        onClick: () => handleDataTypeChange(item.value),
-                    })) }, data.FreeTextColumnSettings.DataType
-                    ? data.FreeTextColumnSettings.DataType
-                    : 'Select Data Type')),
-            React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+            React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
+                React.createElement(rebass_1.Box, { style: { maxWidth: 500 } },
+                    React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
+            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) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
-                } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
-                    ? parseToISO(data.DefaultValue, Pattern) || ''
+                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
+                    ? (0, DateHelper_1.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(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({
+                        : 'text', placeholder: "Default Column Value (optional)", 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({
                         HeaderToolTip: e.target.value,
                     }) })),
             ' ',
-            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 }))));
+            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Cell Editor" },
+                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 }))));
 };
+exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

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

@@ -1,27 +1,31 @@
-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) => {
+"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) => {
     var _a;
-    const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
-    const [freeTextColumn, setFreeTextColumn] = useState(() => {
+    const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
+    const [freeTextColumn, setFreeTextColumn] = (0, react_1.useState)(() => {
         var _a, _b;
         if (props.data) {
-            return cloneObject(props.data);
+            return (0, Helper_1.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.CreateEmptyFreeTextColumn();
+        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
     });
-    const dispatch = useDispatch();
+    const dispatch = (0, react_redux_1.useDispatch)();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
@@ -32,33 +36,34 @@ export const FreeTextColumnWizard = (props) => {
         }
         props.onFinishWizard(freeTextColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
-                isValid: isValidFreeTextColumn,
+                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
-                        React.createElement(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
             {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
-                renderSummary: renderObjectTagsSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: renderFreeTextColumnSummary,
+                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',
             },
         ] }));
 };
+exports.FreeTextColumnWizard = FreeTextColumnWizard;

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,48 +1,105 @@
-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();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterExpressionEditor = 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 ExpressionEditor_1 = require("../../components/ExpressionEditor");
+const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/NamedQueryRedux"));
+const PopupRedux_1 = require("../../Redux/ActionsReducers/PopupRedux");
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const useGridFilterOptionsForExpressionEditor_1 = require("./useGridFilterOptionsForExpressionEditor");
+const GridFilterExpressionEditor = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const [namedQuery, setNamedQuery] = React.useState(null);
     const [expression, setExpression] = React.useState(props.expression);
     const isExpressionValid = api.internalApi
         .getQueryLanguageService()
-        .validateBoolean(expression, GridFilterModuleId).isValid;
+        .validateBoolean(expression, ModuleConstants_1.GridFilterModuleId).isValid;
+    const isExistingNamedQuery = Helper_1.default.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 hasNamedQueryError = (0, StringExtensions_1.IsNotNullOrEmpty)(namedQueryValidationError);
     const onRunQuery = (expression) => {
         api.gridFilterApi.setGridFilterExpression(expression);
     };
     const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery));
-    return (React.createElement(NamedQueryContext.Provider, { value: {
+    const handleSaveQuery = () => {
+        dispatch((0, PopupRedux_1.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 = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
+    const actionsDisabled = !isExpressionValid || (0, StringExtensions_1.IsNullOrEmpty)(expression) || hasNamedQueryError || isExistingNamedQuery;
+    return (React.createElement(NamedQueryContext_1.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: () => {
+        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
+            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
+                props.onDismiss && (React.createElement(SimpleButton_1.default, { 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: () => {
+                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
                         var _a;
                         if (namedQuery) {
                             onAddNamedQuery({
@@ -52,5 +109,6 @@ 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")))));
 };
+exports.GridFilterExpressionEditor = GridFilterExpressionEditor;

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,12 +1,49 @@
-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 }))));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
+const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
+const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
+const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
+const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const NamedQuerySelector_1 = require("./NamedQuerySelector");
+const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+const GridFilterPopup = () => {
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+    const handleEnter = (e) => {
+        if (e.key === 'Enter') {
+            runQuery();
+        }
+    };
+    const disabled = isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
+        React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Expression" },
+                    React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
+                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
+                        React.createElement(Input_1.default, { 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_1.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 })),
+                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+                        ' ',
+                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
+                React.createElement(FormLayout_1.FormRow, { label: "" },
+                    React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
+                        React.createElement(ButtonSave_1.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_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: isSuspended || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
+                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
+                        React.createElement(NamedQuerySelector_1.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")))))));
 };
+exports.GridFilterPopup = GridFilterPopup;

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-export const GridFilterStatusbar = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterStatusbar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+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 currentLayoutName = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
+    const currentLayout = (0, react_redux_1.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) {
@@ -15,3 +18,4 @@ export const GridFilterStatusbar = (props) => {
     }
     return React.createElement(React.Fragment, null, text !== null && text !== void 0 ? text : 'No Query');
 };
+exports.GridFilterStatusbar = GridFilterStatusbar;

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;