@adaptabletools/adaptable 17.0.0-canary.9 → 17.0.0

package/src/Strategy/PlusMinusModule.js

@@ -12,6 +12,7 @@ const getScopeViewItems_1 = require("./Utilities/getScopeViewItems");
 const PlusMinusWizard_1 = require("../View/PlusMinus/Wizard/PlusMinusWizard");
 const getRuleViewItems_1 = require("./Utilities/getRuleViewItems");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
+const MovePlusMinus_1 = require("../View/PlusMinus/MovePlusMinus");
 class PlusMinusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.PlusMinusModuleId, ModuleConstants.PlusMinusFriendlyName, 'add-circle', 'PlusMinusPopup', 'Configure how a cell value will edit when the + or - keys are pressed', api);
@@ -218,6 +219,7 @@ class PlusMinusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     getViewProperties() {
         return {
+            actions: [MovePlusMinus_1.MovePlusMinus],
             getEditAction: PlusMinusRedux.PlusMinusNudgeEdit,
             getDeleteAction: PlusMinusRedux.PlusMinusNudgeDelete,
             getSuspendAction: PlusMinusRedux.PlusMinusNudgeSuspend,

package/src/Strategy/Utilities/Export/getExportRowsViewItems.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { AdaptableApi, Report } from '../../../types';
 export declare const getExportRowsViewItems: (report: Report, api: AdaptableApi) => {
     name: string;
-    values: string[];
+    view: JSX.Element;
 };

package/src/Strategy/Utilities/Export/getExportRowsViewItems.js

@@ -1,14 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getExportRowsViewItems = 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 getExportRowsViewItems = (report, api) => {
+    let element = null;
+    if (report.ReportRowScope === 'ExpressionRows') {
+        element = React.createElement(ExpressionPreview_1.ExpressionPreview, { query: report.Query });
+    }
+    else {
+        element = api.internalApi
+            .getReportService()
+            .GetReportExpressionDescription(report, api.columnApi.getColumns());
+    }
     return {
         name: 'Rows',
-        values: [
-            api.internalApi
-                .getReportService()
-                .GetReportExpressionDescription(report, api.columnApi.getColumns()),
-        ],
+        view: React.createElement(Tag_1.Tag, null, element),
     };
 };
 exports.getExportRowsViewItems = getExportRowsViewItems;

package/src/Strategy/Utilities/getExpressionViewItems.js

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getExpressionViewItems = 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 getExpressionViewItems = (query, api) => {
-    const expressionText = api.internalApi.getAdaptableQueryExpressionText(query);
+    // const expressionText = api.internalApi.getAdaptableQueryExpressionText(query);
     return {
         name: 'Expression',
-        values: [expressionText],
+        // values: [],
+        view: (React.createElement(Tag_1.Tag, null,
+            React.createElement(ExpressionPreview_1.ExpressionPreview, { query: query }))),
     };
 };
 exports.getExpressionViewItems = getExpressionViewItems;

package/src/View/Components/FilterForm/FilterForm.js

@@ -180,7 +180,6 @@ class FilterFormComponent extends React.Component {
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
             React.createElement(AdaptableInput_1.default, { onMouseDown: (event) => {
-                    console.log('onMouseDown', predicateInput.type, event);
                     if (predicateInput.type === 'date') {
                         // This prevents the ag-grid dropdown closing when a date is selected
                         event.stopPropagation();

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -78,9 +78,7 @@ const ListBoxFilterForm = (props) => {
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',
             paddingBottom: 'var(--ab-space-1)',
-            paddingLeft: 'var(--ab-space-1)',
-            borderRadius: 'var(--ab__border-radius)',
-        }, OnTextChange: handleFilterValueChange }));
+        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
     const baseClassName = 'ab-ListBoxFilterForm';
     return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
         React.createElement(rebass_1.Box, { px: 2 },

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -80,7 +80,7 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(columnFilterContext);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
                     (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
                             React.createElement(icons_1.Icon, { name: "delete" })),

package/src/View/Components/FilterForm/QuickFilterValues.js

@@ -115,7 +115,8 @@ const QuickFilterValues = (props) => {
             return label !== null && label !== void 0 ? label : input;
         }).join(', ');
     }
-    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions.quickFilterValuesWidth;
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions
+        .quickFilterValuesWidth;
     const getPopoverWidth = (targetWidth) => {
         if (quickFilterValuesWidth === 'auto') {
             return Math.max(180, targetWidth);
@@ -127,7 +128,7 @@ const QuickFilterValues = (props) => {
     };
     return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
         // cannot hide on blur, because the form input receives the input when this is opened
-        hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
+        hideEvent: "mouseleave", hideDelay: 50, ref: (api) => {
             valuesDropdownRef.current = api;
             props.registerValuesDropdownApi(api);
         }, onVisibleChange: (visible) => {

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -9,5 +9,6 @@ export type ColumnSelectorProps<IsMulti extends boolean = false> = {
     filterColumn?: (column: AdaptableColumn) => boolean;
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;
+    placeholder?: string;
 };
 export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => JSX.Element;

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

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ColumnSelector = function (props) {
+    var _a;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
         return api.columnApi.getColumnsOfType(props.type);
@@ -25,7 +26,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: "Select Column", onChange: (colId) => {
+    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

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

@@ -21,13 +21,13 @@ 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 { 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';
+    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,
@@ -35,14 +35,14 @@ const GridFilterPopup = () => {
                     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 })),
+                        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 })),
                         ' ',
                         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

@@ -19,34 +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: "Edit the Expression in UI", 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(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 })),
             ' ',
             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,
@@ -55,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;

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();
@@ -35,8 +36,9 @@ const useGridFilterExpressionEditor = () => {
         });
     }, []);
     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 == '' ||
