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

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,20 +1,25 @@
-import * as React from 'react';
-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 { ButtonClear } from '../Components/Buttons/ButtonClear';
-import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
-import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
-import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
-import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
-import { NamedQuerySelector } from './NamedQuerySelector';
-import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterPanelControl = 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 icons_1 = require("../../components/icons");
+const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+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 NamedQuerySelector_1 = require("./NamedQuerySelector");
+const useGridFilterExpressionEditor_1 = require("./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();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
         return null;
     }
@@ -24,24 +29,25 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500 },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { 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 })),
+            React.createElement(Input_1.default, { 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_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 })),
             ' ',
-            (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== '' && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, null,
+            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, 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%' } })));
+            React.createElement(Input_1.default, { 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 saveButton = (React.createElement(ButtonSave_1.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_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const namedQuerySelector = (React.createElement(NamedQuerySelector_1.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_1.default, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+        React.createElement(icons_1.Icon, { name: 'list' })));
     const renderButtons = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
             saveButton,
@@ -49,16 +55,16 @@ const QueryViewPanelComponent = (props) => {
             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(ButtonPlay_1.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 == '' }),
+            React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',
             saveButton,
             isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, null, renderTextInput()),
-        React.createElement(Flex, null, renderButtons())));
+    return (React.createElement(rebass_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(rebass_1.Flex, null, renderTextInput()),
+        React.createElement(rebass_1.Flex, null, renderButtons())));
 };
-export const GridFilterPanelControl = QueryViewPanelComponent;
+exports.GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -1,5 +1,10 @@
-import * as React from 'react';
-import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
-export const GridFilterWindowPopup = (props) => {
-    return (React.createElement(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterWindowPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const GridFilterExpressionEditor_1 = require("./GridFilterExpressionEditor");
+const GridFilterWindowPopup = (props) => {
+    return (React.createElement(GridFilterExpressionEditor_1.GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
 };
+exports.GridFilterWindowPopup = GridFilterWindowPopup;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -1,50 +1,56 @@
-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)));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NamedQuerySelector = exports.AvailableSearchLabel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const icons_1 = require("../../components/icons");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const Tag_1 = require("../../components/Tag");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const AdaptablePopover_1 = require("../AdaptablePopover");
+const ButtonOpen_1 = require("../Components/Buttons/ButtonOpen");
+const AvailableSearchLabel = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
+        React.createElement(rebass_1.Box, { mb: 2, flex: 1 }, props.label),
+        React.createElement(Tag_1.Tag, null, props.expression)));
 };
