@adaptabletools/adaptable 12.1.8-canary.1 → 12.2.0-canary.0

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.js

@@ -0,0 +1,280 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FinanceForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const FormBox_1 = require("../Components/FormBox");
+const LocalDropdownButton = (props) => (React.createElement(DropdownButton_1.default, Object.assign({}, props, { width: "100%", columns: ['label'] })));
+const AlertMessage = (props) => (React.createElement(rebass_1.Box, Object.assign({ color: "var(--ab-color-error)" }, props)));
+const fdc3ColumnDefinitions = {
+    instrumentColumns: {
+        fields: [
+            { label: 'Ticker', id: 'tickerColumnId' },
+            { label: 'ISIN', id: 'isinColumnId' },
+            { label: 'CUSIP', id: 'cusipColumnId' },
+            { label: 'SEDOL', id: 'sedolColumnId' },
+            { label: 'RIC', id: 'ricColumnId' },
+            { label: 'BBG', id: 'bbgColumnId' },
+            { label: 'PERMID', id: 'permidColumnId' },
+            { label: 'FIGI', id: 'figiColumnId' },
+        ],
+        intents: ['ViewChart', 'ViewQuote', 'ViewNews', 'ViewAnalysis', 'ViewInstrument'],
+    },
+    positionColumns: {
+        fields: [{ label: 'Instrument', id: 'instrumentColumnId', required: true }],
+        intents: ['ViewChart', 'ViewNews', 'ViewAnalysis'],
+    },
+    contactColumns: {
+        fields: [
+            { label: 'Email', id: 'emailColumnId' },
+            { label: 'FDS_ID', id: 'fds_idColumnId' },
+        ],
+        intents: ['StartCall', 'StartChat', 'ViewContact'],
+    },
+    countryColumns: {
+        fields: [
+            { label: 'ISOALPHA2', id: 'isoalpha2ColumnId' },
+            { label: 'ISOALPHA3', id: 'isoalpha3ColumnId' },
+        ],
+        intents: ['ViewChart'],
+    },
+    organizationColumns: {
+        fields: [
+            { label: 'LEI', id: 'leiColumnId' },
+            { label: 'PERM ID', id: 'permidColumnId' },
+            { label: 'FDS ID', id: 'fds_idColumnId' },
+        ],
+        intents: ['ViewNews', 'ViewAnalysis'],
+    },
+};
+const FDC3ColumnSelector = (props) => {
+    const options = React.useMemo(() => {
+        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => props.onChange(columnOption.value) })));
+    }, [props.onChange]);
+    return (React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
+            props.label,
+            " ",
+            props.required && React.createElement(AlertMessage, { as: "span" }, "*"),
+            ' ') },
+        React.createElement(LocalDropdownButton, { items: options }, StringExtensions_1.default.Humanize(props.value) || 'Select Column')));
+};
+const FDC3InstrumentColumnBuilder = (props) => {
+    const fields = fdc3ColumnDefinitions.instrumentColumns.fields;
+    return (React.createElement(rebass_1.Flex, null,
+        React.createElement(FormLayout_1.default, { mr: 2 }, fields.slice(0, 4).map((field) => {
+            var _a;
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+        })),
+        React.createElement(FormLayout_1.default, null, fields.slice(4).map((field) => {
+            var _a;
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+        })),
+        React.createElement(rebass_1.Flex, { ml: 3, flexDirection: "column" }, fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => {
+            var _a, _b;
+            return (React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = props.column.intents) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
+        }))));
+};
+const FDC3BaseColumnBuilder = (props) => {
+    const fields = fdc3ColumnDefinitions[props.fdc3ColumnType].fields;
+    const intents = fdc3ColumnDefinitions[props.fdc3ColumnType].intents;
+    return (React.createElement(rebass_1.Flex, null,
+        React.createElement(FormLayout_1.default, null,
+            fields.map((field) => {
+                var _a, _b;
+                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
+            }),
+            React.createElement(FormLayout_1.FormRow, { label: "" },
+                React.createElement(rebass_1.Flex, { flexDirection: "column" }, intents.map((intent) => {
+                    var _a, _b;
+                    return (React.createElement(CheckBox_1.CheckBox, { checked: ((_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a.intents) !== null && _b !== void 0 ? _b : []).includes(intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
+                }))))));
+};
+const FDC3ColumnBuilder = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const handleColumnFieldChange = React.useCallback((fieldId, columnId) => {
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { [fieldId]: columnId }));
+    }, [props.fdc3Column, props.onChange]);
+    const handleIntentToggle = React.useCallback((intent) => {
+        var _a;
+        const newFDC3Column = Object.assign({}, props.fdc3Column);
+        newFDC3Column.intents = (_a = newFDC3Column.intents) !== null && _a !== void 0 ? _a : [];
+        if (newFDC3Column.intents.includes(intent)) {
+            newFDC3Column.intents = newFDC3Column.intents.filter((i) => i !== intent);
+        }
+        else {
+            newFDC3Column.intents.push(intent);
+        }
+        props.onChange(newFDC3Column);
+    }, [props.fdc3Column]);
+    const columnOptions = React.useMemo(() => {
+        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => {
+                props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { columnId: columnOption.value }));
+            } })));
+    }, [props.fdc3Column]);
+    const handleNameColumnIdChange = React.useCallback((event) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { nameColumnId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+    }, [props.fdc3Column]);
+    const handleShowBroadcastToggle = React.useCallback(() => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { showBroadcastContextMenu: !((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.showBroadcastContextMenu) }));
+    }, [props.fdc3Column]);
+    const handleBroadcastLabelChange = React.useCallback((event) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { broadcastContextMenuLabel: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+    }, [props.fdc3Column]);
+    return (React.createElement(FormBox_1.NocodeWizardFormBox, null,
+        React.createElement(rebass_1.Flex, null,
+            React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
+                props.beforeContent,
+                React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
+                        "Column ",
+                        React.createElement(AlertMessage, { as: "span" }, "*"),
+                        ' ') },
+                    React.createElement(LocalDropdownButton, { disabled: props.disabled, items: columnOptions }, (_b = (_a = columnOptions.find((item) => { var _a; return item.value === ((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.columnId); })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')),
+                React.createElement(FormLayout_1.FormRow, { label: "FDC3 Name" },
+                    React.createElement(Input_1.default, { disabled: props.disabled, onChange: handleNameColumnIdChange, value: (_d = (_c = props.fdc3Column) === null || _c === void 0 ? void 0 : _c.nameColumnId) !== null && _d !== void 0 ? _d : '' })),
+                React.createElement(FormLayout_1.FormRow, { label: "" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: props.disabled, checked: Boolean((_e = props.fdc3Column) === null || _e === void 0 ? void 0 : _e.showBroadcastContextMenu), onChange: handleShowBroadcastToggle },
+                        "Show Broadcast ",
+                        React.createElement("br", null),
+                        " Context Menu")),
+                React.createElement(FormLayout_1.FormRow, { label: "Broadcast Label" },
+                    React.createElement(Input_1.default, { disabled: props.disabled || !Boolean((_f = props.fdc3Column) === null || _f === void 0 ? void 0 : _f.showBroadcastContextMenu), onChange: handleBroadcastLabelChange, value: typeof ((_g = props.fdc3Column) === null || _g === void 0 ? void 0 : _g.broadcastContextMenuLabel) === 'string'
+                            ? (_h = props.fdc3Column) === null || _h === void 0 ? void 0 : _h.broadcastContextMenuLabel
+                            : '' }))),
+            React.createElement(rebass_1.Box, { flex: 1 }, props.fdc3ColumnType === 'instrumentColumns' ? (React.createElement(FDC3InstrumentColumnBuilder, { onIntentToggle: handleIntentToggle, onColumnFieldChange: (...args) => handleColumnFieldChange(...args), column: props.fdc3Column, columnOptions: props.columnOptions })) : (props.fdc3ColumnType && (React.createElement(FDC3BaseColumnBuilder, { onColumnFieldChange: (...args) => handleColumnFieldChange(...args), onIntentToggle: handleIntentToggle, column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, columnOptions: props.columnOptions }))))),
+        props.footer));
+};
+const FDC3ColumnEditor = (props) => {
+    return (React.createElement(FDC3ColumnBuilder, { columnOptions: props.columnOptions, fdc3Column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, onChange: props.onChange, footer: props.footer }));
+};
+const FDC3ColumnCreator = (props) => {
+    var _a, _b;
+    const [fdc3Column, setFDC3Column] = React.useState();
+    const [fdc3ColumnType, setFDC3ColumnType] = React.useState();
+    const handleOnNew = React.useCallback(() => {
+        props.onNew(fdc3ColumnType, fdc3Column);
+        setFDC3Column(null);
+        setFDC3ColumnType(null);
+    }, [fdc3Column]);
+    const fdc3ColumnOptions = React.useMemo(() => {
+        return [
+            {
+                label: 'Instrument',
+                columnField: 'instrumentColumns',
+            },
+            {
+                label: 'Position',
+                columnField: 'positionColumns',
+            },
+            {
+                label: 'Contact',
+                columnField: 'contactColumns',
+            },
+            {
+                label: 'Country',
+                columnField: 'countryColumns',
+            },
+            {
+                label: 'Organization',
+                columnField: 'organizationColumns',
+            },
+        ].map((item) => (Object.assign(Object.assign({}, item), { onClick: () => {
+                setFDC3ColumnType(item.columnField);
+                setFDC3Column({ columnId: '' });
+            } })));
+    }, []);
+    const typeSelector = (React.createElement(FormLayout_1.FormRow, { label: "FDC3 Type" },
+        React.createElement(LocalDropdownButton, { items: fdc3ColumnOptions }, (_b = (_a = fdc3ColumnOptions.find((item) => item.columnField === fdc3ColumnType)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')));
+    const fieldsDisabled = !fdc3ColumnType;
+    const errors = [];
+    if (fdc3Column && !fdc3Column.columnId) {
+        errors.push('Column is required.');
+    }
+    if (fdc3Column) {
+        const fields = fdc3ColumnDefinitions[fdc3ColumnType].fields;
+        fields.forEach((field) => {
+            if (field.required && !fdc3Column[field.id]) {
+                errors.push(`${field.label} is required.`);
+            }
+        });
+    }
+    return (React.createElement(FDC3ColumnBuilder, { disabled: fieldsDisabled, columnOptions: props.columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (newFDC3Column) => setFDC3Column(newFDC3Column), beforeContent: typeSelector, footer: React.createElement(rebass_1.Flex, null,
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { ml: 2 }, error)))),
+            React.createElement(SimpleButton_1.default, { disabled: fieldsDisabled || !fdc3Column.columnId, onClick: handleOnNew, icon: "plus", variant: "raised" }, "Add FDC3 Column")) }));
+};
+const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
+    React.createElement(HelpBlock_1.default, null, props.children)));
+const FinanceForm = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const columnOptions = (_d = (_c = (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.call(_c, (item) => {
+        var _a;
+        return ({
+            label: StringExtensions_1.default.Humanize((_a = item.headerName) !== null && _a !== void 0 ? _a : item.field),
+            value: item.field,
+        });
+    });
+    const financePlugin = (_f = (_e = props.adaptableOptions) === null || _e === void 0 ? void 0 : _e.plugins) === null || _f === void 0 ? void 0 : _f.find((item) => item.pluginId === 'finance');
+    const financePluginOptions = ((_g = financePlugin === null || financePlugin === void 0 ? void 0 : financePlugin.options) !== null && _g !== void 0 ? _g : {});
+    const fdc3Columns = (_h = financePluginOptions === null || financePluginOptions === void 0 ? void 0 : financePluginOptions.fdc3Columns) !== null && _h !== void 0 ? _h : {};
+    const handleSetFdc3Columns = (key, newFDC3Columns) => {
+        var _a;
+        // Unfurtunatly finance plugin options need to be mutated.
+        // It is the only was without instanciating the plugin again.
+        // But that would mean to inport the finance plugin inside the nocode plugin.
+        financePluginOptions.fdc3Columns = (_a = financePluginOptions.fdc3Columns) !== null && _a !== void 0 ? _a : {};
+        financePluginOptions.fdc3Columns[key] = newFDC3Columns;
+        // on change is called with a new array of plugins so the component refreshes.
+        props.onChangeadAptableOptions(Object.assign(Object.assign({}, props.adaptableOptions), { plugins: [...props.adaptableOptions.plugins] }));
+    };
+    const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
+        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { mb: 3 },
+            React.createElement(FDC3ColumnEditor, { key: currentFDCColumnId, columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
+                    const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
+                        if (index === currentFDCColumnId) {
+                            return editedFDC3Column;
+                        }
+                        return fdc3Column;
+                    });
+                    handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+                }, footer: React.createElement(rebass_1.Flex, null,
+                    React.createElement(rebass_1.Box, { flex: 1 }),
+                    React.createElement(SimpleButton_1.default, { onClick: () => {
+                            const newFDC3Columns = fdc3ColumnsItems.filter((_, index) => index !== currentFDCColumnId);
+                            handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+                        }, tone: "error", variant: "raised", icon: "delete" }, "Delete")) }))));
+    };
+    return (React.createElement(rebass_1.Box, { p: 2, className: "ab-FinanceForm" },
+        React.createElement(rebass_1.Box, { mb: 3 },
+            React.createElement(HelpBlock_1.default, { mb: 3 }, "Create FDC3 Column"),
+            React.createElement(FDC3ColumnCreator, { columnOptions: columnOptions, onNew: (type, fdc3Column) => {
+                    var _a;
+                    handleSetFdc3Columns(type, [...((_a = fdc3Columns[type]) !== null && _a !== void 0 ? _a : []), fdc3Column]);
+                } })),
+        Boolean((_j = fdc3Columns.instrumentColumns) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Instrument Columns"),
+            renderEditor('instrumentColumns', fdc3Columns.instrumentColumns))),
+        Boolean((_k = fdc3Columns.positionColumns) === null || _k === void 0 ? void 0 : _k.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Position Columns"),
+            renderEditor('positionColumns', fdc3Columns.positionColumns))),
+        Boolean((_l = fdc3Columns.contactColumns) === null || _l === void 0 ? void 0 : _l.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Contact Columns"),
+            renderEditor('contactColumns', fdc3Columns.contactColumns))),
+        Boolean((_m = fdc3Columns.countryColumns) === null || _m === void 0 ? void 0 : _m.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Country Columns"),
+            renderEditor('countryColumns', fdc3Columns.countryColumns))),
+        Boolean((_o = fdc3Columns.organizationColumns) === null || _o === void 0 ? void 0 : _o.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Organization Columns"),
+            renderEditor('organizationColumns', fdc3Columns.organizationColumns)))));
+};
+exports.FinanceForm = FinanceForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/index.d.ts

