@adaptabletools/adaptable 13.1.1 → 14.0.0-canary.1

package/src/View/Components/Charting/ChartingViewPanel.js

@@ -8,8 +8,11 @@ const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const useChartState_1 = require("./useChartState");
+const DeleteChartButton_1 = require("./DeleteChartButton");
+const EditChartButton_1 = require("./EditChartButton");
 const ChartingViewPanel = (props) => {
     var _a, _b, _c;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -20,6 +23,7 @@ const ChartingViewPanel = (props) => {
         return chartDefinitions.length > 0 ? chartDefinitions[0].Uuid : null;
     });
     const selectedChart = chartDefinitions.find((chart) => chart.Uuid === selectedChartId);
+    const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(selectedChart, props.accessLevel);
     const [selectedContainer, setSelectedContainer] = React.useState(null);
     const { isOpen, showChart, closeChart } = (0, useChartState_1.useChartState)(selectedChart);
     const options = chartDefinitions.map((chartDefinition) => ({
@@ -66,16 +70,26 @@ const ChartingViewPanel = (props) => {
     ];
     const chartSelector = (React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
     const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || 'Ag Grid Window'));
-    const chartButton = (React.createElement(SimpleButton_1.default, { onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
+    const chartButton = (React.createElement(SimpleButton_1.default, { mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
+    const deleteButton = React.createElement(DeleteChartButton_1.DeleteChartButton, { chart: selectedChart, accessLevel: accessLevel });
+    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { chart: selectedChart, accessLevel: accessLevel, isOpen: isOpen }));
     if (elementType === 'DashboardToolbar') {
         return (React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
             React.createElement(rebass_1.Box, null, chartSelector),
             containerSelector && React.createElement(rebass_1.Box, { ml: 1 }, containerSelector),
-            React.createElement(rebass_1.Box, { ml: 1 }, chartButton)));
+            React.createElement(rebass_1.Box, { ml: 1 },
+                chartButton,
+                deleteButton,
+                editButton)));
     }
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", width: "100%" },
         React.createElement(rebass_1.Box, { mb: 1 }, chartSelector),
         containerSelector && React.createElement(rebass_1.Box, { mb: 1 }, containerSelector),
-        React.createElement(rebass_1.Box, null, chartButton)));
+        React.createElement(rebass_1.Box, null,
+            chartButton,
+            " ",
+            deleteButton,
+            " ",
+            editButton)));
 };
 exports.ChartingViewPanel = ChartingViewPanel;

package/src/View/Components/Charting/ChartingWizard/ChartingWizard.js

@@ -21,14 +21,14 @@ const ChartingWizard = (props) => {
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
-                details: 'Chart settings',
+                details: 'Chart Settings',
                 isValid: SettingsSection_1.isSettingsValid,
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             {
                 title: 'Preview Chart',
-                details: 'Preview of the chart',
+                details: 'Chart Preview',
                 render: () => (React.createElement(rebass_1.Box, { p: 2 },
                     React.createElement(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },

package/src/View/Components/Charting/ChartingWizard/SettingsSection.js

@@ -11,7 +11,7 @@ const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
         return 'Name is mandatory';
     }
-    const allChartDefinitions = api.chartingApi.getAllChartDefinitions();
+    const allChartDefinitions = api.chartingApi.getChartDefinitions();
     if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
         chartDefinitionLoopItem.Name === chartDefinition.Name)) {
         return 'There is already a chart with this name';

package/src/View/Components/Charting/DeleteChartButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, ChartDefinition } from '../../../types';
+export interface ButtonDeleteProps {
+    chart: ChartDefinition;
+    accessLevel: AccessLevel;
+}
+export declare const DeleteChartButton: React.FunctionComponent<ButtonDeleteProps>;

package/src/View/Components/Charting/DeleteChartButton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteChartButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ButtonDelete_1 = require("../Buttons/ButtonDelete");
+const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
+const DeleteChartButton = (props) => {
+    var _a;
+    return (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: !props.chart, ConfirmAction: ChartingRedux.ChartingDeleteChart((_a = props.chart) === null || _a === void 0 ? void 0 : _a.Name), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel }));
+};
+exports.DeleteChartButton = DeleteChartButton;

package/src/View/Components/Charting/EditChartButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AccessLevel, ChartDefinition } from '../../../types';
+export interface EditChartButtonProps {
+    chart: ChartDefinition;
+    accessLevel: AccessLevel;
+    isOpen: boolean;
+}
+export declare const EditChartButton: React.FunctionComponent<EditChartButtonProps>;

