@adaptabletools/adaptable 10.0.0-canary.0

package/src/View/Components/Buttons/ButtonSchedule.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSchedule = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class ButtonSchedule extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text" }, this.props)));
+    }
+}
+exports.ButtonSchedule = ButtonSchedule;

package/src/View/Components/Buttons/ButtonShare.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+import { SharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
+interface ButtonShareProps extends SimpleButtonProps {
+    onShare: (config: SharedEntityConfig) => void;
+    Header: string;
+}
+interface ButtonShareState {
+    open: boolean;
+}
+export declare class ButtonShare extends React.Component<ButtonShareProps, ButtonShareState> {
+    constructor(props: ButtonShareProps);
+    render(): JSX.Element;
+}
+export {};

package/src/View/Components/Buttons/ButtonShare.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonShare = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptablePopupTeamSharing_1 = require("../Popups/AdaptablePopupTeamSharing");
+class ButtonShare extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: false };
+    }
+    render() {
+        const _a = this.props, { onShare, Header } = _a, buttonProps = tslib_1.__rest(_a, ["onShare", "Header"]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "share", tooltip: "Share", variant: "text", icon: "team-share", iconSize: 20, onClick: () => this.setState({ open: true }) }, buttonProps)),
+            this.state.open && (React.createElement(AdaptablePopupTeamSharing_1.AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
+                    this.setState({ open: false });
+                    onShare(config);
+                } }))));
+    }
+}
+exports.ButtonShare = ButtonShare;

package/src/View/Components/Buttons/ButtonShow.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export declare class ButtonShow extends React.Component<SimpleButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonShow.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonShow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class ButtonShow extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "show", tooltip: "Show", iconSize: 18, icon: "check", variant: "text" }, this.props)));
+    }
+}
+exports.ButtonShow = ButtonShow;

package/src/View/Components/Buttons/ButtonShowChart.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export declare class ButtonShowChart extends React.Component<SimpleButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonShowChart.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonShowChart = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class ButtonShowChart extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "show-chart", tooltip: "Show Chart", iconSize: 20, icon: "chart", variant: "text" }, this.props)));
+    }
+}
+exports.ButtonShowChart = ButtonShowChart;

package/src/View/Components/Buttons/ButtonStop.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export interface StopButtonProps extends SimpleButtonProps {
+}
+export declare class ButtonStop extends React.Component<StopButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonStop.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonStop = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class ButtonStop extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text" }, this.props)));
+    }
+}
+exports.ButtonStop = ButtonStop;

