@adaptabletools/adaptable-cjs 17.0.0-canary.1 → 17.0.0-canary.3

package/src/View/Theme/ThemePopup.js

@@ -13,6 +13,7 @@ const rebass_1 = require("rebass");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const icons_1 = require("../../components/icons");
+const ThemeSelector_1 = require("./ThemeSelector");
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -31,23 +32,6 @@ class ThemePopupComponent extends React.Component {
         };
     }
     render() {
-        const availableThemes = this.props.api.themeApi.getThemes();
-        const theme = this.props.api.themeApi.getCurrentThemeObject();
-        const currentThemeDescription = theme.Description || theme.Name;
-        const optionThemes = availableThemes.map((theme) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                value: theme.Name,
-                label: theme.Description,
-                onClick: () => this.onChangeTheme(theme.Name),
-            };
-        });
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
@@ -71,7 +55,8 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription))),
+                    React.createElement(rebass_1.Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
             isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
                 React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }

package/src/View/Theme/ThemeSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SelectProps } from '../../components/Select';
+export declare const ThemeSelector: React.FunctionComponent<{
+    size?: SelectProps<any>['size'];
+}>;

package/src/View/Theme/ThemeSelector.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Select_1 = require("../../components/Select");
+const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ThemeSelector = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const availableThemes = adaptable.api.themeApi.getThemes();
+    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants_1.ThemeModuleId) === 'ReadOnly';
+    const optionThemes = availableThemes.map((theme) => {
+        if (typeof theme === 'string') {
+            // protection against old state, which could be string
+            theme = {
+                Name: theme,
+                Description: theme,
+            };
+        }
+        return {
+            value: theme.Name,
+            label: theme.Description,
+        };
+    });
+    const theme = adaptable.api.themeApi.getCurrentThemeObject();
+    return (React.createElement(Select_1.Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+            dispatch(ThemeRedux.ThemeSelect(themeName));
+        } }));
+};
+exports.ThemeSelector = ThemeSelector;

package/src/View/Theme/ThemeStatusbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ThemeStatusbar: () => JSX.Element;

package/src/View/Theme/ThemeStatusbar.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeStatusbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeStatusbar = () => {
+    return (react_1.default.createElement(rebass_1.Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        react_1.default.createElement(ThemeSelector_1.ThemeSelector, { size: "small" })));
+};
+exports.ThemeStatusbar = ThemeStatusbar;

package/src/View/Theme/ThemeViewPanel.d.ts

@@ -1,16 +1,5 @@
+/// <reference types="react" />
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
-import { AdaptableTheme } from '../../PredefinedConfig/ThemeState';
-import * as React from 'react';
 export interface ThemeViewPanelComponentProps extends ViewPanelProps {
-    onSelectTheme: (theme: string) => ThemeRedux.ThemeSelectAction;
-    SystemThemes: any[];
-    UserThemes: AdaptableTheme[];
-    CurrentTheme: string;
 }
-declare class ThemeViewPanelComponent extends React.Component<ThemeViewPanelComponentProps, {}> {
-    render(): any;
-    private onSelectTheme;
-}
-export declare const ThemeViewPanelControl: import("react-redux").ConnectedComponent<typeof ThemeViewPanelComponent, any>;
-export {};
+export declare const ThemeViewPanelControl: (props: ThemeViewPanelComponentProps) => JSX.Element;

package/src/View/Theme/ThemeViewPanel.js

@@ -2,59 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeViewPanelControl = void 0;
 const tslib_1 = require("tslib");