@@ -0,0 +1 @@
+export { FinanceForm } from './FinanceForm';

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FinanceForm = void 0;
+var FinanceForm_1 = require("./FinanceForm");
+Object.defineProperty(exports, "FinanceForm", { enumerable: true, get: function () { return FinanceForm_1.FinanceForm; } });

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.d.ts

@@ -2,7 +2,7 @@
 import { AdaptableOptions } from '../../../types';
 interface GridOptionsFormOptions {
     adaptableOptions: AdaptableOptions;
-    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
 declare const GridOptionsForm: (props: GridOptionsFormOptions) => JSX.Element;
 export default GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -18,7 +18,7 @@ const GridOptionsForm = (props) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.enableRangeSelection = enableRangeSelection;
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
@@ -27,21 +27,21 @@ const GridOptionsForm = (props) => {
                         abOptions.gridOptions.defaultColDef = {
                             floatingFilter,
                         };
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.suppressMenuHide = suppressMenuHide;
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })))));
 };
 exports.default = GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -10,6 +10,7 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLa
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormBox_1 = require("../Components/FormBox");
 const UIOptionsStatusbarForm = (props) => {
     var _a, _b, _c, _d;
     const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
@@ -82,14 +83,7 @@ const UIOptionsStatusbarForm = (props) => {
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Status Bar"),
         React.createElement(rebass_1.Box, { p: 2 },
-            React.createElement(rebass_1.Box, { style: {
-                    border: '1px solid var(--ab-color-primarydark)',
-                    borderRadius: 'var(--ab__border-radius)',
-                    marginBottom: 'var(--ab-space-2)',
-                    paddingBottom: 'var(--ab-space-1)',
-                    backgroundColor: 'var(--ab-color-defaultbackground)',
-                    padding: 'var(--ab-space-2)',
-                } },
+            React.createElement(FormBox_1.NocodeWizardFormBox, null,
                 React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
                 React.createElement(FormLayout_1.default, { mt: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AdaptableOptions } from '../../../../types';
 interface UIElementsOptionsProps {
     adaptableOptions: AdaptableOptions;
-    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
 export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
 export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -9,8 +9,8 @@ const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
     let abOptions = props.adaptableOptions;
     return (React.createElement(React.Fragment, null,
-        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
-        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
-        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions })));
+        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
+        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
+        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })));
 };
 exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -94,8 +94,8 @@ const Wizard = (props) => {
     }, []);
     const ddEnabled = (_a = props.ddEnabled) !== null && _a !== void 0 ? _a : !props.fetchData;
     return (React.createElement(React.Fragment, null,
-        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
-        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
+        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
         wizard));
 };
 exports.Wizard = Wizard;

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -14,6 +14,5 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
     onEdit(calculatedColumn: CalculatedColumn): void;
     onCloseWizard(): void;
     onFinishWizard: (calculatedColumn: CalculatedColumn) => void;
