@adaptabletools/adaptable 12.1.2 → 12.1.5

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

@@ -5,12 +5,13 @@ const React = tslib_1.__importStar(require("react"));
 const useSelection_1 = tslib_1.__importDefault(require("./useSelection"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
 const Dropdown_1 = tslib_1.__importDefault(require("../../../components/Dropdown"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_1 = require("react");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const rebass_1 = require("rebass");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const dataTypes = [
     {
         value: 'abColDefString',
@@ -28,7 +29,7 @@ const dataTypes = [
 ];
 const inputStyle = {
     width: '100%',
-    minWidth: 50,
+    minWidth: 80,
     textAlign: 'start',
 };
 const useForceRender = () => {
@@ -37,6 +38,26 @@ const useForceRender = () => {
         setNow(Date.now());
     };
 };
+const ThrottledInput = React.memo((props) => {
+    const [stateValue, setStateValue] = react_1.useState(props.value);
+    const throttleOnChange = React.useRef(throttle_1.default(props.onChange, 600, { leading: false }));
+    const handleChange = React.useCallback((event) => {
+        const newValue = event.target.value;
+        setStateValue(newValue);
+        throttleOnChange.current(newValue);
+    }, []);
+    React.useEffect(() => {
+        setStateValue(props.value);
+    }, [props.value]);
+    return React.createElement(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
+});
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 600,
+    },
+};
 const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
     const rerender = useForceRender();
     const columnsRef = react_1.useRef(cols);
@@ -72,7 +93,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             }
             return c;
         });
-        silentSetColumns(cols);
+        setColumns(cols);
     };
     const onColumnTypeChange = (col, type) => {
         const cols = getColumns().map((c) => {
@@ -131,144 +152,181 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     });
     const allIncluded = isAllIncludedColumns();
     const allExcluded = isNoneIncludedColumns();
-    const colItems = [
-        { Content: 'Primary Key', Size: 3, key: 'pk' },
-        {
-            key: 'included',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Included"),
-                React.createElement(CheckBox_1.CheckBox, { checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
-                        if (allIncluded) {
-                            includeAllColumns();
-                        }
-                        else {
-                            excludeAllColumns();
+    React.useEffect(() => {
+        onValidityChange(isIncludedColumn(primaryKeyField));
+    }, [includedColumnsMap, primaryKeyField]);
+    const rowHeight = 40;
+    const data = columns;
+    const CellWrapper = (props) => {
+        return (React.createElement(rebass_1.Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
+    };
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, Object.assign({}, props, { fontSize: 3, style: { fontWeight: 600 } })));
+    const HeaderWithCheckbox = (props) => {
+        const { label, onChange, checked } = props, flexProps = tslib_1.__rest(props, ["label", "onChange", "checked"]);
+        return (React.createElement(HeaderCellWrapper, Object.assign({}, flexProps, { flexDirection: "column" }),
+            React.createElement(rebass_1.Box, null, label),
+            React.createElement(rebass_1.Box, { style: { textAlign: 'center' } },
+                React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
+    };
+    const columnsMap = {
+        pk: {
+            header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
+            maxWidth: 80,
+            sortable: false,
+            render: (params) => {
+                const { data } = params;
+                const column = data;
+                const isPrimaryKey = (column === null || column === void 0 ? void 0 : column.field) === primaryKeyField;
+                return (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
+                        if (checked && isIncludedColumn(column.field)) {
+                            setPrimaryKeyField(column.field);
                         }
-                    } }))),
-            Size: 3,
+                    } }));
+            },
         },
-        { Content: 'Field', Size: 5, key: 'field' },
-        { Content: 'Type', Size: 4, key: 'size' },
-        {
-            key: 'sortable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Sortable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
-                        if (allSortable) {
-                            setAllSortable();
-                        }
-                        else {
-                            setAllUnsortable();
-                        }
-                    } }))),
-            Size: 3,
+        included: {
+            maxWidth: 80,
+            resizable: true,
+            header: () => (React.createElement(HeaderWithCheckbox, { label: "Included", checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
+                    if (allIncluded) {
+                        includeAllColumns();
+                    }
+                    else {
+                        excludeAllColumns();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
+                            if (included) {
+                                includeColumn(column.field);
+                            }
+                            else {
+                                excludeColumn(column.field);
+                            }
+                        } })));
+            },
         },