-const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const React = tslib_1.__importStar(require("react"));
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
-const react_redux_1 = require("react-redux");
-const Select_1 = require("../../components/Select");
-class ThemeViewPanelComponent extends React.Component {
-    render() {
-        var _a, _b, _c, _d;
-        const allThemes = (_c = (_b = (_a = this.props.api) === null || _a === void 0 ? void 0 : _a.themeApi) === null || _b === void 0 ? void 0 : _b.getThemes) === null || _c === void 0 ? void 0 : _c.call(_b);
-        const themes = allThemes.map((theme, index) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                label: theme.Description,
-                value: theme.Name,
-                onClick: () => this.onSelectTheme(theme),
-            };
-        });
-        const currentThemeObj = allThemes.find((theme) => theme.Name === this.props.CurrentTheme);
-        const currentThemeDescription = (_d = currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Description) !== null && _d !== void 0 ? _d : this.props.CurrentTheme;
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        const dropDownStyle = this.props.viewType === 'Toolbar'
-            ? {
-                maxWidth: '25rem',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                fontSize: 'small',
-            }
-            : { minWidth: '100%', fontSize: 'small' };
-        return (React.createElement("div", { className: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
-            React.createElement(Select_1.Select, { className: `ab-${elementType}__Theme__select`, options: themes, value: currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Name, onChange: (theme) => this.onSelectTheme({ Name: theme }) })));
-    }
-    onSelectTheme(theme) {
-        this.props.onSelectTheme(theme.Name);
-    }
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        SystemThemes: state.Theme.SystemThemes,
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onSelectTheme: (theme) => dispatch(ThemeRedux.ThemeSelect(theme)),
-    };
-}
-exports.ThemeViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemeViewPanelComponent);
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeViewPanelControl = (props) => {
+    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement("div", { className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
+        React.createElement(ThemeSelector_1.ThemeSelector, null)));
+};
+exports.ThemeViewPanelControl = ThemeViewPanelControl;

package/src/agGrid/Adaptable.js

@@ -68,7 +68,7 @@ const AdaptableLogger_1 = require("./AdaptableLogger");
 const attachAddaptableColumnTypes_1 = require("./attachAddaptableColumnTypes");
 const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const Fdc3Service_1 = require("../Utilities/Services/Fdc3Service");