-    canFinishWizard(): boolean;
 }
 export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "ref" | "key" | "api" | "onSuspend" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "moduleInfo" | "onUnSuspend" | "modalContainer" | "onShare" | "onEdit" | "summarisedColumn" | "CalculatedColumns" | "onDeleteConfirm">>;

package/src/View/CalculatedColumn/CalculatedColumnSummary.js

@@ -9,7 +9,6 @@ const CalculatedColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsR
 const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableConfigEntityState");
 const UIHelper_1 = require("../UIHelper");
 const ModuleDetail_1 = require("../Components/ModuleSummary/ModuleDetail");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CalculatedColumnWizard_1 = require("./Wizard/CalculatedColumnWizard");
 class CalculatedColumnSummaryComponent extends React.Component {
     constructor(props) {
@@ -26,10 +25,9 @@ class CalculatedColumnSummaryComponent extends React.Component {
     }
     render() {
         let detailRow;
-        let sharing = this.props.teamSharingActivated;
         this.props.CalculatedColumns.map((item, index) => {
             if (item.ColumnId == this.props.summarisedColumn.columnId) {
-                detailRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: 'UF' + index, item1: this.props.moduleInfo.FriendlyName, item2: this.props.api.queryLanguageApi.getAdaptableQueryExpression(item.Query), configEnity: item, showShare: this.props.teamSharingActivated, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(item), onShare: (config) => this.props.onShare(item, config), onDelete: CalculatedColumnRedux.CalculatedColumnDelete(item), showBold: true, accessLevel: this.props.accessLevel }));
+                detailRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: 'UF' + index, item1: this.props.moduleInfo.FriendlyName, item2: this.props.api.internalApi.getAdaptableQueryExpressionText(item.Query), configEnity: item, showShare: this.props.teamSharingActivated, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(item), onShare: (config) => this.props.onShare(item, config), onDelete: CalculatedColumnRedux.CalculatedColumnDelete(item), showBold: true, accessLevel: this.props.accessLevel }));
             }
         });
         return (React.createElement("div", null,
@@ -50,11 +48,6 @@ class CalculatedColumnSummaryComponent extends React.Component {
             wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
         });
     }
