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

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -0,0 +1,123 @@
+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 = () => {
+    var _a, _b, _c;
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const gridFilter = 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 [isAdaptableReady, setIsAdaptableReady] = React.useState(false);
+    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 isSuspended = (_c = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.IsSuspended) !== null && _c !== void 0 ? _c : false;
+    const onAddCachedQuery = (cachedQuery) => {
+        dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
+    };
+    React.useEffect(() => {
+        adaptable.api.eventApi.on('AdaptableReady', () => {
+            setIsAdaptableReady(true);
+        });
+    }, []);
+    React.useEffect(() => {
+        if ((gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) != expression) {
+            setExpression(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression);
+        }
+    }, [gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression]);
+    const isExpressionValid = expression == '' ||
+        adaptable.api.internalApi
+            .getQueryLanguageService()
+            .validateBoolean(expression, 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}]`),
+        };
+    });
+    const clearQuery = () => {
+        adaptable.api.gridFilterApi.clearGridFilter();
+        setExpression('');
+    };
+    const runQuery = (newExpression = expression) => {
+        if (StringExtensions.IsNullOrEmpty(newExpression) &&
+            StringExtensions.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) {
+            return;
+        }
+        if (StringExtensions.IsNotNullOrEmpty(expression)) {
+            let cachedQuery = {
+                expression: expression,
+                time: new Date(),
+            };
+            if (cachedQuery) {
+                onAddCachedQuery(cachedQuery);
+            }
+        }
+        adaptable.api.gridFilterApi.setGridFilterExpression(newExpression);
+    };
+    const gridFilterAccessLevel = React.useMemo(() => {
+        return adaptable.api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule(GridFilterModuleId);
+    }, []);
+    const namedQueryModuleAccessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(NamedQueryModuleId);
+    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(NamedQueryModuleId, popup, {
+        action: 'New',
+        source: 'Other',
+        value,
+    }));
+    const saveQuery = () => {
+        const namedqueryPopuName = adaptable.api.internalApi
+            .getModuleService()
+            .getModuleById(NamedQueryModuleId).moduleInfo.Popup;
+        onShowNamedQueries(expression, namedqueryPopuName);
+    };
+    const suspendGridFilter = () => {
+        adaptable.api.gridFilterApi.suspendGridFilter();
+    };
+    const unSuspendGridFilter = () => {
+        adaptable.api.gridFilterApi.unSuspendGridFilter();
+    };
+    return {
+        namedQueryModuleAccessLevel,
+        cachedQueries,
+        expression,
+        setExpression,
+        isExpressionNamedQuery,
+        isExpressionValid,
+        isSuspended,
+        gridFilter,
+        isAdaptableReady,
+        namedQueries,
+        onAddCachedQuery,
+        availableColumns,
+        runQuery,
+        clearQuery,
+        onExpand: () => adaptable.api.gridFilterApi.openExpressionEditorForGridFilter(expression),
+        saveQuery,
+        suspendGridFilter,
+        unSuspendGridFilter,
+        setGridFilterExpression: (expression) => {
+            adaptable.api.gridFilterApi.setGridFilterExpression(expression);
+        },
+        gridFilterAccessLevel,
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const useGridFilterOptionsForExpressionEditorProps: () => {
+    showQueryBuilder: boolean;
+    showExpressionEditor: boolean;
+};

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -0,0 +1,27 @@
+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,
+            };
+    }
+};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex } from 'rebass';
-import version from '../../../../version';
+import { version } from '../../../../package.json';
 import Panel from '../../../components/Panel';
 import { Tabs } from '../../../components/Tabs';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
@@ -24,6 +24,7 @@ export const GridInfoPopup = (props) => {
             .getFreeTextColumns()
             .map((c) => c.ColumnId);
         const columnFilterDescription = props.api.columnFilterApi.internalApi.columnFiltersToString(props.api.columnFilterApi.getColumnFilters());
+        const gridFilterExpression = props.api.gridFilterApi.getCurrentGridFilterExpression();
         const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
             ? props.api.gridApi.getColumnSorts().map((gs) => {
                 return props.api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
@@ -35,6 +36,7 @@ export const GridInfoPopup = (props) => {
         }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
+        returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
@@ -68,8 +70,8 @@ export const GridInfoPopup = (props) => {
         React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
             React.createElement(Panel, { flex: 1 },
                 React.createElement(Tabs, null,
-                    React.createElement(Tabs.Tab, null, "Info"),
-                    React.createElement(Tabs.Tab, null, "Objects"),
+                    React.createElement(Tabs.Tab, null, "Grid Summary"),
+                    React.createElement(Tabs.Tab, null, "Config"),
                     React.createElement(Tabs.Content, null,
                         React.createElement(AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
                     React.createElement(Tabs.Content, null,

package/src/View/Layout/LayoutViewPanel.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { Flex } from 'rebass';
-import DropdownButton from '../../components/DropdownButton';
 import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { ButtonSave } from '../Components/Buttons/ButtonSave';
@@ -12,6 +11,7 @@ import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonClone } from '../Components/Buttons/ButtonClone';
 import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
+import { Select } from '../../components/Select';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
@@ -27,7 +27,7 @@ class LayoutViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, { flex: 1 },
-                React.createElement(DropdownButton, { marginRight: 2, columns: ['label'], style: { width: '100%', fontSize: 'small' }, className: `ab-${elementType}__Layout__select`, items: availableLayoutOptions, disabled: availableLayoutOptions.length == 0 }, layoutEntity ? layoutEntity.Name : null)),
+                React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
                 React.createElement(ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
@@ -59,7 +59,8 @@ function mapDispatchToProps(dispatch) {
         onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
         onSaveLayout: (layout) => {
             dispatch(LayoutRedux.LayoutSave(layout));
-            dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
+            // Cannot be se to null, because it needs to be up to date when it is updated
+            dispatch(GridRedux.LayoutUpdateCurrentDraft(layout));
         },
     };
 }

package/src/View/Layout/SaveLayoutButton.js

@@ -15,7 +15,8 @@ export const SaveLayoutButton = () => {
     const isManualSaveLayout = !adaptable.api.layoutApi.shouldAutoSaveLayouts();
     const handleSave = React.useCallback((layout) => {
         dispatch(LayoutRedux.LayoutSave(layout));
-        dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
+        // Cannot be se to null, because it needs to be up to date when it is updated
+        dispatch(GridRedux.LayoutUpdateCurrentDraft(layout));
     }, []);
     const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual();
     if (!isManualSaveLayout) {

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

@@ -13,6 +13,7 @@ import { RowGroupingSection, RowGroupingSectionSummary } from './sections/RowGro
 import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionValid, } from './sections/AggregationsSection';
 import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
+import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
 export const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = useDispatch();
@@ -131,6 +132,15 @@ export const LayoutWizard = (props) => {
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
                     React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
+            {
+                title: 'Grid Filter',
+                isVisible: () => layoutSupportedFeatures.GridFilter,
+                isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
+                details: 'View Grid Filter',
+                renderSummary: () => React.createElement(GridFilterSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
             '-',
             {
                 details: 'Review your Layout',

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

@@ -8,13 +8,13 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
 import { Tag } from '../../../../components/Tag';
 import { PredicateEditor } from '../../../Components/PredicateEditor/PredicateEditor';
-import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
 export const isColumnFiltersValid = (layout) => {
     var _a, _b;
     const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     if (invalidColumnFilters.length > 0) {
-        return 'Please select a predicate for each column filter';
+        return 'Please select a Predicate for each Column Filter';
     }
     return true;
 };
@@ -22,7 +22,7 @@ export const FilterSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
-    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Filters"))));
+    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
 };
 export const FilterSection = (props) => {
     var _a;
@@ -39,30 +39,28 @@ export const FilterSection = (props) => {
     }, [layout.ColumnFilters]);
     const columnsOptions = React.useMemo(() => adaptable.api.columnApi
         .getFilterableColumns()
-        .filter(
-    // filter out columns with filters already
-    (abColumn) => {
+        .filter((abColumn) => {
         var _a;
         return !((_a = layout.ColumnFilters) === null || _a === void 0 ? void 0 : _a.some((columnFilter) => abColumn.columnId === columnFilter.ColumnId));
     })
         .map(({ columnId }) => ({
         label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
-        onClick: () => {
-            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
-                    ...layoutFilters,
-                    {
-                        ColumnId: columnId,
-                        Predicate: null,
-                    },
-                ] }));
-        },
+        value: columnId,
     })), [layout, layoutFilters]);
     return (React.createElement(Tabs, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Column Filters"),
         React.createElement(Tabs.Content, null,
             React.createElement(FormLayout, { mb: 2 },
-                React.createElement(FormRow, { label: "Add new filter" },
-                    React.createElement(DropdownButton, { "data-name": "select-column", minWidth: 250, items: columnsOptions, mr: 2, columns: ['label'] }, "Select Column"))),
+                React.createElement(FormRow, { label: "Add Column Filter" },
+                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+                            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                                    ...layoutFilters,
+                                    {
+                                        ColumnId: option,
+                                        Predicate: null,
+                                    },
+                                ] }));
+                        } }))),
             (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
                 const predicateDefs = adaptable.api.columnFilterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
                 const items = [

package/src/View/Layout/Wizard/sections/GridFilterSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../../../../types';
+export declare const isGridFiltersValid: (layout: Layout, api: AdaptableApi) => true | string;
+export declare const GridFilterSectionSummary: React.FunctionComponent;
+interface GridFilterSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const GridFilterSection: React.FunctionComponent<GridFilterSectionProps>;
+export {};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box } from 'rebass';
+import { Tabs } from '../../../../components/Tabs';
+import { useAdaptable } from '../../../AdaptableContext';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { Tag } from '../../../../components/Tag';
+import { ExpressionEditor } from '../../../../components/ExpressionEditor';
+import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
+export const isGridFiltersValid = (layout, api) => {
+    var _a;
+    const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
+    if (StringExtensions.IsNullOrEmpty(expression)) {
+        return true;
+    }
+    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, GridFilterModuleId)
+        .isValid || 'Invalid Expression');
+};
+export const GridFilterSectionSummary = () => {
+    var _a, _b;
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, React.createElement(Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
+};
+export const GridFilterSection = (props) => {
+    var _a, _b;
+    const { api } = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Grid Filters"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: 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 })))));
+};

package/src/View/License/LicenseWatermark.js

@@ -1 +1,61 @@
-import*as e from"react";import{Logo as t}from"../../components/Logo";import{Flex as r}from"rebass";const o={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},n=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0};export const LicenseWatermark=i=>{const l=e.useRef(null);return e.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=o.border,l.current.style.padding=o.padding,l.current.style.fontWeight=`${o.fontWeight}`,l.current.style.margin=o.margin,l.current.style.fontSize=o.fontSize,l.current.style.color=o.color,l.current.style.background=o.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),e.createElement(r,{style:o,ref:l},e.createElement(t,{style:{marginRight:10}}),e.createElement("div",null,i.children))};
+import * as React from 'react';
+import { Logo } from '../../components/Logo';
+import { Flex } from 'rebass';
+const style = {
+    border: '1px solid var(--ab-color-error)',
+    padding: '5px',
+    fontWeight: 600,
+    margin: '5px',
+    fontSize: '14px',
+    alignItems: 'center',
+    color: 'var(--ab-color-text-on-defaultbackground)',
+    background: 'var(--ab-color-defaultbackground)',
+};
+const isStyleValid = (element) => {
+    const notAllowedProperties = [
+        ['display', 'none'],
+        ['opacity', '0'],
+        ['position', 'absolute'],
+        ['position', 'fixed'],
+        ['position', 'relative'],
+        ['visibility', 'hidden'],
+    ];
+    for (const [prop, value] of notAllowedProperties) {
+        if (element.style[prop] === value) {
+            return false;
+        }
+    }
+    return true;
+};
+export const LicenseWatermark = (props) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const checkWatermark = () => {
+            var _a, _b;
+            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+                alert('It is not allowed to remove the Adaptable watermark.');
+            }
+            if (!isStyleValid(ref.current)) {
+                alert('It is not allowed to modify the Adaptable watermark.');
+            }
+            if ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.style) {
+                ref.current.style.border = style.border;
+                ref.current.style.padding = style.padding;
+                ref.current.style.fontWeight = `${style.fontWeight}`;
+                ref.current.style.margin = style.margin;
+                ref.current.style.fontSize = style.fontSize;
+                ref.current.style.color = style.color;
+                ref.current.style.background = style.background;
+                ref.current.style.display = 'flex';
+                ref.current.style.position = 'static';
+                ref.current.style.opacity = '1';
+                ref.current.style.visibility = 'visible';
+            }
+        };
+        const timerId = setInterval(checkWatermark, 5000);
+        return () => clearTimeout(timerId);
+    }, []);
+    return (React.createElement(Flex, { style: style, ref: ref },
+        React.createElement(Logo, { style: { marginRight: 10 } }),
+        React.createElement("div", null, props.children)));
+};

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -5,7 +5,7 @@ export const EditGridFilterButton = () => {
     const adaptable = useAdaptable();
     const handleClick = React.useCallback((event) => {
         event.stopPropagation();
-        adaptable.api.gridFilterApi.expandGridFilterEditor();
+        adaptable.api.gridFilterApi.openExpressionEditorForGridFilter();
     }, []);
     return React.createElement(SimpleButton, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
 };

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

@@ -8,7 +8,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Tag } from '../../../components/Tag';
 export const isValidNamedQuerySettings = (data, api) => {
-    const validationResult = api.namedQueryApi.isValidNamedQueryName(data);
+    const validationResult = api.namedQueryApi.isValidNamedQuery(data);
     const ErrorMessage = !validationResult.valid ? validationResult.message : null;
     if (!ErrorMessage) {
         return true;

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

@@ -30,14 +30,14 @@ export function NamedQueryWizard(props) {
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, onFinish: handleFinish, sections: [
             {
                 title: 'Expression',
-                details: "Specify the Named Query's Expression",
+                details: "Build the Named Query's Expression",
                 renderSummary: renderNamedQueryExpressionSummary,
                 isValid: isValidNamedQueryExpression,
                 render: () => React.createElement(NamedQueryExpressionWizardSection, { onChange: setNamedQuery }),
             },
             {
                 title: 'Query Name',
-                details: 'Specify a unique name for the Named Query',
+                details: 'Specify a unique Name for the Named Query',
                 renderSummary: renderNamedQuerySettingsSummary,
                 isValid: isValidNamedQuerySettings,
                 render: () => {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -36,7 +36,7 @@ const QuickSearchPopupComponent = (props) => {
             React.createElement(Flex, { flexDirection: "column" },
                 React.createElement(FormLayout, { columns: [1, 2] },
                     React.createElement(FormRow, null,
-                        React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter Quick Search Results"))))),
+                        React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))))),
         React.createElement(StyleComponent, { style: { height: '100%' }, api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
 };
 function mapStateToProps(state, ownProps) {

package/src/View/QuickSearch/useQuickSearchDebounced.d.ts

@@ -1,5 +1,5 @@
 import { QuickSearchRunAction } from '../../Redux/ActionsReducers/QuickSearchRedux';
-declare type UseQuickSearchProps = {
+type UseQuickSearchProps = {
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRunAction;
     QuickSearchText: string;
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -3,8 +3,8 @@ import { Box } from 'rebass';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Input from '../../../../components/Input';
-import DropdownButton from '../../../../components/DropdownButton';
 import { CheckBox } from '../../../../components/CheckBox';
+import { Select } from '../../../../components/Select';
 const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error'];
 export const ScheduleSettingsReminder = (props) => {
     var _a, _b, _c, _d, _e;
@@ -39,7 +39,10 @@ export const ScheduleSettingsReminder = (props) => {
                     React.createElement(FormRow, { label: "Message" },
                         React.createElement(Input, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
                     React.createElement(FormRow, { label: "Type" },
-                        React.createElement(DropdownButton, { "data-name": "message-type", style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
+                        React.createElement(Box, { maxWidth: 300 },
+                            React.createElement(Select, { "data-name": "message-type", placeholder: "Select Option", options: messageTypes, value: (_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType, onChange: (value) => {
+                                    props.onChange(Object.assign(Object.assign({}, props.reminderSchedule), { MessageType: value }));
+                                } }))),
                     React.createElement(FormRow, { label: "" },
                         React.createElement(CheckBox, { "data-name": "display-notification", checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as a Notification")),
                     React.createElement(FormRow, { label: "" },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ReportSchedule, Report } from '../../../../PredefinedConfig/ExportState';
 import { CustomDestination } from '../../../../AdaptableOptions/ExportOptions';
+import { Report, ReportSchedule } from '../../../../PredefinedConfig/ExportState';
 interface ReportScheduleProps {
     report: ReportSchedule;
     onChange: (reminder: ReportSchedule) => void;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { Box } from 'rebass';
-import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import DropdownButton from '../../../../components/DropdownButton';
+import { Select } from '../../../../components/Select';
+import { Tabs } from '../../../../components/Tabs';
 const DESTINATIONS = ['Excel', 'CSV', 'Clipboard', 'JSON'];
 export const ScheduleSettingsReport = (props) => {
     var _a, _b;
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
-        onClick: () => props.onChange(Object.assign(Object.assign({}, props.report), { ReportName: report.Name })),
     }));
     const customDestinationNames = props.customDestinations.map((destination) => destination.name);
     const destinationOptions = [...DESTINATIONS, ...customDestinationNames].map((destination) => ({
@@ -25,7 +24,9 @@ export const ScheduleSettingsReport = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Export" },
-                        React.createElement(DropdownButton, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
+                        React.createElement(Box, { maxWidth: 300 },
+                            React.createElement(Select, { "data-name": "select-export", options: reportOptions, value: (_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange(Object.assign(Object.assign({}, props.report), { ReportName: value })) }))),
                     React.createElement(FormRow, { label: "Destination" },
-                        React.createElement(DropdownButton, { "data-name": "select-destination", columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
+                        React.createElement(Box, { maxWidth: 300 },
+                            React.createElement(Select, { "data-name": "select-destination", options: destinationOptions, value: (_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination, placeholder: "Select Destination", onChange: (value) => props.onChange(Object.assign(Object.assign({}, props.report), { ExportDestination: value })) }))))))));
 };

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -5,10 +5,10 @@ import { shortcutOperationList } from '../shortcutOperations';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tabs } from '../../../components/Tabs';
-import DropdownButton from '../../../components/DropdownButton';
 import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import HelpBlock from '../../../components/HelpBlock';
+import { Select } from '../../../components/Select';
 export const isSettingsValid = (data) => {
     const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
     const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
@@ -45,12 +45,11 @@ export const ShortcutSettingsWizard = (props) => {
     const optionActions = shortcutOperationList.map((operation) => ({
         value: operation,
         label: operation,
-        onClick: () => handleOperationChange(operation),
+        // onClick: () => handleOperationChange(operation),
     }));
     const optionKeys = props.availableKeys.map((key) => ({
         value: key,
         label: key,
-        onClick: () => handleKeyChange(key),
     }));
     return (React.createElement(Box, { "data-name": "shortcut-column-settings" },
         React.createElement(Tabs, { autoFocus: false },
@@ -59,20 +58,20 @@ export const ShortcutSettingsWizard = (props) => {
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, null,
                         ' ',
-                        React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the shortcut")),
+                        React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the Shortcut")),
                     React.createElement(FormRow, { label: "Key" },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'))),
+                            React.createElement(Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
                     React.createElement(FormRow, null,
                         ' ',
                         React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
                     React.createElement(FormRow, { label: "Operation" },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'))),
+                            React.createElement(Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
                     React.createElement(FormRow, null,
                         ' ',
                         React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
                     React.createElement(FormRow, { label: "Value" },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }))))))));
+                            React.createElement(Input, { "data-name": "shortcut-value", style: { maxWidth: 100 }, flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }))))))));
 };