package/src/View/Components/Buttons/ButtonUndo.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export declare class ButtonUndo extends React.Component<SimpleButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonUndo.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonUndo = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class ButtonUndo extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "undo", iconSize: 20, tooltip: "Undo", icon: 'undo', variant: "text" }, this.props)));
+    }
+}
+exports.ButtonUndo = ButtonUndo;

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as Redux from 'redux';
+import { AccessLevel } from '../../../PredefinedConfig/Common/Entitlement';
+import { SharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
+import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { SuspendableObject } from '../../../PredefinedConfig/Common/SuspendableObject';
+export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
+    editClick?: () => void;
+    cloneClick?: () => void;
+    shareClick?: (config: SharedEntityConfig) => void;
+    showEdit?: boolean;
+    showClone?: boolean;
+    showDelete?: boolean;
+    showShare?: boolean;
+    showSuspend?: boolean;
+    onSuspend?: (adaptableObject: AdaptableObject) => void;
+    onUnSuspend?: (adaptableObject: AdaptableObject) => void;
+    overrideDisableEdit?: boolean;
+    overrideDisableDelete?: boolean;
+    overrideDisableClone?: boolean;
+    overrideDisableShare?: boolean;
+    overrideTooltipEdit?: string;
+    overrideTooltipClone?: string;
+    overrideTooltipDelete?: string;
+    overrideTooltipShare?: string;
+    confirmDeleteAction: Redux.Action;
+    entityType: string;
+    justifyContent?: string;
+    accessLevel: AccessLevel;
+    cloneAccessLevel?: AccessLevel;
+    editSize: any;
+    deleteSize: any;
+    shareSize: any;
+    suspendableObject: SuspendableObject;
+}
+export declare class EntityListActionButtons extends React.Component<EntityListActionButtonsProps, {}> {
+    static defaultProps: EntityListActionButtonsProps;
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityListActionButtons = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ButtonEdit_1 = require("./ButtonEdit");
+const ButtonClone_1 = require("./ButtonClone");
+const ButtonDelete_1 = require("./ButtonDelete");
+const rebass_1 = require("rebass");
+const ButtonShare_1 = require("./ButtonShare");
+const SuspendToggleButton_1 = require("./SuspendToggleButton");
+const stopPropagation = (e) => {
+    e.stopPropagation();
+};
+class EntityListActionButtons extends React.Component {
+    render() {
+        return (React.createElement(rebass_1.Flex, { justifyContent: this.props.justifyContent || 'center', margin: 0, padding: 0, onClick: stopPropagation },
+            this.props.showEdit && (React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), style: {
+                    marginLeft: '0px',
+                    marginTop: '2px',
+                    marginBottom: '2px',
+                    marginRight: '2px',
+                    color: 'var(--ab-color-text-on-edit)',
+                    fill: 'var(--ab-color-text-on-edit)',
+                    background: 'var(--ab-color-action-edit)',
+                }, disabled: this.props.overrideDisableEdit || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
+            this.props.showClone && (React.createElement(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), style: {
+                    marginLeft: '0px',
+                    marginTop: '2px',
+                    marginBottom: '2px',
+                    marginRight: '2px',
+                    color: 'var(--ab-color-text-on-clone)',
+                    fill: 'var(--ab-color-text-on-clone)',
+                    background: 'var(--ab-color-action-clone)',
+                }, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
+            this.props.showDelete && (React.createElement(ButtonDelete_1.ButtonDelete, { "data-name": "delete", style: {
+                    marginLeft: '1px',
+                    marginTop: '2px',
+                    marginBottom: '2px',
+                    marginRight: '1px',
+                    //TODO move those styles in ButtonDelete
+                    color: 'var(--ab-color-text-on-delete)',
+                    fill: 'var(--ab-color-text-on-delete)',
+                    background: 'var(--ab-color-action-delete)',
+                }, disabled: this.props.overrideDisableDelete || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
+            this.props.showShare && (React.createElement(ButtonShare_1.ButtonShare, { style: {
+                    marginLeft: '1px',
+                    marginTop: '2px',
+                    marginBottom: '2px',
+                    marginRight: '1px',
+                    color: 'var(--ab-color-text-on-share)',
+                    fill: 'var(--ab-color-text-on-share)',
+                    background: 'var(--ab-color-action-share)',
+                }, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
+            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton_1.SuspendToggleButton, { style: {
+                    marginLeft: 2,
+                    alignSelf: 'center',
+                }, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
+    }
+}
+exports.EntityListActionButtons = EntityListActionButtons;
+EntityListActionButtons.defaultProps = {
+    // Adaptable: null,
+    suspendableObject: null,
+    showEdit: true,
+    showDelete: true,
+    showShare: false,
+    showSuspend: false,
+    overrideDisableEdit: false,
+    overrideDisableDelete: false,
+    overrideDisableClone: false,
+    overrideDisableShare: false,
+    confirmDeleteAction: null,
+    entityType: '',
+    accessLevel: 'Full',
+    editSize: 'xsmall',
+    deleteSize: 'xsmall',
+    shareSize: 'xsmall',
+};

package/src/View/Components/Buttons/SuspendToggleButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { SuspendableObject } from '../../../PredefinedConfig/Common/SuspendableObject';
+interface EntityListSuspendButtonProps {
+    onSuspend: (adaptableObject: AdaptableObject) => void;
+    onUnSuspend: (adaptableObject: AdaptableObject) => void;
+    suspendableObject: SuspendableObject;
+    style: React.CSSProperties;
+    disabled?: boolean;
+}
+export declare const SuspendToggleButton: React.FunctionComponent<EntityListSuspendButtonProps>;
+export {};

package/src/View/Components/Buttons/SuspendToggleButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuspendToggleButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ToggleButton_1 = require("../../../components/ToggleButton");
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled }) => {
+    const handleOnChange = React.useCallback((checked) => {
+        if (checked) {
+            onUnSuspend(suspendableObject);
+        }
+        else {
+            onSuspend(suspendableObject);
+        }
+    }, [onUnSuspend, onSuspend]);
+    return (React.createElement(ToggleButton_1.ToggleButton, { "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: disabled, style: style, onChange: handleOnChange, checked: !suspendableObject.IsSuspended }));
+});

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AdaptableColumn } from '../../../types';
+declare type NewColumnSelectorProps = {
+    availableColumns: AdaptableColumn[];
+    selected: string[];
+    singleSelect?: boolean;
+    columnFilterText?: string;
+    allowReorder?: boolean;
+    onChange?: (colIds: string[]) => void;
+};
+export declare const NewColumnSelector: {
+    (props: NewColumnSelectorProps): JSX.Element;
+    defaultProps: {
+        allowReorder: boolean;
+    };
+};
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewColumnSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const ValueSelector_1 = require("../ValueSelector");
+exports.NewColumnSelector = (props) => {
+    const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
+    const filterFn = react_1.useMemo(() => {
+        return columnFilterText
+            ? (c) => c.FriendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
+            : null;
+    }, [columnFilterText]);
+    return (React.createElement(ValueSelector_1.ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
+            if (singleSelect) {
+                onChange(colIds.length ? [colIds.pop()] : []);
+            }
+            else {
+                onChange(colIds);
+            }
+        }, toIdentifier: (c) => c.ColumnId, toLabel: (c) => c.FriendlyName, noSelectionLabel: singleSelect ? 'Please select a column' : 'You have not selected any columns.', xSelectedLabel: singleSelect
+            ? () => null
+            : (count) => (count > 1 ? `You selected ${count} columns.` : 'You selected one column.') }));
+};
+exports.NewColumnSelector.defaultProps = {
+    allowReorder: true,
+};

package/src/View/Components/EntityRowItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface EntityRowItemProps extends React.ClassAttributes<EntityRowItem> {
+    Content: any;
+}
+export declare class EntityRowItem extends React.Component<EntityRowItemProps, {}> {
+    render(): any;
+}

package/src/View/Components/EntityRowItem.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRowItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+class EntityRowItem extends React.Component {
+    render() {
+        return React.createElement("span", null,
+            " ",
+            this.props.Content);
+    }
+}
+exports.EntityRowItem = EntityRowItem;

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { FlexProps } from 'rebass';
+import type { AdaptablePredicate, AdaptablePredicateDef, AdaptableScope, AdaptableApi } from '../../../types';
+import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
+import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
+declare type RuleType = XOR<{
+    Predicate: AdaptablePredicate;
+}, AdaptableQuery>;
+export declare const isRuleValid: (abObject: {
+    Rule?: RuleType;
+}, api: AdaptableApi) => true | "No valid Condition is specified" | "The Predicate is not valid" | "The Query is not a valid boolean query";
+declare type EntityRulesEditorProps<T> = {
+    data: T;
+    showPredicate?: boolean;
+    showObservable?: boolean;
+    showAggregation?: boolean;
+    showBoolean?: boolean;
+    onChange: (data: T) => void;
+    defaultPredicateId: string;
+    predicateDefs: AdaptablePredicateDef[];
+    children?: React.ReactNode;
+    descriptions: {
+        selectPredicate: React.ReactNode;
+        useBooleanQuery: React.ReactNode;
+        useObservableQuery: React.ReactNode;
+        useAggregationQuery: React.ReactNode;
+    };
+    flexProps?: FlexProps;
+};
+export declare const EntityRulesSummary: <T extends {
+    Rule?: RuleType;
+    Scope: AdaptableScope;
+}>(props: {
+    data: T;
+    renderPredicate: (content: string) => React.ReactNode;
+    renderQueryExpression: (content: string) => React.ReactNode;
+}) => JSX.Element;
+export declare const EntityRulesEditor: <T extends {
+    Rule: RuleType;
+    Scope: AdaptableScope;
+}>(props: EntityRulesEditorProps<T>) => JSX.Element;
+export {};

package/src/View/Components/EntityRulesEditor/index.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulesEditor = exports.EntityRulesSummary = exports.isRuleValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const AdaptableQuery_1 = require("../../../PredefinedConfig/Common/AdaptableQuery");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
+exports.isRuleValid = (abObject, api) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!((_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) && !((_b = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression)) {
+        return 'No valid Condition is specified';
+    }
+    if ((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.Predicate) {
+        if (!api.predicateApi.isValidPredicate((_d = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _d === void 0 ? void 0 : _d.Predicate)) {
+            return 'The Predicate is not valid';
+        }
+    }
+    if ((_e = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _e === void 0 ? void 0 : _e.BooleanExpression) {
+        if (!api.queryApi.isValidBooleanQuery((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.BooleanExpression)) {
+            return 'The Query is not a valid boolean query';
+        }
+    }
+    return true;
+};
+const QueryTab = (props) => {
+    const { type, label, disabled = false } = props, tabProps = tslib_1.__rest(props, ["type", "label", "disabled"]);
+    const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+        label,
+        " ",
+        React.createElement(rebass_1.Text, { fontSize: 2 }, "query")));
+    return (React.createElement(Tabs_1.Tabs.Tab, Object.assign({ style: { flex: 1 } }, tabProps), !disabled ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+};
+// needed here to be considered a child Tab component, inside the Tabs component
+QueryTab.defaultProps = {
+    isTabsTab: true,
+};
+exports.EntityRulesSummary = (props) => {
+    const { data } = props;
+    const { api: { predicateApi }, } = AdaptableContext_1.useAdaptable();
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(AdaptableQuery_1.getAdaptableQueryExpression(data.Rule))))));
+};
+exports.EntityRulesEditor = (props) => {
+    var _a, _b;
+    const { data, children, descriptions, predicateDefs, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, } = props;
+    const { api } = AdaptableContext_1.useAdaptable();
+    const type = data.Rule.BooleanExpression != undefined
+        ? 'BooleanExpression'
+        : data.Rule.ObservableExpression != undefined && showObservable
+            ? 'ObservableExpression'
+            : data.Rule.AggregationExpression != undefined && showAggregation
+                ? 'AggregationExpression'
+                : 'Predicate';
+    const [selectedTab, setSelectedTab] = React.useState(type);
+    const setType = (type) => {
+        setSelectedTab(type);
+        if (type === 'BooleanExpression' && showBoolean) {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    BooleanExpression: '',
+                } }));
+        }
+        else if (type === 'ObservableExpression' && showObservable) {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    ObservableExpression: '',
+                } }));
+        }
+        else if (type === 'AggregationExpression' && showAggregation) {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    AggregationExpression: '',
+                } }));
+        }
+        else {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    Predicate: {
+                        PredicateId: props.defaultPredicateId,
+                    },
+                } }));
+        }
+    };
+    const predicateId = data.Rule.Predicate != undefined ? data.Rule.Predicate.PredicateId : undefined;
+    const predicateInputs = predicateId ? (_a = data.Rule.Predicate.Inputs) !== null && _a !== void 0 ? _a : [] : [];
+    const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
+    const onPredicateInputChange = (e, index) => {
+        const { value } = e.target;
+        const newInputs = [...predicateInputs];
+        newInputs[index] = value;
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                Predicate: {
+                    PredicateId: predicateId,
+                    Inputs: newInputs,
+                },
+            } }));
+    };
+    const onPredicateChange = (item) => {
+        var _a;
+        if (item) {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    Predicate: {
+                        PredicateId: item.id,
+                        Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
+                    },
+                } }));
+        }
+        else {
+            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                    BooleanExpression: '',
+                } }));
+        }
+    };
+    const clearPredicate = () => {
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                Predicate: undefined,
+            } }));
+    };
+    const setBooleanExpression = (expression) => {
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: { BooleanExpression: expression } }));
+    };
+    const setReactiveExpression = (expression) => {
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: { ObservableExpression: expression } }));
+    };
+    const setAggregationExpression = (expression) => {
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregationExpression: expression } }));
+    };
+    const initialData = api.internalApi.getQueryPreviewData();
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
+        children,
+        React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
+                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { value: "Predicate" },
+                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
+                React.createElement(DropdownButton_1.default, { style: {
+                        minWidth: '15rem',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        maxWidth: 'inherit',
+                    }, placeholder: "Select Rule", showClearButton: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefs.map((item) => ({
+                        value: item.id,
+                        label: item.label,
+                        onClick: () => onPredicateChange(item),
+                    })), columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
+                _b.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
+                    index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
+                    React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
+                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                        fontSize: 'var(--ab-font-size-3)',
+                        padding: 0,
+                    } },
+                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
+                            color: 'var(--ab-color-text-on-add)',
+                            fill: 'var(--ab-color-text-on-add)',
+                            background: 'var(--ab-color-action-add)',
+                        }, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+                    "See Predicate documentation for more details and examples")))) : null,
+            showBoolean ? (React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" })) : null,
+            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', value: data.Rule.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
+            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', value: data.Rule.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            showAggregation ? (React.createElement(QueryTab, { value: "AggregationExpression", type: type, label: "Aggregation" })) : null,
+            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregationExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregation', value: data.Rule.AggregationExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+};

package/src/View/Components/ExpressionWizard.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
+import { AdaptableWizardStep, AdaptableWizardStepProps } from '../Wizard/Interface/IAdaptableWizard';
+export interface ExpressionWizardProps extends AdaptableWizardStepProps<any> {
+    onSetNewNamedQuery: (newNamedQuery: string) => void;
+    callingModule?: AdaptableModule;
+}
+export interface ExpressionWizardState {
+    expression?: string;
+    saveToNamedQueries: boolean;
+    newNamedQuery: string;
+}
+export declare class ExpressionWizard extends React.Component<ExpressionWizardProps, ExpressionWizardState> implements AdaptableWizardStep {
+    constructor(props: ExpressionWizardProps);
+    render(): JSX.Element;
+    isValidExpression(): boolean;
+    handleCustomExpressionChange: (expression: string) => void;
+    canNext(): boolean;
+    canBack(): boolean;
+    next(): void;
+    back(): void;
+    getIndexStepIncrement(): number;
+    getIndexStepDecrement(): number;
+}