-export const NamedQuerySelector = (props) => {
+exports.AvailableSearchLabel = AvailableSearchLabel;
+const NamedQuerySelector = (props) => {
     var _a;
-    const sortedNamedQueries = (_a = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name')) !== null && _a !== void 0 ? _a : [];
+    const sortedNamedQueries = (_a = ArrayExtensions_1.default.sortArrayWithProperty(Enums_1.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,
+            label: (React.createElement(exports.AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(icons_1.Icon, { name: 'check' }) : null,
             onClick: () => props.onSelect(expression.BooleanExpression),
         };
     });
-    const cachedQueries = ArrayExtensions.IsNotNullOrEmpty(props.cachedQueries)
+    const cachedQueries = ArrayExtensions_1.default.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' }),
+            label: (React.createElement(exports.AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: React.createElement(icons_1.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));
+    return ArrayExtensions_1.default.IsNotNullOrEmpty(cachedQueries) ||
+        ArrayExtensions_1.default.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            React.createElement(rebass_1.Flex, { justifyContent: "stretch", flexDirection: "column" },
+                React.createElement(Panel_1.default, { header: "Named Queries" },
+                    React.createElement(rebass_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
+                        return (React.createElement(SimpleButton_1.default, { 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));
+                    React.createElement(Panel_1.default, { mt: 2, header: "Recent Grid Filters" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton_1.default, { 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 }));
+        React.createElement(SimpleButton_1.default, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen_1.ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
 };
+exports.NamedQuerySelector = NamedQuerySelector;

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

@@ -21,4 +21,6 @@ export declare const useGridFilterExpressionEditor: () => {
     unSuspendGridFilter: () => void;
     setGridFilterExpression: (expression: string) => void;
     gridFilterAccessLevel: import("../../types").AccessLevel;
+    gridFilterHelpPage: string;
+    gridFilterLinkDisabled: boolean;
 };

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import { GridFilterModuleId, NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import { useAdaptable } from '../AdaptableContext';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-export const useGridFilterExpressionEditor = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridFilterExpressionEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
+const useGridFilterExpressionEditor = () => {
     var _a, _b, _c;
-    const adaptable = useAdaptable();
-    const dispatch = useDispatch();
-    const gridFilter = useSelector((state) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const gridFilter = (0, react_redux_1.useSelector)((state) => {
         var _a;
         return (_a = state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout)) === null || _a === void 0 ? void 0 : _a.GridFilter;
     });
@@ -17,12 +21,14 @@ export const useGridFilterExpressionEditor = () => {
     const [expression, setExpression] = React.useState(() => {
         return adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
     });
-    const namedQueries = (_a = useSelector((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
-    const cachedQueries = (_b = useSelector((state) => state.System.CachedQueries)) !== null && _b !== void 0 ? _b : [];
+    const namedQueries = (_a = (0, react_redux_1.useSelector)((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
+    const cachedQueries = (_b = (0, react_redux_1.useSelector)((state) => state.System.CachedQueries)) !== null && _b !== void 0 ? _b : [];
     const isSuspended = (_c = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.IsSuspended) !== null && _c !== void 0 ? _c : false;
     const onAddCachedQuery = (cachedQuery) => {
         dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
     };
+    const gridFilterHelpPage = adaptable.ModuleService.getModuleById('GridFilter').moduleInfo.HelpPage;
+    const gridFilterLinkDisabled = !adaptable.api.internalApi.isDocumentationLinksDisplayed();
     React.useEffect(() => {
         adaptable.api.eventApi.on('AdaptableReady', () => {
             setIsAdaptableReady(true);
@@ -36,12 +42,16 @@ export const useGridFilterExpressionEditor = () => {
     const isExpressionValid = expression == '' ||
         adaptable.api.internalApi
             .getQueryLanguageService()
-            .validateBoolean(expression, NamedQueryModuleId).isValid;
+            .validateBoolean(expression, ModuleConstants_1.NamedQueryModuleId).isValid;
     const isExpressionNamedQuery = namedQueries.find((sq) => sq.BooleanExpression == expression) != null;
     let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
             label: col.friendlyName,
-            onClick: () => setExpression(expression + `[${col.columnId}]`),
+            onClick: () => {
+                // Bogdan - im sure there is a better way to do this check with fancy operators i dont know
+                const newExp = StringExtensions_1.default.IsNotNullOrEmpty(expression) ? expression : '';
+                setExpression(newExp + `[${col.columnId}]`);
+            },
         };
     });
     const clearQuery = () => {
@@ -49,18 +59,18 @@ export const useGridFilterExpressionEditor = () => {
         setExpression('');
     };
     const runQuery = (newExpression = expression) => {
-        if (StringExtensions.IsNullOrEmpty(newExpression) &&
-            StringExtensions.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
+        if (StringExtensions_1.default.IsNullOrEmpty(newExpression) &&
+            StringExtensions_1.default.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
             // user pressed enter key with an empty input => clear existing current query
             adaptable.api.gridFilterApi.setGridFilterExpression('');
             return;
         }
         if (!adaptable.api.internalApi
             .getQueryLanguageService()
-            .validateBoolean(newExpression, NamedQueryModuleId).isValid) {
+            .validateBoolean(newExpression, ModuleConstants_1.NamedQueryModuleId).isValid) {
             return;
         }
-        if (StringExtensions.IsNotNullOrEmpty(expression)) {
+        if (StringExtensions_1.default.IsNotNullOrEmpty(expression)) {
             let cachedQuery = {
                 expression: expression,
                 time: new Date(),
@@ -74,12 +84,12 @@ export const useGridFilterExpressionEditor = () => {
     const gridFilterAccessLevel = React.useMemo(() => {
         return adaptable.api.internalApi
             .getEntitlementService()
-            .getEntitlementAccessLevelForModule(GridFilterModuleId);
+            .getEntitlementAccessLevelForModule(ModuleConstants_1.GridFilterModuleId);
     }, []);
     const namedQueryModuleAccessLevel = adaptable.api.internalApi
         .getEntitlementService()
-        .getEntitlementAccessLevelForModule(NamedQueryModuleId);
-    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(NamedQueryModuleId, popup, {
+        .getEntitlementAccessLevelForModule(ModuleConstants_1.NamedQueryModuleId);
+    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants_1.NamedQueryModuleId, popup, {
         action: 'New',
         source: 'Other',
         value,
@@ -87,7 +97,7 @@ export const useGridFilterExpressionEditor = () => {
     const saveQuery = () => {
         const namedqueryPopuName = adaptable.api.internalApi
             .getModuleService()
-            .getModuleById(NamedQueryModuleId).moduleInfo.Popup;
+            .getModuleById(ModuleConstants_1.NamedQueryModuleId).moduleInfo.Popup;
         onShowNamedQueries(expression, namedqueryPopuName);
     };
     const suspendGridFilter = () => {
@@ -111,7 +121,7 @@ export const useGridFilterExpressionEditor = () => {
         availableColumns,
         runQuery,
         clearQuery,
-        onExpand: () => adaptable.api.gridFilterApi.openExpressionEditorForGridFilter(expression),
+        onExpand: () => adaptable.api.gridFilterApi.openUIEditorForGridFilter(expression),
         saveQuery,
         suspendGridFilter,
         unSuspendGridFilter,
@@ -119,5 +129,8 @@ export const useGridFilterExpressionEditor = () => {
             adaptable.api.gridFilterApi.setGridFilterExpression(expression);
         },
         gridFilterAccessLevel,
+        gridFilterHelpPage,
+        gridFilterLinkDisabled,
     };
 };
+exports.useGridFilterExpressionEditor = useGridFilterExpressionEditor;

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -1,27 +1,13 @@
-import { useAdaptable } from '../AdaptableContext';
-export const useGridFilterOptionsForExpressionEditorProps = () => {
-    const adaptable = useAdaptable();
-    const gridfilterOptions = adaptable.api.optionsApi.getGridFilterOptions();
-    switch (gridfilterOptions.availableFilterEditors) {
-        case 'Both':
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: true,
-            };
-        case 'QueryBuilder':
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: false,
-            };
-        case 'ExpressionEditor':
-            return {
-                showQueryBuilder: false,
-                showExpressionEditor: true,
-            };
-        default:
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: true,
-            };
-    }
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridFilterOptionsForExpressionEditorProps = void 0;
+const AdaptableContext_1 = require("../AdaptableContext");
+const useGridFilterOptionsForExpressionEditorProps = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const gridFilterEditors = adaptable.api.optionsApi.getGridFilterOptions().availableFilterEditors;
+    return {
+        showQueryBuilder: gridFilterEditors.includes('QueryBuilder'),
+        showExpressionEditor: gridFilterEditors.includes('ExpressionEditor'),
+    };
 };
+exports.useGridFilterOptionsForExpressionEditorProps = useGridFilterOptionsForExpressionEditorProps;

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

@@ -1,14 +1,18 @@
-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();
+"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)();
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
         var _a;
         if (!module.isModuleAvailable()) {
             return null;
@@ -17,8 +21,9 @@ export const AdaptableObjectsSummary = () => {
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return null;
         }
-        return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
+        return (React.createElement(rebass_1.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, { items: items, module: module })));
+            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));
 };
+exports.AdaptableObjectsSummary = AdaptableObjectsSummary;

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

@@ -1,13 +1,17 @@
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { PanelWithButton } from '../../Components/Panels/PanelWithButton';
-import { ButtonMinimise } from '../../Components/Buttons/ButtonMinimise';
-import { ButtonMaximise } from '../../Components/Buttons/ButtonMaximise';
-import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
-import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
-import { AdaptablePopover } from '../../AdaptablePopover';
-import { Box } from 'rebass';
-export const AdaptableOptionsComponent = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableOptionsComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
+const ButtonMinimise_1 = require("../../Components/Buttons/ButtonMinimise");
+const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
+const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
+const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const rebass_1 = require("rebass");
+const AdaptableOptionsComponent = (props) => {
     const { api } = props;
     const getAdaptableOptionsColItems = () => [
         { Content: 'Property', Size: 5 },
@@ -54,20 +58,20 @@ export const AdaptableOptionsComponent = (props) => {
                 "(Default: ",
                 formatOptionValue(gridInfoOption.defaultValue),
                 ")"))) : (formattedOptionValue);
-        let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
+        let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
         colItems[2].Content = infoButton;
         return colItems;
     };
     const buildGridInfoOptionComponentContainer = (containerContainerName, gridInfoOptionContainer) => {
         const gridInfoOptionComponents = gridInfoOptionContainer.items.map((gridInfoOption) => {
             const gridOptionColItems = buildGridInfoOptionEntry(gridInfoOption);
-            return React.createElement(AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
+            return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
         });
-        return (React.createElement(AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
+        return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
     };
-    const [gridInfoOptions, setGridInfoOptions] = useState();
-    const [gridInfoContainerComponents, setGridInfoContainerComponents] = useState();
-    useEffect(() => {
+    const [gridInfoOptions, setGridInfoOptions] = (0, react_1.useState)();
+    const [gridInfoContainerComponents, setGridInfoContainerComponents] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
         const gridInfoOptions = api.internalApi.getMetamodelService().getGridInfoOptions();
         const gridInfoContainerComponentMap = new Map();
         gridInfoOptions.forEach((gridInfoOptionContainer, containerName) => {
@@ -76,17 +80,18 @@ export const AdaptableOptionsComponent = (props) => {
         setGridInfoContainerComponents(gridInfoContainerComponentMap);
         setGridInfoOptions(gridInfoOptions);
     }, []);
-    const [expandedComponentContainer, setExpandedComponentContainer] = useState('');
-    return (React.createElement(Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    const [expandedComponentContainer, setExpandedComponentContainer] = (0, react_1.useState)('');
+    return (React.createElement(rebass_1.Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
         Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
 };
+exports.AdaptableOptionsComponent = AdaptableOptionsComponent;
 const OptionContainerComponent = (props) => {
     const { viewMode, name, label, onViewModeChange, children } = props;
     const requestViewModeChange = () => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
-    const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
+    const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
+    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
             fontSize: 3,
             style: {
                 fontWeight: viewMode === 'expanded' ? 800 : 400,