-    canFinishWizard() {
-        let calculatedColumn = this.state.editedAdaptableObject;
-        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(calculatedColumn.ColumnId) &&
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query)));
-    }
 }
 exports.CalculatedColumnSummaryComponent = CalculatedColumnSummaryComponent;
 function mapStateToProps(state) {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -11,10 +11,11 @@ const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const renderCalculatedColumnExpressionSummary = (data) => {
-    var _a;
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        "Column scalar expression: ",
-        React.createElement(CodeBlock_1.CodeBlock, null, (_a = data.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression)));
+        "Column scalar expression:",
+        ' ',
+        React.createElement(CodeBlock_1.CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
 };
 exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressionSummary;
 const isValidCalculatedColumnExpression = (data, api) => {

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { IColItem } from '../../UIInterfaces';
-export interface AdaptableObjectCollectionProps extends React.ClassAttributes<AdaptableObjectCollection> {
+import { BoxProps } from 'rebass';
+export interface AdaptableObjectCollectionProps extends BoxProps {
     colItems: IColItem[];
     items: any[];
     allowOverflow?: boolean;
     style?: React.CSSProperties;
     headerAlign?: string;
 }
-export declare class AdaptableObjectCollection extends React.Component<AdaptableObjectCollectionProps, {}> {
-    render(): any;
-}
+export declare const AdaptableObjectCollection: React.FunctionComponent<AdaptableObjectCollectionProps>;

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

@@ -5,12 +5,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 /// <reference path="../../typings/.d.ts" />
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
-class AdaptableObjectCollection extends React.Component {
-    render() {
-        const allowOverflow = this.props.allowOverflow ? 'visible' : 'auto';
-        return (React.createElement("div", { style: Object.assign({}, this.props.style), className: "ab-ObjectCollection" },
-            React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: this.props.colItems, headerAlign: this.props.headerAlign }),
-            React.createElement("div", { style: { overflowY: allowOverflow, boxShadow: 'none' } }, this.props.items)));
-    }
-}
+const rebass_1 = require("rebass");
+const AdaptableObjectCollection = (props) => {
+    const allowOverflow = props.allowOverflow ? 'visible' : 'auto';
+    return (React.createElement(rebass_1.Box, { style: Object.assign({}, props.style), className: "ab-ObjectCollection" },
+        React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems, headerAlign: props.headerAlign }),
+        React.createElement("div", { className: "ab-ObjectCollection__items", style: { overflowY: allowOverflow, boxShadow: 'none' } }, props.items)));
+};
 exports.AdaptableObjectCollection = AdaptableObjectCollection;

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