package/src/View/Components/Charting/EditChartButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditChartButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
+const ButtonEdit_1 = require("../Buttons/ButtonEdit");
+const ModuleConstants = tslib_1.__importStar(require("../../../Utilities/Constants/ModuleConstants"));
+const react_redux_1 = require("react-redux");
+const EditChartButton = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    return (React.createElement(ButtonEdit_1.ButtonEdit, { tooltip: "Edit Chart", 
+        // It gets complicated when a chart is both open and opened in edit wizard
+        // There an be conflicts between the two open charts (preview and main) and the changes to the active chart may not be syncronized correctly.
+        disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {
+            action: 'Edit',
+            value: props.chart,
+            source: 'Toolbar',
+        })) }));
+};
+exports.EditChartButton = EditChartButton;

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { AdaptablePredicateDef, AdaptableScope } from '../../../types';
+import { EntityRulesEditorProps, RuleType } from './index';
+export interface PredicatesEditorProps {
+    descriptions: EntityRulesEditorProps<any>['descriptions'];
+    data: {
+        Rule: RuleType;
+        Scope: AdaptableScope;
+    };
+    onChange: (data: {
+        Rule: RuleType;
+        Scope: AdaptableScope;
+    }) => void;
+    predicateDefs: AdaptablePredicateDef[];
+}
+export declare const PredicatesEditor: React.FunctionComponent<PredicatesEditorProps>;

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PredicatesEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
+const PredicateEditor_1 = require("../PredicateEditor/PredicateEditor");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Tag_1 = require("../../../components/Tag");
+const PredicatesEditor = (props) => {
+    var _a, _b, _c, _d;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
+    const predicateDefs = props.predicateDefs
+        // filter out already used ones
+        .filter((predicateDef) => {
+        var _a, _b;
+        return !((_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.some((item) => item.PredicateId === predicateDef.id));
+    });
+    const handleAddNewPredicate = () => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                Predicates: [
+                    ...(((_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) || []),
+                    {
+                        PredicateId: predicateDefs[0].id,
+                        Inputs: [],
+                    },
+                ],
+            } }));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
+            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
+            React.createElement(SimpleButton_1.default, { disabled: !((_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length), onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
+        (((_d = (_c = props.data.Rule) === null || _c === void 0 ? void 0 : _c.Predicates) === null || _d === void 0 ? void 0 : _d.length) ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+            var _a, _b;
+            const handleClear = () => {
+                var _a, _b;
+                const newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.filter((prevPredicate) => prevPredicate !== predicate);
+                props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                        Predicates: newPredicates,
+                    } }));
+            };
+            const predicateDefsIncludingCurrent = [...predicateDefs];
+            const currentPredicateDef = props.predicateDefs.find((item) => item.id === (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId));
+            if (currentPredicateDef) {
+                predicateDefsIncludingCurrent.push(currentPredicateDef);
+            }
+            return (React.createElement(rebass_1.Box, { mb: 3, key: index },
+                index > 0 && React.createElement(Tag_1.Tag, { mb: 2 }, "AND"),
+                React.createElement(rebass_1.Flex, { justifyContent: "center", alignItems: "flex-start", width: "100%" },
+                    React.createElement(rebass_1.Box, { flex: 1 },
+                        React.createElement(PredicateEditor_1.PredicateEditor, { columnId: 'ColumnIds' in props.data.Scope ? (_b = (_a = props.data.Scope) === null || _a === void 0 ? void 0 : _a.ColumnIds) === null || _b === void 0 ? void 0 : _b[0] : null, predicateDefs: predicateDefsIncludingCurrent, predicate: predicate, onChange: (newPredicateDef) => {
+                                var _a, _b;
+                                let newPredicates = [];
+                                if (predicate) {
+                                    newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map((prevPredicate) => {
+                                        if (prevPredicate === predicate) {
+                                            return newPredicateDef;
+                                        }
+                                        return prevPredicate;
+                                    });
+                                }
+                                else {
+                                    // no previous predicate, e.g. it was cleared
+                                    newPredicates = [newPredicateDef];
+                                }
+                                props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                                        Predicates: newPredicates,
+                                    } }));
+                            }, onClear: handleClear })),
+                    React.createElement(SimpleButton_1.default, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
+        }),
+        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, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+            "See Predicate documentation for more details and examples"))));
+};
+exports.PredicatesEditor = PredicatesEditor;

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

