@adaptabletools/adaptable 13.0.0 → 13.0.2

package/src/Utilities/Services/MetamodelService.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetamodelService = void 0;
+const tslib_1 = require("tslib");
 const adaptable_metamodel_1 = require("../../metamodel/adaptable.metamodel");
 const DefaultAdaptableOptions_1 = require("../Defaults/DefaultAdaptableOptions");
 const LoggingHelper_1 = require("../Helpers/LoggingHelper");
 const DocumentationLinkConstants_1 = require("../Constants/DocumentationLinkConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../Extensions/StringExtensions"));
 const supportedMetamodelTypes = [
     'string',
     'number',
@@ -99,7 +101,7 @@ class MetamodelService {
             return gridInfoOptions;
         }
         // root-level properties are grouped in a synthetic 'Base Options' container
-        const baseOptionsItems = this.mapGridInfoContainerItems(adaptableOptionsMetamodel, adaptableOptionsValues, adaptableOptionsDefaultValues);
+        const baseOptionsItems = this.mapGridInfoContainerItems(adaptableOptionsMetamodel, adaptableOptionsValues, adaptableOptionsDefaultValues, filterItemProperty);
         gridInfoOptions.set('baseOptions', {
             containerLabel: 'Base Options',
             items: baseOptionsItems,
@@ -130,14 +132,14 @@ class MetamodelService {
         return gridInfoOptions;
     }
     mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter = (itemProperty) => itemProperty.gridInfo === 'item') {
-        var _a;
-        return (_a = optionItemContainer.properties) === null || _a === void 0 ? void 0 : _a.filter(filter).map((itemProperty) => {
+        return optionItemContainer.properties.filter(filter).map((itemProperty) => {
             return {
                 name: itemProperty.name,
                 value: adaptableOptionsValues === null || adaptableOptionsValues === void 0 ? void 0 : adaptableOptionsValues[itemProperty.name],
                 defaultValue: defaultAdaptableOptionsValues[itemProperty.name],
                 kind: itemProperty.kind,
-                description: itemProperty.description,
+                description: StringExtensions_1.default.UnescapeHtmlEntities(itemProperty.description),
+                uiLabel: itemProperty.uiLabel,
             };
         });
     }

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

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

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

@@ -1,101 +1,112 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableOptionsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const rebass_1 = require("rebass");
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const LABEL_WIDTH = 250;
+const SUPPORTED_PRIMITEVE_TYPES = ['string', 'number', 'boolean'];
+const OptionInput = (props) => {
+    const { name, defaultValue, value, description, uiLabel } = props.option;
+    const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
+    let input = React.createElement(React.Fragment, null);
+    const info = (React.createElement(rebass_1.Box, { ml: 2 },
+        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
+    const handleInputChange = (event) => props.onChange(Object.assign(Object.assign({}, props.option), { value: event.currentTarget.value }));
+    const handleCheckboxChange = (checked) => props.onChange(Object.assign(Object.assign({}, props.option), { value: checked }));
+    // option is mutated to acomodate complex types overrides
+    const option = Object.assign({}, props.option);
+    const isOptionNonHomogenusUnion = (option) => {
+        const isUnion = option.kind.includes('|');
+        return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
+    };
+    if (isOptionNonHomogenusUnion(option)) {
+        // pick the first type
+        const newKind = option.kind
+            .split('|')
+            .find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
+            .trim();
+        if (newKind)
+            option.kind = newKind;
+    }
+    const inputProps = {
+        value: value !== null && value !== void 0 ? value : defaultValue,
+        minWidth: 200,
+        fontSize: 3,
+        mr: 2,
+    };
+    if (option.kind.includes('|')) {
+        const options = option.kind
+            .split('|')
+            .map((str) => str.trim().replace(/['"]/g, ''))
+            .map((str) => ({
+            label: StringExtensions_1.default.Humanize(str),
+            onClick: () => props.onChange(Object.assign(Object.assign({}, option), { value: str })),
+        }));
+        input = (React.createElement(DropdownButton_1.default, Object.assign({}, inputProps, { columns: ['label'], items: options }), StringExtensions_1.default.Humanize(value)));
+    }
+    else {
+        switch (option.kind) {
+            case 'number':
+                input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
+                break;
+            case 'string':
+                input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
+                break;
+            case 'boolean':
+                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
+                break;
+        }
+    }
+    let content = (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+            label,
+            " ",
+            info),
+        input));
+    if (option.kind === 'boolean') {
+        content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
+            input,
+            " ",
+            info));
+    }
+    return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
+};
+const OptionsSection = (props) => {
+    var _a;
+    if (!props.options.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(rebass_1.Box, { mb: 2 },
+        React.createElement(HelpBlock_1.default, { mb: 2 }, (_a = props.name) !== null && _a !== void 0 ? _a : props.id),
+        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
+};
 const AdaptableOptionsForm = (props) => {
-    var _a, _b;
-    let abOptions = props.adaptableOptions;
-    const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
-    const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
-    const adaptableQLOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.adaptableQLOptions), abOptions.adaptableQLOptions);
-    const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HelpBlock_1.default, null, "Base Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'label', style: { textAlign: 'start' } }, { name: 'children' }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Adaptable ID" },
-                React.createElement(Input_1.default, { value: (_b = (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.adaptableId) !== null && _b !== void 0 ? _b : null, onChange: (event) => {
-                        var _a;
-                        props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { adaptableId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
-                    }, style: { minWidth: '20rem' } }))),
-        React.createElement(HelpBlock_1.default, null, "General Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show Missing Primary Key Warning" },
-                React.createElement(CheckBox_1.CheckBox, { checked: generalOptions.showMissingPrimaryKeyAlert, onChange: (showMissingPrimaryKeyWarning) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.generalOptions = Object.assign({}, abOptions.generalOptions);
-                        abOptions.generalOptions.showMissingPrimaryKeyAlert = showMissingPrimaryKeyWarning;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Layout Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Save Layouts" },
-                React.createElement(CheckBox_1.CheckBox, { checked: layoutOptions.autoSaveLayouts, onChange: (autoSaveLayouts) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.layoutOptions = Object.assign({}, abOptions.layoutOptions);
-                        abOptions.layoutOptions.autoSaveLayouts = autoSaveLayouts;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Search Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Case Sensitive Text Comparison" },
-                React.createElement(CheckBox_1.CheckBox, { checked: adaptableQLOptions.caseSensitiveTextComparisons, onChange: (caseSensitiveTextComparisons) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.adaptableQLOptions = Object.assign({}, abOptions.adaptableQLOptions);
-                        abOptions.adaptableQLOptions.caseSensitiveTextComparisons =
-                            caseSensitiveTextComparisons;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use AG Grid Filter Form Style" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAgGridFilterFormStyle, onChange: (useAgGridFilterFormStyle) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAgGridFilterFormStyle = useAgGridFilterFormStyle;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableQuickFilter == true, onChange: (useAdaptableQuickFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableQuickFilter = useAdaptableQuickFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Filter Form" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableFilterForm == true, onChange: (useAdaptableFilterForm) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableFilterForm = useAdaptableFilterForm;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Indicate Filtered Columns" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.indicateFilteredColumns, onChange: (indicateFilteredColumns) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.indicateFilteredColumns = indicateFilteredColumns;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Apply Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.autoApplyFilter, onChange: (autoApplyFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.autoApplyFilter = autoApplyFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", margin: 2 },
-            React.createElement(rebass_1.Text, { style: { flex: 3 }, marginRight: 2 }, "Max Column Value Items To Display"),
-            React.createElement(rebass_1.Flex, { flex: 7, flexDirection: "row", alignItems: "center" },
-                React.createElement(Input_1.default, { style: { flex: 1 }, type: "number", placeholder: "Enter Number", onChange: (event) => {
-                        let e = event.target;
-                        let maxColumnValueItemsDisplayed = parseInt(e.value);
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.maxFilterValuesToDisplay = maxColumnValueItemsDisplayed;
-                        props.onChangeadAptableOptions(abOptions);
-                    }, value: filterOptions.maxFilterValuesToDisplay, marginRight: 3 })))));
+    const nocodeOptions = React.useMemo(() => {
+        const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
+        return [...metamodelService.getGridInfoNoCodeOptions()];
+    }, [props.adaptableOptions]);
+    const handleOptionChange = (sectionName) => (option) => {
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        if (sectionName === 'baseOptions') {
+            // @ts-ignore
+            adaptableOptions[option.name] = option.value;
+        }
+        else {
+            // @ts-ignore
+            adaptableOptions[sectionName] = Object.assign(Object.assign({}, adaptableOptions[sectionName]), { [option.name]: option.value });
+        }
+        props.onChangeadAptableOptions(adaptableOptions);
+    };
+    return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
+    })));
 };
-exports.default = AdaptableOptionsForm;
+exports.AdaptableOptionsForm = AdaptableOptionsForm;

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

@@ -5,10 +5,11 @@ export interface NocodeColumn extends Partial<ColDef> {
     type?: string | string[];
     caption?: string;
 }
-declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }: {
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }: {
     onValidityChange: (valid: boolean) => any;
     handle: React.MutableRefObject<any>;
     columns: NocodeColumn[];
+    theme?: string;
     onChange?: (columns: NocodeColumn[]) => void;
     onSelectionChange?: (column: any, flag: boolean) => void;
     selectedColumns?: {

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

@@ -58,7 +58,7 @@ const tableDOMProps = {
         minHeight: 600,
     },
 };
-const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }) => {
     const rerender = useForceRender();
     const columnsRef = (0, react_1.useRef)(cols);
     const silentSetColumns = (columns) => {
@@ -316,7 +316,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             },
         },
     };