-const tinycolor = require('tinycolor2');
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
 const assignColId = (colDef, logger) => {
@@ -1041,7 +1041,7 @@ class Adaptable {
             const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
             // if no range match, do not apply color (black in this case)
             if (cellBackColor) {
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
+                style.backgroundColor = (0, tinycolor2_1.default)(preparedColor).setAlpha(alpha).toRgbString();
             }
         }
         if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
@@ -5004,9 +5004,9 @@ class Adaptable {
     convertCSSToExcelStyle(style) {
         const getHexColor = (color) => {
             const preparedColor = (0, StyleHelper_1.getVariableColor)(color);
-            const t = tinycolor(preparedColor);
+            const t = (0, tinycolor2_1.default)(preparedColor);
             const a = t.getAlpha();
-            return tinycolor.mix(tinycolor('white'), t, a * 100).toHexString();
+            return tinycolor2_1.default.mix((0, tinycolor2_1.default)('white'), t, a * 100).toHexString();
         };
         let result = {};
         if (style.backgroundColor != null) {

package/src/agGrid/AdaptableLogger.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableLogger = void 0;
-const debugFactory = require('debug');
+const tslib_1 = require("tslib");
+const debug_1 = tslib_1.__importDefault(require("debug"));
 function humanize(ms) {
     return `${ms}ms`;
 }
-debugFactory.humanize = humanize;
+debug_1.default.humanize = humanize;
 const performanceTime = (previousTime) => {
     const now = performance.now();
     return previousTime ? now - previousTime : now;
@@ -38,7 +39,7 @@ class AdaptableLogger {
     }
     constructor(adaptableId) {
         this.adaptableId = adaptableId;
-        this.debugger = debugFactory(`Adaptable:${adaptableId}`);
+        this.debugger = (0, debug_1.default)(`Adaptable:${adaptableId}`);
         this.infoLogger = this.debugger.extend(`info`);
         this.infoLogger.log = console.info.bind(console);
         this.successLogger = this.debugger.extend(`success`);

package/src/agGrid/agGridHelper.js

@@ -47,7 +47,7 @@ const Helper_1 = require("../Utilities/Helpers/Helper");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const BadgeRenderer_1 = require("./BadgeRenderer");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
-const tinycolor = require('tinycolor2');
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here
@@ -637,8 +637,8 @@ class agGridHelper {
             };
         return {
             Header: {
-                headerColor: tinycolor(headerColStyle.color).toHexString(),
-                headerBackColor: tinycolor(headerColStyle.backgroundColor).toHexString(),
+                headerColor: (0, tinycolor2_1.default)(headerColStyle.color).toHexString(),
+                headerBackColor: (0, tinycolor2_1.default)(headerColStyle.backgroundColor).toHexString(),
                 headerFontFamily: headerColStyle.fontFamily,
                 headerFontSize: headerColStyle.fontSize,
                 headerFontStyle: headerColStyle.fontStyle,
@@ -655,9 +655,9 @@ class agGridHelper {
                 }),
             },
             Row: {
-                color: tinycolor(firstRowStyle.color).toHexString(),
-                backColor: tinycolor(firstRowStyle.backgroundColor).toHexString(),
-                altBackColor: tinycolor(secondRowStyle.backgroundColor).toHexString(),
+                color: (0, tinycolor2_1.default)(firstRowStyle.color).toHexString(),
+                backColor: (0, tinycolor2_1.default)(firstRowStyle.backgroundColor).toHexString(),
+                altBackColor: (0, tinycolor2_1.default)(secondRowStyle.backgroundColor).toHexString(),
                 fontFamily: firstRowStyle.fontFamily,
                 fontSize: firstRowStyle.fontSize,
                 fontStyle: firstRowStyle.fontStyle,

package/src/components/ColorPicker/ColorPicker.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
-const tinycolor = require('tinycolor2');
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value, includeAlpha = true } = props, restProps = tslib_1.__rest(props, ["api", "value", "includeAlpha"]);
@@ -17,14 +17,14 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
     const preparedValue = React.useMemo(() => {
         const color = (0, StyleHelper_1.getVariableColor)(value);
-        return tinycolor(color).toHexString();
+        return (0, tinycolor2_1.default)(color).toHexString();
     }, [value]);
     const preparedAlphaColor = React.useMemo(() => {
         const color = (0, StyleHelper_1.getVariableColor)(value);
-        return [tinycolor(color).setAlpha(0).toRgbString(), tinycolor(color).setAlpha(1).toRgbString()];
+        return [(0, tinycolor2_1.default)(color).setAlpha(0).toRgbString(), (0, tinycolor2_1.default)(color).setAlpha(1).toRgbString()];
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
-    const alpha = tinycolor(value).getAlpha();
+    const alpha = (0, tinycolor2_1.default)(value).getAlpha();
     return (React.createElement(rebass_1.Flex, { className: 'ColorPicker' },
         React.createElement(Input_1.default, Object.assign({}, restProps, { mr: 2, onChange: (event) => {
                 var _a;
@@ -41,7 +41,7 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
         includeAlpha && (React.createElement(rebass_1.Flex, { alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
             React.createElement(Input_1.default, { className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                    const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
+                    const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
                     props.onChange(color);
                 }, min: 0, max: 1, step: 0.01, type: "range" })))));
 });

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -15,9 +15,10 @@ const Select_1 = require("../../Select");
 const QueryBuilder_1 = require("./QueryBuilder");
 const utils_1 = require("./utils");
 const PrimitiveColumnSelector = (props) => {
-    return (react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
-            props.onChange(`[${columnId}]`);
-        } }));
+    return (react_1.default.createElement(rebass_1.Box, null,
+        react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+                props.onChange(`[${columnId}]`);
+            } })));
 };
 exports.PrimitiveColumnSelector = PrimitiveColumnSelector;
 const PrimiteValueInput = (props) => {
@@ -96,11 +97,11 @@ const PrimiteValueInput = (props) => {
     ];
     const typeOption = options.find((option) => option.value === type);
     return (react_1.default.createElement(rebass_1.Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        editor,
         react_1.default.createElement(rebass_1.Flex, null,
             react_1.default.createElement(Select_1.Select, { rederSingleValue: (value) => {
                     return (react_1.default.createElement(react_1.default.Fragment, null, typeOption.value === 'column-name' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "edit" })));
-                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }))));
+                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) })),
+        editor));
 };
 exports.PrimiteValueInput = PrimiteValueInput;
 const ExpressionSelector = (props) => {

package/src/components/Select/Select.d.ts

@@ -25,6 +25,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
     variant?: 'default' | 'raised';
+    size?: 'small' | 'normal';
     isCreatable?: boolean;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => JSX.Element;

package/src/components/Select/Select.js

@@ -15,21 +15,21 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 const Select = function (props) {
-    var _a, _b, _c, _d;
-    let selectedOption = (_a = props.options.find((option) => {
+    var _a, _b, _c, _d, _e;
+    let selectedOption = (_b = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find((option) => {
         if (typeof option.value === 'object' && option.value instanceof Date) {
             return (0, date_fns_1.isSameDay)(option.value, props.value);
         }
         return option.value === props.value;
-    })) !== null && _a !== void 0 ? _a : null;
+    })) !== null && _b !== void 0 ? _b : null;
     if (!selectedOption && props.value !== undefined && props.value !== null) {
         selectedOption = {
             value: props.value,
             label: props.value,
         };
     }
-    let disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
-    const accessLevel = (_c = props.accessLevel) !== null && _c !== void 0 ? _c : 'Full';
+    let disabled = (_c = props.disabled) !== null && _c !== void 0 ? _c : false;
+    const accessLevel = (_d = props.accessLevel) !== null && _d !== void 0 ? _d : 'Full';
     if (accessLevel === 'Hidden') {
         return null;
     }
@@ -52,7 +52,7 @@ const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
-    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_d = props.menuPosition) !== null && _d !== void 0 ? _d : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_e = props.menuPosition) !== null && _e !== void 0 ? _e : 'fixed', isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -81,7 +81,7 @@ const Select = function (props) {
             },
             // @ts-ignorets-ignore when fixed
             menuPortal: (baseStyle) => {
-                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999 });
+                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, textAlign: 'left' });
             },
             // @ts-ignore
             menu: (baseStyle, state) => {
@@ -103,7 +103,10 @@ const Select = function (props) {
             },
             // @ts-ignore
             input: (baseStyle, state) => {
-                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-input__color)' });
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-input__color)' });
+            },
+            valueContainer: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding });
             },
             // @ts-ignore
             singleValue: (baseStyle, state) => {
@@ -114,7 +117,7 @@ const Select = function (props) {
                 state;
                 return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
                     // height: 30,
-                    minHeight: 32, boxShadow: state.isFocused ? 'var(--ab-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
+                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
                         ? '1px solid transparent'
                         : 'var(--ab-cmp-input__border)', '&:hover': {
                         border: 'var(--ab-cmp-input__border)',

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4588,7 +4588,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
-    Report_2: {
+    Report: {
         name: string;
         kind: string;
         desc: string;

package/src/metamodel/adaptable.metamodel.js

@@ -4628,7 +4628,7 @@ exports.ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "The exported report",
-                "ref": "unknown"
+                "ref": "Report"
             },
             {
                 "name": "reportData",
@@ -7567,7 +7567,7 @@ exports.ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "Report being exported",
-                "ref": "unknown"
+                "ref": "Report"
             }
         ]
     },
@@ -7868,8 +7868,8 @@ exports.ADAPTABLE_METAMODEL = {
             }
         ]
     },