-        {
-            key: 'editable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Editable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
-                        if (allEditable) {
-                            setAllEditable();
-                        }
-                        else {
-                            setAllUneditable();
-                        }
-                    } }))),
-            Size: 3,
+        field: {
+            header: React.createElement(HeaderCellWrapper, null, "Field"),
+            field: 'field',
+            minWidth: 150,
+            render: (params) => {
+                const column = params.data;
+                const humanized = StringExtensions_1.default.Humanize(column.field);
+                return (React.createElement(rebass_1.Box, { p: 2 },
+                    React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
+                            setColumnCaption(value, column.field);
+                        } })));
+            },
         },
-        {
-            Size: 3,
-            key: 'resizable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Resizable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
-                        if (allResizable) {
-                            setAllResizable();
-                        }
-                        else {
-                            setAllUnresizable();
-                        }
-                    } }))),
+        type: {
+            header: React.createElement(HeaderCellWrapper, null, "Type"),
+            maxWidth: 140,
+            render: (params) => {
+                var _a;
+                const column = params.data;
+                return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
+                    React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
+            },
         },
-        {
-            Size: 3,
-            key: 'enableRowGroup',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Groupable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
-                        if (allGroupable) {
-                            setAllGroupable();
-                        }
-                        else {
-                            setAllUngroupable();
-                        }
-                    } }))),
+        sortable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Sortable", checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
+                    if (allSortable) {
+                        setAllSortable();
+                    }
+                    else {
+                        setAllUnsortable();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
+                        sortable ? setSortableColumn(column.field) : setUnsortableColumn(column.field);
+                    } }));
+            },
         },
-        {
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Filterable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
-                        if (allFilterable) {
-                            setAllFilterable();
-                        }
-                        else {
-                            setAllUnfilterable();
-                        }
-                    } }))),
-            Size: 3,
-            key: 'filterable',
+        editable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Editable", checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
+                    if (allEditable) {
+                        setAllEditable();
+                    }
+                    else {
+                        setAllUneditable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
+                            editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
+                        } })));
+            },
         },
-    ];
-    const items = columns.map((col) => {
-        var _a;
-        const isPrimaryKey = col.field === primaryKeyField;
-        const cItems = colItems.map((c) => (Object.assign({}, c)));
-        cItems[0].Content = (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
-                if (checked && isIncludedColumn(col.field)) {
-                    setPrimaryKeyField(col.field);
-                }
-            } }));
-        cItems[1].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(col.field), onChange: (included) => {
-                if (included) {
-                    includeColumn(col.field);
-                }
-                else {
-                    excludeColumn(col.field);
-                }
-            } }));
-        const humanized = StringExtensions_1.default.Humanize(col.field);
-        cItems[2].Content = (React.createElement(Input_1.default, { style: inputStyle, defaultValue: col.caption != undefined ? col.caption : humanized, placeholder: humanized, onChange: (event) => {
-                setColumnCaption(event.target.value, col.field);
-            } }));
-        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = col === null || col === void 0 ? void 0 : col.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, col) }));
-        cItems[4].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(col.field), onChange: (sortable) => {
-                sortable ? setSortableColumn(col.field) : setUnsortableColumn(col.field);
-            } }));
-        cItems[5].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
-                editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
-            } }));
-        cItems[6].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
-                resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
-            } }));
-        cItems[7].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
-                groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
-            } }));
-        cItems[8].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
-                filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
-            } }));
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: col.field, colItems: cItems, style: { cursor: 'pointer' } });
-    });
-    React.useEffect(() => {
-        onValidityChange(isIncludedColumn(primaryKeyField));
-    }, [includedColumnsMap, primaryKeyField]);
-    return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { headerAlign: "flex-start", style: {
-            display: 'flex',
-            flex: '1 1 auto',
-            overflow: 'auto',
-            flexFlow: 'column',
-            textAlign: 'center',
-        }, colItems: colItems, items: items }));
+        resizable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Resizable", checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
+                    if (allResizable) {
+                        setAllResizable();
+                    }
+                    else {
+                        setAllUnresizable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
+                            resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
+                        } })));
+            },
+        },
+        groupable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Groupable", checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
+                    if (allGroupable) {
+                        setAllGroupable();
+                    }
+                    else {
+                        setAllUngroupable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
+                            groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
+                        } })));
+            },
+        },
+        filtrable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Filtrable", checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
+                    if (allFilterable) {
+                        setAllFilterable();
+                    }
+                    else {
+                        setAllUnfilterable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
+                            filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
+                        } })));
+            },
+        },
+    };
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: "light" },
+        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        defaultFlex: 1,
+                        align: 'center',
+                        sortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, rowHeight: rowHeight, columnHeaderHeight: 65, domProps: tableDOMProps, columns: columnsMap }))));
 };
 function areEqual() {
     /**

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;