@@ -0,0 +1,6 @@
+import { AdaptableApi } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+import { RuleType } from './index';
+export declare const isRuleValid: (abObject: {
+    Rule?: RuleType;
+}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>) => true | "The Expression is not a valid Boolean Expression" | "No valid Condition is specified" | "The Predicates are not valid";

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRuleValid = void 0;
+const isRuleValid = (abObject, api, context) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!((_b = (_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) && !((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.BooleanExpression)) {
+        return 'No valid Condition is specified';
+    }
+    if ((_e = (_d = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _d === void 0 ? void 0 : _d.Predicates) === null || _e === void 0 ? void 0 : _e.length) {
+        if (!api.predicateApi.isEveryPredicateValid((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.Predicates)) {
+            return 'The Predicates are not valid';
+        }
+    }
+    if ((_g = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _g === void 0 ? void 0 : _g.BooleanExpression) {
+        if (!api.queryLanguageApi.isValidBooleanExpression((_h = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, context.moduleInfo.ModuleName)) {
+            return 'The Expression is not a valid Boolean Expression';
+        }
+    }
+    return true;
+};
+exports.isRuleValid = isRuleValid;

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-import type { AdaptableApi, AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
+import type { AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
-import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
-declare type RuleType = XOR<{
-    Predicate: AdaptablePredicate;
+export declare type RuleType = XOR<{
+    Predicates: AdaptablePredicate[];
 }, AdaptableQuery>;
-export declare const isRuleValid: (abObject: {
-    Rule?: RuleType;
-}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>) => true | "No valid Condition is specified" | "The Predicate is not valid" | "The Expression is not a valid Boolean Expression";
-declare type EntityRulesEditorProps<T> = {
+export declare type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
     showNoRule?: boolean;
@@ -42,4 +38,3 @@ export declare const EntityRulesEditor: <T extends {
     Rule: RuleType;
     Scope: AdaptableScope;
 }>(props: EntityRulesEditorProps<T>) => JSX.Element;
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityRulesEditor = exports.EntityRulesSummary = exports.isRuleValid = void 0;
+exports.EntityRulesEditor = exports.EntityRulesSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
@@ -8,29 +8,8 @@ const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-const ButtonInfo_1 = require("../Buttons/ButtonInfo");
-const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
-const PredicateEditor_1 = require("../PredicateEditor/PredicateEditor");
-const isRuleValid = (abObject, api, context) => {
-    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.queryLanguageApi.isValidBooleanExpression((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Boolean Expression';
-        }
-    }
-    return true;
-};
-exports.isRuleValid = isRuleValid;
+const PredicatesEditor_1 = require("./PredicatesEditor");
 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" },
@@ -44,13 +23,16 @@ QueryTab.defaultProps = {
     isTabsTab: true,
 };
 const EntityRulesSummary = (props) => {
+    var _a, _b, _c;
     const { data } = props;
     const { api: { predicateApi, internalApi }, } = (0, 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(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_c = (_b = (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (predicate, index) => (
+    // predicate id is not unique
+    React.createElement(React.Fragment, { key: index }, props.renderPredicate(predicateApi.predicateToString(predicate))))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c;
     const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const type = data.Rule == undefined
@@ -86,15 +68,14 @@ const EntityRulesEditor = (props) => {
         }
         else {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                    Predicate: {
-                        PredicateId: props.defaultPredicateId,
-                    },
+                    Predicates: [
+                        {
+                            PredicateId: props.defaultPredicateId,
+                        },
+                    ],
                 } }));
         }
     };
-    const predicateId = ((_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) != undefined ? (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.Predicate.PredicateId : undefined;
-    const predicateInputs = predicateId ? (_d = (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.Predicate.Inputs) !== null && _d !== void 0 ? _d : [] : [];
-    const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
     const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
     const filteredPredicateDefs = predicateDefs.filter((def) => {
         if (isValuesPredicateDef(def)) {
@@ -102,51 +83,6 @@ const EntityRulesEditor = (props) => {
         }
         return true;
     });
-    const predicateDefsOptions = filteredPredicateDefs.map((item) => ({
-        value: item.id,
-        label: item.label,
-        onClick: () => onPredicateChange(item),
-    }));
-    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 onPredicateValuesChange = (inputs) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                Predicate: {
-                    PredicateId: predicateId,
-                    Inputs: inputs,
-                },
-            } }));
-    };
-    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 } }));
     };
@@ -157,7 +93,6 @@ const EntityRulesEditor = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const baseClassName = 'ab-EntityRulesEditor';
     return (React.createElement(rebass_1.Flex, Object.assign({ className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,
@@ -169,24 +104,15 @@ const EntityRulesEditor = (props) => {
             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, { "data-name": "Predicate", value: "Predicate" },
-                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
-                React.createElement(PredicateEditor_1.PredicateEditor, { columnId: 'ColumnIds' in data.Scope ? (_f = (_e = data.Scope) === null || _e === void 0 ? void 0 : _e.ColumnIds) === null || _f === void 0 ? void 0 : _f[0] : null, predicateDefs: filteredPredicateDefs, predicate: (_g = data.Rule) === null || _g === void 0 ? void 0 : _g.Predicate, onChange: (predicate) => {
-                        props.onChange(Object.assign(Object.assign({}, data), { Rule: Object.assign(Object.assign({}, data.Rule), { Predicate: predicate }) }));
-                    }, onClear: clearPredicate }),
-                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, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
-                    "See Predicate documentation for more details and examples")))) : null,
+                React.createElement(PredicatesEditor_1.PredicatesEditor, { data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, onChange: props.onChange }))) : null,
             showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
             showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_h = data.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
             showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_j = data.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
             showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_k = data.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/ExpressionWizard.js

@@ -32,7 +32,7 @@ class ExpressionWizard extends React.Component {
     render() {
         const initialData = (0, react_1.useMemo)(() => this.props.api.internalApi.getQueryPreviewData(), []);
         return (React.createElement(React.Fragment, null,
-            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getNamedQueries(), api: this.props.api }),
             ' ',
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
                 React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({

package/src/View/Components/ExternalRenderer.js

@@ -24,7 +24,9 @@ const ExternalRenderer = (_a) => {
                 render({ visible: false, element: element, adaptableApi });
             }
             else if (frameworkComponent) {
-                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, componentName);
+                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
+                // @ts-ignore
+                componentName);
             }
         };
     }, []);

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

@@ -110,7 +110,7 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
             .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
@@ -137,7 +137,7 @@ class FilterFormComponent extends React.Component {
         let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
         const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
             this.state.showTab && (React.createElement(React.Fragment, null,
                 React.createElement(Radio_1.default, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
@@ -210,7 +210,7 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.props.api.filterApi.clearColumnFilterForColumn(editedColumnFilter.ColumnId);
             this.onCloseForm();
         }
         else {

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

@@ -32,7 +32,7 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+            const { values, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
                 .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
@@ -142,7 +142,7 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
                     (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
                             React.createElement(icons_1.Icon, { name: "delete" })),
@@ -346,14 +346,14 @@ class QuickFilterFormComponent extends React.Component {
     }
     getPredicateIdForShortcutValue(value) {
         var _a;
-        return (_a = this.props.api.filterApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = this.props.api.filterApi.internalApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
     }
     clearFilter() {
         const { filter } = this.state;
-        this.props.api.filterApi.clearColumnFilterByColumn(filter.ColumnId);
+        this.props.api.filterApi.clearColumnFilterForColumn(filter.ColumnId);
     }
     hasValuesPredicate(predicate) {
-        return this.props.api.predicateApi.hasPredicateValues(predicate);
+        return this.props.api.predicateApi.internalApi.hasPredicateValues(predicate);
     }
 }
 function mapStateToProps(state, ownProps) {

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

@@ -9,14 +9,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
 const PermitedValuesSelector = (props) => {
-    var _a;
+    var _a, _b, _c;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const columnId = props.columnId;
-    const column = adaptable.api.columnApi.getColumnFromId(columnId);
-    const distinctValues = ((_a = adaptable.api.columnApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => ({ value: value, label: value }));
-    const predicateInputs = props.predicate.Inputs;
-    const isClearDisabled = predicateInputs.filter((item) => item !== undefined || item !== null || item !== '')
-        .length === 0;
+    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const distinctValues = ((_a = adaptable.api.gridApi.internalApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => { var _a; return ({ value: value, label: value.toString ? (_a = value.toString) === null || _a === void 0 ? void 0 : _a.call(value) : value }); });
+    const predicateInputs = (_b = props.predicate.Inputs) !== null && _b !== void 0 ? _b : [];
+    const isClearDisabled = ((_c = predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.filter) === null || _c === void 0 ? void 0 : _c.call(predicateInputs, (item) => item !== undefined || item !== null || item !== '').length) === 0;
     const popupContent = (React.createElement(rebass_1.Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
         React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
     return (React.createElement(rebass_1.Box, { className: "ab-PermitedValuesSelector", mt: 2 },

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -23,7 +23,7 @@ const AdaptablePopupBody = (props) => {
             }
         },
         // show share button if TeamSharing is active & user has edit rights
-        teamSharingActivated: props.api.teamSharingApi.isTeamSharingActivated() &&
+        teamSharingActivated: props.api.teamSharingApi.isTeamSharingAvailable() &&
             props.api.teamSharingApi.hasTeamSharingFullRights(),
         modalContainer: modalContainer,
         accessLevel: accessLevel,

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -16,7 +16,7 @@ const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
 const AdaptablePopupModuleView = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     /**
-     * This triggers an render for each redux change.
+     * This triggers a render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     (0, react_redux_1.useSelector)((state) => state);
@@ -98,7 +98,7 @@ const AdaptablePopupModuleView = (props) => {
         if (!(adaptableModule === null || adaptableModule === void 0 ? void 0 : adaptableModule.canBeAssociatedWithLayouts())) {
             return;
         }
-        if (!props.api.internalApi.hasLayoutSpecificObjects()) {
+        if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
         return (React.createElement(rebass_1.Flex, { justifyContent: "flex-start" },