-    "Report_2": {
-        "name": "Report_2",
+    "Report": {
+        "name": "Report",
         "kind": "I",
         "desc": "A Report which can export data from AdapTable",
         "props": [
@@ -7920,7 +7920,7 @@ exports.ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "Definition of Report being Run",
-                "ref": "unknown"
+                "ref": "Report"
             },
             {
                 "name": "reportData",

package/src/parser/src/predicate/mapExpressionToQlPredicate.js

@@ -80,7 +80,9 @@ function mapExpressionToQlPredicate(expression) {
         }
     }
     catch (err) {
-        return { errorMessage: `Query Builder does not support the expression: ${expression}` };
+        return {
+            errorMessage: `Query Builder does not support the expression: ${expression}`,
+        };
     }
 }
 exports.mapExpressionToQlPredicate = mapExpressionToQlPredicate;

package/src/parser/src/predicate/mapQlPredicateToExpression.js

@@ -38,6 +38,9 @@ function mapQlPredicateToExpression(predicate) {
             return `"${arg}"`;
         }
         if (typeof arg === 'object') {
+            if ((0, types_1.isQlLogicalOperator)(arg.operator)) {
+                return `(${mapQlPredicateToExpression(arg)})`;
+            }
             return mapQlPredicateToExpression(arg);
         }
         if (typeof arg === 'boolean') {
@@ -48,6 +51,12 @@ function mapQlPredicateToExpression(predicate) {
     if (typeof firstArg === 'object') {
         firstArg = mapQlPredicateToExpression(firstArg);
     }
+    if ((0, types_1.isQlLogicalOperator)(operator)) {
+        // need to compose with AND [] AND ...
+        return mappedArgs.length
+            ? `${firstArg} ${operatorSymbol} ${mappedArgs.join(` ${operatorSymbol} `)}`
+            : `${firstArg}`;
+    }
     if (predicateType === 'INFIX') {
         if (operator === 'BETWEEN') {
             return `${firstArg} ${operatorSymbol} (${mappedArgs})`;