@adaptabletools/adaptable 12.1.4 → 12.1.5

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

@@ -9,9 +9,19 @@ const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
 const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
 const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
 const AdaptableOptionsForm_1 = tslib_1.__importDefault(require("./AdaptableOptionsForm"));
+const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
+const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
 const ConfigurationWizard = (props) => {
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
-    const [adaptableOptions, setAdaptableOptions] = react_1.useState(props.adaptableOptions);
+    const [adaptableOptions, setAdaptableOptions] = react_1.useState(() => {
+        var _a;
+        const gridOptionDefaults = {
+            sideBar: {
+                toolPanels: ['columns', 'filters', 'adaptable'],
+            },
+        };
+        return Object.assign(Object.assign({}, props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
+    });
     const [selectedColumns, setSelectedColumns] = react_1.useState(() => {
         return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
             acc[col.field] = true;
@@ -77,22 +87,20 @@ const ConfigurationWizard = (props) => {
                     setAdaptableOptions(abOptions);
                 } })),
         },
-        // JW - I would like at some point to do a page of Entitlements
-        // to show all the Modules and let users select which are Full, ReadOnly or Hidden
-        /*
         {
-          title: 'Entitlements',
-          details: 'Configure Entitlements',
-          render: () => (
-            <EntitlementsForm
-              adaptableOptions={adaptableOptions}
-              onChangeadaptableOptions={(abOptions) => {
-                setAdaptableOptions(abOptions);
-              }}
-            />
-          ),
+            title: 'UI Elements',
+            details: 'Configure UI Elements',
+            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableOptions, onChangeadaptableOptions: (abOptions) => {
+                    setAdaptableOptions(abOptions);
+                } })),
+        },
+        {
+            title: 'Entitlements',
+            details: 'Configure Entitlements',
+            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadaptableOptions: (abOptions) => {
+                    setAdaptableOptions(abOptions);
+                } })),
         },
-        */
     ];
     if (props.startSections) {
         sections = [

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

@@ -3,15 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigurationWizardColumnsStep = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
     var _a, _b;
-    return (React.createElement(Panel_1.default, { header: '', border: "none", bodyScroll: false, bodyProps: {
-            style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
-        }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
-        React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
-                props.setPrimaryKeyIsNotSelected(valid);
-            }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs })));
+    return (React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+            props.setPrimaryKeyIsNotSelected(valid);
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
 };
 exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOptions } from '../../../types';
 interface EntitlementsFormOptions {
     adaptableOptions: AdaptableOptions;
     onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
-declare const EntitlementsForm: (props: EntitlementsFormOptions) => JSX.Element;
+declare const EntitlementsForm: React.FunctionComponent<EntitlementsFormOptions>;
 export default EntitlementsForm;

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

@@ -2,16 +2,156 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const Types_1 = require("../../../PredefinedConfig/Common/Types");
+const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const ALL_ENTITLEMENTS_MODULES = Types_1.ALL_MODULES;
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 600,
+    },
+};
+const EntitlementsListForm = (props) => {
+    var _a, _b;
+    let abOptions = props.adaptableOptions;
+    const entitlements = (_b = (_a = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _a === void 0 ? void 0 : _a.moduleEntitlements) !== null && _b !== void 0 ? _b : [];
+    if (typeof entitlements === 'function') {
+        return (React.createElement(HelpBlock_1.default, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+    }
+    const entitlementsMap = React.useMemo(() => {
+        return entitlements.reduce((acc, entitlement) => {
+            acc[entitlement.adaptableModule] = entitlement.accessLevel;
+            return acc;
+        }, {});
+    }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
+    const colItems = [
+        {
+            Content: React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, "Entitlement"),
+            Size: 3,
+            key: 'name',
+        },
+        {
+            Content: 'Visible',
+            Size: 3,
+            key: 'Visible',
+        },
+        {
+            Content: 'Read Only',
+            Size: 3,
+            key: 'ReadOnly',
+        },
+        {
+            Content: 'Hidden',
+            Size: 3,
+            key: 'Hidden',
+        },
+    ];
+    const handleOnChange = React.useCallback((module, accessLevel) => {
+        let newEntitlements = entitlements;
+        // change
+        if (entitlementsMap[module]) {
+            newEntitlements = newEntitlements.map((entitlement) => {
+                if (entitlement.adaptableModule === module) {
+                    entitlement.accessLevel = accessLevel;
+                }
+                return entitlement;
+            });
+        }
+        else {
+            // new
+            newEntitlements = [
+                ...newEntitlements,
+                { adaptableModule: module, accessLevel: accessLevel },
+            ];
+        }
+        props.onChangeadaptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
+    }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
+    const items = ALL_ENTITLEMENTS_MODULES.map((module) => {
+        const cItems = colItems.map((item) => (Object.assign({}, item)));
+        const accessLevel = entitlementsMap[module];
+        cItems[0].Content = React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, ModuleConstants_1.ADAPTABLE_MODULE_MAP[module]);
+        cItems[1].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
+        cItems[2].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
+        cItems[3].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
+        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: module, colItems: cItems, style: { cursor: 'pointer' } });
+    });
+    if (typeof entitlements === 'function') {
+        return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+    }
+    const columnsMap = {
+        name: {
+            header: 'Module Name',
+            align: 'start',
+            renderValue: (params) => {
+                return React.createElement(React.Fragment, null, params.data.name);
+            },
+        },
+        full: {
+            header: 'Full',
+            render: (params) => {
+                const module = params.data.name;
+                const accessLevel = entitlementsMap[module];
+                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
+            },
+        },
+        readonly: {
+            header: 'Read Only',
+            render: (params) => {
+                const module = params.data.name;
+                const accessLevel = entitlementsMap[module];
+                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
+            },
+        },
+        hidden: {
+            header: 'Hidden',
+            render: (params) => {
+                const module = params.data.name;
+                const accessLevel = entitlementsMap[module];
+                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
+            },
+        },
+    };
+    const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ModuleConstants_1.ADAPTABLE_MODULE_MAP[module] }));
+    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: "light" },
+        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        defaultFlex: 1,
+                        align: 'center',
+                        sortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, columnHeaderHeight: 50, domProps: tableDOMProps, columns: columnsMap }))));
+};
+const DefaultEntitlementForm = (props) => {
+    var _a, _b;
+    const abOptions = props.adaptableOptions;
+    const entitlementOptions = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.entitlementOptions;
+    const defaultEntitlement = entitlementOptions === null || entitlementOptions === void 0 ? void 0 : entitlementOptions.defaultAccessLevel;
+    if (typeof defaultEntitlement === 'function') {
+        return React.createElement(HelpBlock_1.default, { mb: 2 }, "Default Entitlement is controlled by a custom function");
+    }
+    const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
+        props.onChangeadaptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { defaultAccessLevel: accessLevel }) }));
+    }, [(_b = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _b === void 0 ? void 0 : _b.defaultAccessLevel]);
+    return (React.createElement(FormLayout_1.default, { mb: 2 },
+        React.createElement(FormLayout_1.FormRow, { label: "Default Entitlement:" },
+            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
+            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', mr: 3 }, "Read Only"),
+            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
+};
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    const entitlementOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.entitlementOptions), abOptions.entitlementOptions);
-    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HelpBlock_1.default, null, "EntitlementOptions Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Entitlements to be set here" }))));
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", p: 2 },
+        React.createElement(DefaultEntitlementForm, Object.assign({}, props)),
+        React.createElement(EntitlementsListForm, Object.assign({}, props))));
 };
 exports.default = EntitlementsForm;

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

