@adaptabletools/adaptable-cjs 17.0.0-canary.3 → 18.0.0-canary.0

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -30,8 +30,7 @@ const PermittedValuesSelector = function (props) {
         })();
     }, [props.columnId, filter]);
     const isCreatable = props.allowNewValues && ['String', 'Number'].includes(columnType);
-    const handleOnChange = (value) => {
-        // convert numbers
+    const handleSingleValueChange = (value) => {
         if (isCreatable) {
             if (columnType === 'Number') {
                 let num = parseFloat(value);
@@ -46,6 +45,29 @@ const PermittedValuesSelector = function (props) {
             props.onChange(value);
         }
     };
-    return (React.createElement(Select_1.Select, { className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
+    const handleMultiValueChange = (values) => {
+        if (isCreatable) {
+            if (columnType === 'Number') {
+                const nums = values.map((v) => parseFloat(v)).filter((v) => !isNaN(v));
+                props.onChange(nums);
+            }
+            else {
+                props.onChange(values);
+            }
+        }
+        else {
+            props.onChange(values);
+        }
+    };
+    const handleOnChange = (value) => {
+        // convert numbers
+        if (props.isMulti) {
+            handleMultiValueChange(value);
+        }
+        else {
+            handleSingleValueChange(value);
+        }
+    };
+    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -44,10 +44,7 @@ const ToolPanelWrapper = (props) => {
     const isMinimised = visibilityMode === 'collapsed';
     const isConfigurable = 
     // only module toolPanels are configurable
-    !!moduleInfo &&
-        toolPanelName !== 'OpenFin' &&
-        toolPanelName !== 'IPushPull' &&
-        toolPanelName !== 'Glue42';
+    !!moduleInfo && toolPanelName !== 'OpenFin' && toolPanelName !== 'IPushPull';
     const isToolPanelModuleConfigurable = api.internalApi
         .getModuleService()
         .getModuleById(ModuleConstants_1.ToolPanelModuleId)

package/src/View/Dashboard/ModuleToolbarWrapper.js

@@ -11,7 +11,7 @@ const ModuleToolbarWrapper = (props) => {
     const moduleName = props.moduleInfo.ModuleName;
     const moduleFriendlyName = props.moduleInfo.FriendlyName;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull' && moduleName !== 'Glue42';
+    const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull';
     return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureButton: isConfigurable, onConfigure: () => {
             const maxWidth = api.internalApi.getModuleService().getPopupMaxWidth(moduleName);
             const popupParams = maxWidth

package/src/View/Dashboard/PinnedDashboard.js

@@ -11,7 +11,8 @@ const PinnedDashboard = (props) => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
-    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
+    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
+        adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPreview = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = require("lodash");
+const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
@@ -130,7 +130,7 @@ const DataPreview = (props) => {
     };
     return (React.createElement(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
             const newRowData = [...props.data];
-            const mutationsList = (0, lodash_1.flatten)(Array.from(params.mutations.values()));
+            const mutationsList = (0, flatten_1.default)(Array.from(params.mutations.values()));
             if (!mutationsList.length) {
                 return;
             }

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
+const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
@@ -32,7 +33,8 @@ const renderReportRowsSummary = (report) => {
         report.ReportRowScope === 'ExpressionRows' ? (React.createElement(React.Fragment, null,
             "Include Rows matching the query:",
             ' ',
-            React.createElement(Tag_1.Tag, null, api.internalApi.getAdaptableQueryExpressionText(report.Query)))) : null));
+            React.createElement(Tag_1.Tag, null,
+                React.createElement(ExpressionPreview_1.ExpressionPreview, { query: report.Query })))) : null));
 };
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -99,7 +99,7 @@ const GridFilterExpressionEditor = (props) => {
                     } }, "CLOSE")),
                 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: () => {
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
                         var _a;
                         if (namedQuery) {
                             onAddNamedQuery({

package/src/View/GridFilter/GridFilterPopup.js

@@ -9,6 +9,7 @@ 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");
@@ -20,27 +21,28 @@ 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, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = (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" },
+    const disabled = isReadOnly || 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: "Open Expression Editor", marginLeft: 1 }),
+                        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 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || 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_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
+                        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(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: 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: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !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")))))));
 };

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -8,6 +8,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../components/Dropd
 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");
@@ -18,33 +19,35 @@ 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, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand_1.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: disabled, 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_1.default, { marginRight: 1, width: 500 },
             buttonExpand,
-            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 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            React.createElement(Input_1.default, { 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: disabled || 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_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, 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_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%' } })));
+            React.createElement(Input_1.default, { disabled: disabled, 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_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 saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !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: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: 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" },
+    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, 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,
@@ -53,7 +56,7 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            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(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
             ' ',
             React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',

package/src/View/GridFilter/NamedQuerySelector.js

@@ -48,7 +48,7 @@ const NamedQuerySelector = (props) => {
                 cachedQueries ? (React.createElement(React.Fragment, null,
                     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));
+                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
                         }))))) : null),
         ] },
         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 }));

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CachedQuery } from '../../PredefinedConfig/NamedQueryState';
 export declare const useGridFilterExpressionEditor: () => {
+    isReadOnly: boolean;
     namedQueryModuleAccessLevel: import("../../types").AccessLevel;
     cachedQueries: CachedQuery[];
     expression: string;
@@ -21,4 +22,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

@@ -13,10 +13,11 @@ const useGridFilterExpressionEditor = () => {
     var _a, _b, _c;
     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;
+    const currentLayout = (0, react_redux_1.useSelector)((state) => {
+        return state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout);
     });
+    const isReadOnly = Boolean(currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.IsReadOnly);
+    const gridFilter = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.GridFilter;
     const [isAdaptableReady, setIsAdaptableReady] = React.useState(false);
     const [expression, setExpression] = React.useState(() => {
         return adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
@@ -27,14 +28,17 @@ const useGridFilterExpressionEditor = () => {
     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);
         });
     }, []);
     React.useEffect(() => {
+        var _a;
         if ((gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) != expression) {
-            setExpression(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression);
+            setExpression((_a = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== null && _a !== void 0 ? _a : '');
         }
     }, [gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression]);
     const isExpressionValid = expression == '' ||
@@ -45,7 +49,11 @@ const useGridFilterExpressionEditor = () => {
     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 = () => {
@@ -101,6 +109,7 @@ const useGridFilterExpressionEditor = () => {
         adaptable.api.gridFilterApi.unSuspendGridFilter();
     };
     return {
+        isReadOnly,
         namedQueryModuleAccessLevel,
         cachedQueries,
         expression,
@@ -115,7 +124,7 @@ const useGridFilterExpressionEditor = () => {
         availableColumns,
         runQuery,
         clearQuery,
-        onExpand: () => adaptable.api.gridFilterApi.openExpressionEditorForGridFilter(expression),
+        onExpand: () => adaptable.api.gridFilterApi.openUIEditorForGridFilter(expression),
         saveQuery,
         suspendGridFilter,
         unSuspendGridFilter,
@@ -123,6 +132,8 @@ const useGridFilterExpressionEditor = () => {
             adaptable.api.gridFilterApi.setGridFilterExpression(expression);
         },
         gridFilterAccessLevel,
+        gridFilterHelpPage,
+        gridFilterLinkDisabled,
     };
 };
 exports.useGridFilterExpressionEditor = useGridFilterExpressionEditor;

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -4,28 +4,10 @@ exports.useGridFilterOptionsForExpressionEditorProps = void 0;
 const AdaptableContext_1 = require("../AdaptableContext");
 const useGridFilterOptionsForExpressionEditorProps = () => {
     const adaptable = (0, AdaptableContext_1.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,
-            };
-    }
+    const gridFilterEditors = adaptable.api.optionsApi.getGridFilterOptions().availableFilterEditors;
+    return {
+        showQueryBuilder: gridFilterEditors.includes('QueryBuilder'),
+        showExpressionEditor: gridFilterEditors.includes('ExpressionEditor'),
+    };
 };
 exports.useGridFilterOptionsForExpressionEditorProps = useGridFilterOptionsForExpressionEditorProps;

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

@@ -4,7 +4,6 @@ exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const package_json_1 = require("../../../../package.json");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Tabs_1 = require("../../../components/Tabs");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -14,6 +13,8 @@ const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCol
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
+const env_1 = tslib_1.__importDefault(require("../../../env"));
+const version = env_1.default.VERSION;
 const GridInfoPopup = (props) => {
     const CreateGridSummaries = (colItems) => {
         var _a;
@@ -36,7 +37,7 @@ const GridInfoPopup = (props) => {
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
         if ((_a = props.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', package_json_1.version));
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version));
         }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));

package/src/View/Layout/Wizard/getGridFilterPreview.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Layout } from '../../../types';
+export declare const getGridFilterViewItems: (layout: Layout) => {
+    name: string;
+    view: JSX.Element;
+};

package/src/View/Layout/Wizard/getGridFilterPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridFilterViewItems = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
+const Tag_1 = require("../../../components/Tag");
+const getGridFilterViewItems = (layout) => {
+    var _a;
+    return {
+        name: 'Grid Filters',
+        view: (React.createElement(Tag_1.Tag, null,
+            React.createElement(ExpressionPreview_1.ExpressionPreview, { query: { BooleanExpression: (_a = layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression } }))),
+    };
+};
+exports.getGridFilterViewItems = getGridFilterViewItems;

package/src/View/Layout/Wizard/sections/FilterSection.js

@@ -58,7 +58,7 @@ const FilterSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, { mb: 2 },
                 React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {

package/src/View/Layout/Wizard/sections/GridFilterSection.js

@@ -34,11 +34,11 @@ const GridFilterSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
+    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
+            props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filters"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
-                    props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
-                }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })))));
+        React.createElement(Tabs_1.Tabs.Content, null, expressionEditorContent)));
 };
 exports.GridFilterSection = GridFilterSection;

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -9,7 +9,7 @@ const EditGridFilterButton = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleClick = React.useCallback((event) => {
         event.stopPropagation();
-        adaptable.api.gridFilterApi.openExpressionEditorForGridFilter();
+        adaptable.api.gridFilterApi.openUIEditorForGridFilter();
     }, []);
     return React.createElement(SimpleButton_1.default, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
 };

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -30,7 +30,7 @@ exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;
 const NamedQueryExpressionWizardSection = (props) => {
     const { data, moduleInfo, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
+    return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, showQueryBuilder: true, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
             props.onChange(Object.assign(Object.assign({}, data), { BooleanExpression }));
         }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
 };