-    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: "light" },
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
             React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
                     default: {

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

@@ -8,10 +8,11 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 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 FinanceForm_1 = require("./FinanceForm");
+const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
 const ConfigurationWizard = (props) => {
     var _a, _b;
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
@@ -22,7 +23,7 @@ const ConfigurationWizard = (props) => {
                 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) });
+        return Object.assign(Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions), 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] = (0, react_1.useState)(() => {
         return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
@@ -77,7 +78,7 @@ const ConfigurationWizard = (props) => {
             title: 'Adaptable Options',
             details: 'Configure Adaptable Options',
             isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
-            render: () => (React.createElement(AdaptableOptionsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
         },
         {
             title: 'Grid Options',

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

@@ -5,9 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
-    var _a, _b;
-    return (React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+    var _a, _b, _c;
+    let theme = 'light';
+    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
+        ((_a = props.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
+        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    }
+    return (React.createElement(ColumnsList_1.default, { theme: theme, 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 }));
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_c = (_b = props.adaptableOptions) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.columnDefs }));
 };
 exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

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

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 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"));
@@ -19,7 +18,7 @@ const tableDOMProps = {
     },
 };
 const EntitlementsListForm = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     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') {
@@ -31,28 +30,6 @@ const EntitlementsListForm = (props) => {
             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
@@ -73,15 +50,6 @@ const EntitlementsListForm = (props) => {
         }
         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."));
     }
@@ -119,7 +87,12 @@ const EntitlementsListForm = (props) => {
         },
     };
     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" },
+    let theme = 'light';
+    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
+        ((_c = props.adaptableOptions.predefinedConfig.Theme) === null || _c === void 0 ? void 0 : _c.CurrentTheme)) {
+        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    }
+    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
             React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
                     default: {

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

@@ -71,11 +71,11 @@ const FDC3InstrumentColumnBuilder = (props) => {
     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 })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, 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 })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, 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;