@@ -13,13 +13,6 @@ const GridOptionsForm = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show ToolPanel" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.sideBar == true, onChange: (addSideBar) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.sideBar = addSideBar;
-                        props.onChangeadaptableOptions(abOptions);
-                    } })),
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsActionColumnsForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsActionColumnsForm = 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 HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const UIOptionsActionColumnsForm = (props) => {
+    var _a, _b, _c;
+    const options = [
+        { value: 'clone', label: 'Clone' },
+        { value: 'create', label: 'Create' },
+        { value: 'edit', label: 'Edit' },
+        { value: 'delete', label: 'Delete' },
+    ];
+    const actionRowButtons = (_c = (_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons) !== null && _c !== void 0 ? _c : [];
+    const handleCheckChange = (type, checked) => {
+        var _a;
+        let newActionRowButtons = actionRowButtons;
+        if (checked) {
+            newActionRowButtons = [...newActionRowButtons, type];
+        }
+        else {
+            newActionRowButtons = newActionRowButtons.filter((item) => item !== type);
+        }
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions), { actionRowButtons: newActionRowButtons }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Row Action Buttons"),
+        React.createElement(rebass_1.Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
+};
+exports.UIOptionsActionColumnsForm = UIOptionsActionColumnsForm;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../../types';
+export declare const UIOptionsSidebarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsSidebarForm = 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 StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
+const prepareSidebarDef = (sideBar) => {
+    sideBar = sideBar;
+    if (typeof sideBar === 'boolean') {
+        sideBar = {
+            toolPanels: ALL_SIDEBAR_OPTIONS,
+        };
+    }
+    if (typeof sideBar === 'string') {
+        sideBar = {
+            toolPanels: [sideBar],
+        };
+    }
+    if (Array.isArray(sideBar)) {
+        sideBar = {
+            toolPanels: sideBar,
+        };
+    }
+    return sideBar !== null && sideBar !== void 0 ? sideBar : { toolPanels: [] };
+};
+const isSidebarChecked = (sideBar, panelName) => {
+    var _a;
+    return ((_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : []).some((panel) => {
+        const panelId = typeof panel === 'string' ? panel : panel.id;
+        return panelId === panelName;
+    });
+};
+const UIOptionsSidebarForm = (props) => {
+    var _a;
+    const { abOptions, onChange } = props;
+    const { gridOptions } = props.abOptions;
+    const sideBar = prepareSidebarDef(gridOptions.sideBar);
+    const renderSidebarCheckbox = (sidebarName) => {
+        return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+    };
+    const handleToolpanelsChange = (panelName, check) => {
+        var _a, _b;
+        let newPanels = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : [];
+        if (check) {
+            newPanels = [...newPanels, panelName];
+        }
+        else {
+            newPanels = newPanels.filter((panel) => {
+                const panelId = typeof panel === 'string' ? panel : panel.id;
+                return panelId !== panelName;
+            });
+        }
+        let hiddenByDefault = (_b = sideBar.hiddenByDefault) !== null && _b !== void 0 ? _b : false;
+        if (newPanels.length === 0) {
+            hiddenByDefault = true;
+        }
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
+        props.onChange(newAbOptions);
+    };
+    let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
+    const handleSidebarPositionChange = (position) => {
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
+        props.onChange(newAbOptions);
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
+        React.createElement(rebass_1.Box, { m: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
+            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
+                React.createElement(FormLayout_1.FormRow, { label: "Position" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
+                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+};
+exports.UIOptionsSidebarForm = UIOptionsSidebarForm;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

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

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsStatusbarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+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 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 : [];
+    const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
+        const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
+        if (previousItem) {
+            return Object.assign(Object.assign({}, previousItem), { align });
+        }
+        else {
+            const newPanel = {
+                statusPanel: panelId,
+                align,
+            };
+            return newPanel;
+        }
+    });
+    const leftPanels = allPanels.filter((panel) => !(panel === null || panel === void 0 ? void 0 : panel.align) || panel.align === 'left');
+    const centerPanels = allPanels.filter((panel) => panel.align === 'center');
+    const rightPanels = allPanels.filter((panel) => panel.align === 'right');
+    const handleTabChange = (tabs) => {
+        const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
+        const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
+        const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
+        const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    const disabled = false;
+    const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
+    const tabs = [
+        {
+            Name: 'Left',
+            Items: leftPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Center',
+            Items: centerPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Right',
+            Items: rightPanels.map(panelToTabItemId),
+        },
+    ];
+    const allOptions = [
+        { Id: 'agTotalRowCountComponent', Title: 'Row Count' },
+        { Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
+        { Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
+        { Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
+        { Id: 'agAggregationComponent', Title: 'Aggregation' },
+    ];
+    const availableItems = allOptions;
+    const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
+    const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
+    const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
+    const alignOptions = [
+        { onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
+        { onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
+        { onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
+    ];
+    const handleNewAdaptablePanel = () => {
+        const newAdaptablePanel = {
+            statusPanel: 'AdaptableStatusPanel',
+            align: adaptablePanelAlign,
+            key: adaptablePanelTitle,
+        };
+        const newStatusbarPanels = [...allPanels, newAdaptablePanel];
+        setAdaptablePanelTitle('');
+        setAdaptablePanelAlign('left');
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    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(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
+                React.createElement(FormLayout_1.default, { mt: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
+                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placehoder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Align" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, (_d = alignOptions.find((option) => option.value === adaptablePanelAlign)) === null || _d === void 0 ? void 0 : _d.label)),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
+                        !isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
+            React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+                    createTab: false,
+                    dragAndDropTab: false,
+                    deleteTab: false,
+                    editTabName: false,
+                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
+};
+exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIElementsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
+const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
+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 })));
+};
+exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -41,6 +41,7 @@ const Wizard = (props) => {
     const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
     const [isDataLoading, setIsDataLoading] = react_1.useState(false);
     const handleDataSource = (array, file) => {
+        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             Utils_1.validDataSource(dataSourceInfo);
@@ -51,7 +52,7 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
         adaptableOptions.gridOptions = gridOptions;

package/src/View/AdaptableWizardView/helper.d.ts

@@ -16,4 +16,4 @@ export interface WizardDataSourceInfo {
  */
 export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
 export declare const getColTypeFromValue: (value: any) => string;
-export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo) => GridOptions;
+export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo, defaultGridOptions: Partial<GridOptions>) => GridOptions;

package/src/View/AdaptableWizardView/helper.js

@@ -65,7 +65,7 @@ const getColTypeFromValue = (value) => {
     return columnType;
 };
 exports.getColTypeFromValue = getColTypeFromValue;
-const prepareGridOptions = (dataSourceInfo) => {
+const prepareGridOptions = (dataSourceInfo, defaultGridOptions) => {
     const firstItem = dataSourceInfo.data[0];
     const columnDefs = dataSourceInfo.columns.map((columnName) => {
         const firstItemValue = firstItem[columnName];
@@ -81,16 +81,9 @@ const prepareGridOptions = (dataSourceInfo) => {
             editable: true,
         };
     });
-    const gridOptions = {
-        defaultColDef: {
+    const gridOptions = Object.assign(Object.assign({}, defaultGridOptions), { defaultColDef: {
             floatingFilter: true,
-        },
-        rowData: dataSourceInfo.data,
-        columnDefs,
-        enableRangeSelection: true,
-        rowSelection: 'multiple',
-        rowHeight: 30,
-    };
+        }, rowData: dataSourceInfo.data, columnDefs, enableRangeSelection: true, rowSelection: 'multiple', rowHeight: 30 });
     return gridOptions;
 };
 exports.prepareGridOptions = prepareGridOptions;

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

@@ -210,7 +210,8 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.onClearColumnFilter(editedColumnFilter);
+            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.onCloseForm();
         }
         else {
             if (this.props.api.internalApi.getAdaptableOptions().filterOptions.autoApplyFilter) {

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

@@ -18,16 +18,16 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const ColumnLabels_1 = require("../LayoutEditor/ColumnLabels");
 const Utilities_1 = require("./Utilities");
-const lodash_1 = require("lodash");
 const icons_1 = require("../../../../components/icons");
 const CheckBox_1 = require("../../../../components/CheckBox");
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const ColumnsSectionSummary = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + lodash_1.clamp(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + Helper_1.clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;