package/src/View/Notes/NoteEditor.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const NoteEditor: React.FunctionComponent<{
+    note?: string | null;
+    onNoteChange: (note: string) => void;
+    onClose: () => void;
+    editMode: boolean;
+    isReadonly: boolean;
+}>;

package/src/View/Notes/NoteEditor.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoteEditor = void 0;
+const tslib_1 = require("tslib");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const React = tslib_1.__importStar(require("react"));
+const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
+const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
+    const textAreaRef = React.useRef(null);
+    const [liveValue, setLiveValue] = React.useState(note || '');
+    const throttledOnChange = React.useMemo(() => {
+        const throttled = (0, throttle_1.default)((value) => onNoteChange(value), 300);
+        return (value) => {
+            setLiveValue(value);
+            throttled(value);
+        };
+    }, []);
+    React.useEffect(() => {
+        var _a;
+        if (editMode) {
+            (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [editMode]);
+    if (note === undefined || note === null) {
+        return null;
+    }
+    return (React.createElement(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, width: "100%", minWidth: 180, minHeight: 120, value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }, onChange: (event) => throttledOnChange(event.target.value) }));
+};
+exports.NoteEditor = NoteEditor;

package/src/View/Notes/NotesPopup.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const NotePopup: () => JSX.Element;
+import * as React from 'react';
+export declare const NotesPopup: React.FunctionComponent;