@@ -107,6 +109,7 @@ const useGridFilterExpressionEditor = () => {
         adaptable.api.gridFilterApi.unSuspendGridFilter();
     };
     return {
+        isReadOnly,
         namedQueryModuleAccessLevel,
         cachedQueries,
         expression,

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/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/NotesPopup.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotePopup = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = require("lodash");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
@@ -15,7 +15,7 @@ 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, lodash_1.throttle)((value) => onNoteChange(value), 300);
+        const throttled = (0, throttle_1.default)((value) => onNoteChange(value), 300);
         return (value) => {
             setLiveValue(value);
             throttled(value);

package/src/View/PlusMinus/MovePlusMinus.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, PlusMinusNudge } from '../../types';
+export declare const MovePlusMinus: React.FunctionComponent<{
+    data: PlusMinusNudge;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/PlusMinus/MovePlusMinus.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MovePlusMinus = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const PlusMinusRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PlusMinusRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const MovePlusMinus = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const plusMinusNudges = (0, react_redux_1.useSelector)((state) => state.PlusMinus.PlusMinusNudges);
+    const handleMoveUp = React.useCallback(() => {
+        dispatch(PlusMinusRedux.PlusMinusMoveUp(props.data));
+    }, []);
+    const handleMoveDown = React.useCallback(() => {
+        dispatch(PlusMinusRedux.PlusMinusMoveDown(props.data));
+    }, []);
+    if ((plusMinusNudges === null || plusMinusNudges === void 0 ? void 0 : plusMinusNudges.length) <= 1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
+        React.createElement(SimpleButton_1.default, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+};
+exports.MovePlusMinus = MovePlusMinus;

package/src/agGrid/Adaptable.js

@@ -1784,7 +1784,7 @@ class Adaptable {
         };
         this.api.gridApi.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireCellSelectionChangedEvent();
         return selectedCellInfo;
     }
     setSelectedRows() {
@@ -1818,7 +1818,7 @@ class Adaptable {
         }
         const selectedRowInfo = { gridRows: selectedRows };
         this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireRowSelectionChangedEvent();
         return selectedRowInfo;
     }
     setDataValue(value, column, primaryKeyValue, rowNode) {

package/src/agGrid/agGridHelper.d.ts

@@ -30,7 +30,8 @@ export declare class agGridHelper {
     isSideBarDefObject(sidebarDef: unknown): sidebarDef is SideBarDef;
     mapToolPanelDefs(toolPanelDefs?: (ToolPanelDef | string)[]): (ToolPanelDef | string)[];
     reselectSelectedCells(): void;
-    fireSelectionChangedEvent(): void;
+    fireCellSelectionChangedEvent(): void;
+    fireRowSelectionChangedEvent(): void;
     private isColumnReadonly;
     private isColumnFieldonly;
     private isColumnSortable;

package/src/agGrid/agGridHelper.js

@@ -300,15 +300,25 @@ class agGridHelper {
             this.gridOptions.api.addCellRange(cellRangeParams);
         }
     }
-    fireSelectionChangedEvent() {
-        let selectionChangedInfo = {
+    fireCellSelectionChangedEvent() {
+        let cellSelectionChangedInfo = {
             adaptableApi: this.adaptable.api,
             selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
+            //   selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
+            userName: this.adaptable.api.optionsApi.getUserName(),
+            adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
+        };
+        this.adaptable.api.eventApi.emit('CellSelectionChanged', cellSelectionChangedInfo);
+    }
+    fireRowSelectionChangedEvent() {
+        let rowSelectionChangedInfo = {
+            adaptableApi: this.adaptable.api,
+            //  selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
             selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
             userName: this.adaptable.api.optionsApi.getUserName(),
             adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
         };
-        this.adaptable.api.eventApi.emit('SelectionChanged', selectionChangedInfo);
+        this.adaptable.api.eventApi.emit('RowSelectionChanged', rowSelectionChangedInfo);
     }
     isColumnReadonly(colDef) {
         // if the column has conditional/dynamic editability, we assume some rows may be editable

package/src/components/Datepicker/index.js

@@ -97,7 +97,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                     borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
                     width: style === null || style === void 0 ? void 0 : style.width,
                     maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
-                }, onFocus: () => {
+                }, className: "ab-Datepicker", onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }

package/src/components/ExpressionEditor/ExpressionPreview.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableQuery } from '../../types';
+interface ExpressionPreviewProps {
+    query: AdaptableQuery;
+}
+export declare const ExpressionPreview: React.FunctionComponent<ExpressionPreviewProps>;
+export {};

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ExpressionPreview = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const displayColumnFriendlyNames = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.displayColumnFriendlyNamesForExpressions;
+    if (!displayColumnFriendlyNames) {
+        return React.createElement(React.Fragment, null, adaptable.api.expressionApi.getAdaptableQueryExpression(props.query));
+    }
+    const expressionWithFriendlyNames = adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
+    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
+    // not the prettiest
+    const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
+    return (React.createElement(React.Fragment, null, strWithMarkedGroupes.map((part, index) => {
+        const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
+        return React.createElement(React.Fragment, { key: index },
+            "\u00A0",
+            partEl);
+    })));
+};
+exports.ExpressionPreview = ExpressionPreview;