@@ -15,10 +15,7 @@ class AdaptableObjectRow extends React.Component {
                 overflow: 'hidden',
             }, "data-name": "list-group-cell", paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
         const className = join_1.default('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
-        return (React.createElement("div", { className: className, onClick: this.props.onClick, style: this.props.style },
-            React.createElement(rebass_1.Flex, { "data-name": "list-group-item", className: "list-group-item", alignItems: "center", padding: 2, margin: 0, style: {
-                    overflowY: 'visible',
-                } }, colItems)));
+        return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }
 }
 exports.AdaptableObjectRow = AdaptableObjectRow;

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

@@ -47,8 +47,8 @@ QueryTab.defaultProps = {
 };
 const EntityRulesSummary = (props) => {
     const { data } = props;
-    const { api: { predicateApi, queryLanguageApi }, } = 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(queryLanguageApi.getAdaptableQueryExpression(data.Rule))))));
+    const { api: { predicateApi, internalApi }, } = 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))))));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {

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

@@ -56,7 +56,7 @@ class QuickFilterFormComponent extends React.Component {
         };
     }
     componentDidMount() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
             this.loadPermittedValues();
         }
@@ -67,6 +67,14 @@ class QuickFilterFormComponent extends React.Component {
             // there is no way to find out if the changed rows are relevant for this filter, so we have to update it every time :/
             this.handleGridValueChange();
         });
+        if ((_c = this.props.api.internalApi.getAdaptableOptions().filterOptions) === null || _c === void 0 ? void 0 : _c.showDistinctFilteredValuesOnly) {
+            this.props.api.internalApi.getAdaptableInstance()._on('GridFiltered', () => {
+                const filter = this.getFilterFromProps();
+                if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
+                    this.loadPermittedValues();
+                }
+            });
+        }
     }
     componentWillUnmount() {
         var _a, _b;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface PanelWithButtonProps {
     buttonClick?: () => void;
+    className?: string;
     button?: React.ReactElement<any>;
     headerText: string;
     glyphicon?: string;

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

@@ -4,11 +4,12 @@ exports.PopupPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
 const Noop = () => React.createElement(React.Fragment, null);
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: baseClassName, width: "100%" },
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: join_1.default(props.className, baseClassName) },
         React.createElement("div", { className: `${baseClassName}__Header` },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),