@@ -89,7 +89,7 @@ const FDC3BaseColumnBuilder = (props) => {
         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 : '' })));
+                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, 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) => {
@@ -132,7 +132,7 @@ const FDC3ColumnBuilder = (props) => {
         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(rebass_1.Flex, { flexWrap: "wrap" },
             React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
                 props.beforeContent,
                 React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
@@ -210,7 +210,7 @@ const FDC3ColumnCreator = (props) => {
     }
     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(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { key: error, 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 }),
@@ -238,8 +238,8 @@ const FinanceForm = (props) => {
         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) => {
+        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { key: currentFDCColumnId, mb: 3 },
+            React.createElement(FDC3ColumnEditor, { columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
                     const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
                         if (index === currentFDCColumnId) {
                             return editedFDC3Column;

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

@@ -6,11 +6,12 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const rebass_1 = require("rebass");
 const GridOptionsForm = (props) => {
     var _a;
     let abOptions = props.adaptableOptions;
     const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { p: 2 },
         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: "Enable Range Selection" },

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

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIElementsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
 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,
+    return (React.createElement(rebass_1.Box, { p: 2 },
         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 })));

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

@@ -210,8 +210,8 @@ class QuickFilterFormComponent extends React.Component {
                         e.nativeEvent.stopPropagation();
                         this.clearFilter();
                     }
-                }, flex: 1, style: {
-                    minWidth: 0,
+                }, style: {
+                    width: '100%',
                     padding: 'var(--ab-space-1)',
                     borderRadius: 0,
                     borderLeftWidth: 0,

package/src/View/Dashboard/DashboardPopup.js

@@ -72,7 +72,7 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
                     React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
                     ' ',
                     this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),

package/src/View/GridInfo/ColumnInfoComponent.js

@@ -17,7 +17,7 @@ const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants
 const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
 const FreeTextColumnSummary_1 = require("../FreeTextColumn/FreeTextColumnSummary");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const WizardSummaryPage_1 = require("../Components/WizardSummaryPage");
+const InfiniteTable_1 = require("../../components/InfiniteTable");
 class ColumnInfoComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -32,7 +32,7 @@ class ColumnInfoComponent extends React.Component {
         let selectedColumnId = this.state.SelectedColumn
             ? this.state.SelectedColumn.columnId
             : null;
-        let keyValuePairs = [
+        const keyValuePairs = [
             {
                 Key: 'Column Id',
                 Value: this.state.SelectedColumn ? this.state.SelectedColumn.columnId : null,
@@ -89,7 +89,18 @@ class ColumnInfoComponent extends React.Component {
                 Key: 'Grouped',
                 Value: this.state.SelectedColumn ? this.state.SelectedColumn.isGrouped : null,
             },
-        ];
+        ]
+            .map((keyValuePair) => {
+            return {
+                Key: keyValuePair.Key,
+                Value: keyValuePair.Value === true ? 'Yes' : keyValuePair.Value,
+            };
+        })
+            .filter((x) => x.Value);
+        const columnsMap = {
+            Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+            Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
+        };
         let moduleService = this.props.api.internalApi.getModuleService();
         let summaries = [];
         if (this.state.SelectedColumn) {
@@ -134,14 +145,18 @@ class ColumnInfoComponent extends React.Component {
                         summarisedColumn: this.state.SelectedColumn, accessLevel: this.getAccessLevel(ModuleConstants.CalculatedColumnModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.CalculatedColumnModuleId) })));
             }
         }
-        return (React.createElement(Panel_1.default, { header: "Column Info", margin: 2, "data-name": "column-component" },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", marginBottom: 2 },
-                React.createElement(rebass_1.Box, { flex: 1, marginLeft: 2 },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: this.props.api.columnApi.getColumns(), onColumnChange: (columns) => this.onColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }))),
-            React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && false && (
-            // not working but we should have the ability to create a grid without doing summary page
-            React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: 'Column Properties' }))),
-            React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { style: { width: '100%' }, colItems: colItems, items: summaries })))));
+        return (React.createElement(Panel_1.default, { flex: 1, header: "Column Info", margin: 2, "data-name": "column-component" },
+            React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+                React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", marginBottom: 2 },
+                    React.createElement(rebass_1.Box, { flex: 1, marginLeft: 2 },
+                        React.createElement(ColumnSelector_1.ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: this.props.api.columnApi.getColumns(), onColumnChange: (columns) => this.onColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }))),
+                React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { style: { width: '100%' }, colItems: colItems, items: summaries }))),
+                React.createElement(rebass_1.Box, { flex: 1, mt: 2 }, this.state.SelectedColumn && (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                    React.createElement(InfiniteTable_1.InfiniteTable, { domProps: {
+                            style: {
+                                height: '100%',
+                            },
+                        }, columns: columnsMap })))))));
     }
     onColumnSelectedChanged(columns) {
         this.setState({ SelectedColumn: columns.length > 0 ? columns[0] : null });