@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.2

package/src/View/GridInfo/GridInfoPopup.js

@@ -25,7 +25,7 @@ const GridInfoPopup = (props) => {
      * Because it is not associated with a module yet, setting this flag to true.
      * Needed for the logic weather to show radio buttons (buttons.length >= 2)
      */
-    const showAdaptableObjects = true;
+    const showAdaptableObjects = entitlementService.isGridInfoSectionVisible('AdaptableObjectsSummary');
     const [state, setState] = React.useState({
         ActiveTab: ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column)
             ? 'ColumnInfo'
@@ -50,18 +50,18 @@ const GridInfoPopup = (props) => {
         var _a;
         const returnRows = [];
         const calcColumns = props.api.calculatedColumnApi
-            .getAllCalculatedColumn()
+            .getCalculatedColumns()
             .map((c) => c.ColumnId);
         const actionColumns = props.api.actionApi
-            .getAllActionColumn()
+            .getActionColumns()
             .map((ac) => ac.columnId);
         const freeTextColumns = props.api.freeTextColumnApi
-            .getAllFreeTextColumn()
+            .getFreeTextColumns()
             .map((c) => c.ColumnId);
-        const columnFilterDescription = props.api.filterApi.columnFiltersToString(props.api.filterApi.getColumnFilters());
+        const columnFilterDescription = props.api.filterApi.internalApi.columnFiltersToString(props.api.filterApi.getColumnFilters());
         const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
             ? props.api.gridApi.getColumnSorts().map((gs) => {
-                return props.api.columnApi.getFriendlyNameFromColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+                return props.api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
             })
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
@@ -104,14 +104,15 @@ const GridInfoPopup = (props) => {
     const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { className: `${baseClassName}__header`, marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
-            showGridSummary && (React.createElement(Radio_1.default, { className: `${baseClassName}__option-radio`, "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
-            showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),
-            showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Columns")),
-            showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Objects"))))),
-        state.ActiveTab == 'GridSummary' && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
-        state.ActiveTab == 'AdaptableOptions' && React.createElement(AdaptableOptionsComponent_1.AdaptableOptionsComponent, { api: props.api }),
-        state.ActiveTab == 'ColumnInfo' && (React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn })),
-        state.ActiveTab === 'AdaptableObjectsSummary' && React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)));
+        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
+            React.createElement(rebass_1.Flex, { className: `${baseClassName}__header`, marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
+                showGridSummary && (React.createElement(Radio_1.default, { className: `${baseClassName}__option-radio`, "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
+                showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),
+                showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Columns")),
+                showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Objects"))))),
+            state.ActiveTab == 'GridSummary' && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+            state.ActiveTab == 'AdaptableOptions' && React.createElement(AdaptableOptionsComponent_1.AdaptableOptionsComponent, { api: props.api }),
+            state.ActiveTab == 'ColumnInfo' && (React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn })),
+            state.ActiveTab === 'AdaptableObjectsSummary' && React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null))));
 };
 exports.GridInfoPopup = GridInfoPopup;

package/src/View/Layout/LayoutRadioSelector.js

@@ -8,12 +8,12 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const LayoutRadioSelector = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
-    const layouts = adaptable.api.layoutApi.getAllLayout();
+    const layouts = adaptable.api.layoutApi.getLayouts();
     const isDisabled = (layouts === null || layouts === void 0 ? void 0 : layouts.length) === 1;
     const isSelected = currentLayout.Name === data.Name;
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return React.createElement(Radio_1.default, { id: data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+    return (React.createElement(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.LayoutRadioSelector = LayoutRadioSelector;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -7,7 +7,7 @@ const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
 const LayoutStatusBarSubPanelPopover = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const layouts = adaptable.api.layoutApi.getAllLayout();
+    const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
     const handleChange = (option) => {
         adaptable.api.layoutApi.setLayout(option.label);

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class LayoutViewPanelComponent extends React.Component<LayoutViewPanelCo
     render(): any;
     private onSaveLayout;
 }
-export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "Layouts" | "moduleInfo" | "accessLevel" | "viewType" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
+export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Layouts" | "viewType" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
 export {};

package/src/View/Layout/LayoutViewPanel.js

@@ -55,7 +55,7 @@ function mapStateToProps(state, ownProps) {
         CurrentLayoutName,
         CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout && !api.layoutApi.areDraftAndCurrentLayoutEqual(),
+        CanSave: state.Grid.CurrentLayout && !api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/Layout/PivotDetailsPopoup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const PivotDetailsPopoup: React.FunctionComponent<WindowPopupChildProps>;

package/src/View/Layout/PivotDetailsPopoup.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotDetailsPopoup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const AdaptableContext_1 = require("../AdaptableContext");
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 300,
+    },
+};
+const PivotDetailsPopoup = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptableApi = adaptable.api;
+    const primaryKey = adaptableApi.internalApi.getAdaptableOptions().primaryKey;
+    const { hasPivotValue, rows, rowGroups, columnId, layout, aggColumn, pivotValue, pivotColumnId, } = props.popupProps;
+    let data = rows;
+    const columns = React.useMemo(() => {
+        var _a, _b;
+        const getFriendlyName = (columnId) => adaptableApi.columnApi.getFriendlyNameForColumnId(columnId);
+        const pivotPreviewOptionColumn = (_b = (_a = adaptableApi.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.pivotPreviewColumns;
+        let pivotPreviewExtraColumns = [];
+        if (typeof pivotPreviewOptionColumn === 'function') {
+            const pivotPreviewColumnsContext = {
+                layout: layout,
+                columnId: columnId,
+                adaptableApi: adaptableApi,
+            };
+            pivotPreviewExtraColumns = pivotPreviewOptionColumn(pivotPreviewColumnsContext);
+        }
+        else if (Array.isArray(pivotPreviewOptionColumn)) {
+            pivotPreviewExtraColumns = pivotPreviewOptionColumn;
+        }
+        let columns = {
+            [primaryKey]: { field: primaryKey, header: getFriendlyName(primaryKey) },
+        };
+        if (hasPivotValue) {
+            // pivot_license_MIT License_stargazers_count
+            // splitting by _ does not work
+            columns = Object.assign(Object.assign({}, columns), { [aggColumn]: { field: aggColumn, header: getFriendlyName(aggColumn) }, [pivotColumnId]: { field: pivotColumnId, header: getFriendlyName(pivotColumnId) } });
+            data = rows.filter((row) => (row === null || row === void 0 ? void 0 : row[pivotColumnId]) === pivotValue);
+        }
+        else {
+            columns = Object.assign(Object.assign({}, columns), { [columnId]: { field: columnId, header: getFriendlyName(columnId) } });
+        }
+        const extraColumns = [];
+        if (Array.isArray(rowGroups) && rowGroups.length > 0) {
+            extraColumns.push(...rowGroups);
+        }
+        if (Array.isArray(pivotPreviewExtraColumns) && pivotPreviewExtraColumns.length > 0) {
+            extraColumns.push(...pivotPreviewExtraColumns);
+        }
+        return Object.assign(Object.assign({}, columns), extraColumns.reduce((acc, colId) => (Object.assign(Object.assign({}, acc), { [colId]: { field: colId, header: getFriendlyName(colId) } })), {}));
+    }, [props.popupProps]);
+    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId },
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                default: {
+                    defaultFlex: 1,
+                },
+            }, domProps: tableDOMProps, columns: columns })));
+};
+exports.PivotDetailsPopoup = PivotDetailsPopoup;

package/src/View/Layout/SaveLayoutButton.js

@@ -21,7 +21,7 @@ const SaveLayoutButton = () => {
         dispatch(LayoutRedux.LayoutSave(layout));
         dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
     }, []);
-    const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.areDraftAndCurrentLayoutEqual();
+    const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual();
     if (!isManualSaveLayout) {
         return React.createElement(React.Fragment, null);
     }

package/src/View/Layout/Wizard/Components/ColumnLabels.js

@@ -19,7 +19,7 @@ const ColumnLabels = (props) => {
     const flexProps = {
         [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
     };
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-LayoutEditor__Legend", flexDirection: flexDirection }, flexProps, { width: "100%" }),
         showTitle ? (React.createElement(rebass_1.Text, { mr: 2 }, (0, AdaptableContext_1.useAdaptable)().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
         labels.map((l, index) => {
             const enabled = !!l;

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -22,9 +21,9 @@ const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const allLayouts = adaptable.api.layoutApi.getAllLayout();
+    const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
-    const [layout, setLayout] = (0, react_1.useState)(() => {
+    const [layout, setLayout] = React.useState(() => {
         var _a;
         let preparedLayout = null;
         if (initialLayout) {
@@ -68,6 +67,7 @@ const LayoutWizard = (props) => {
         }
         props.onFinishWizard(layout);
     };
+    const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
@@ -96,13 +96,14 @@ const LayoutWizard = (props) => {
             {
                 title: 'Pivot Columns',
                 details: 'Select Pivot Columns',
-                isVisible: () => layout === null || layout === void 0 ? void 0 : layout.EnablePivot,
+                isVisible: () => (layout === null || layout === void 0 ? void 0 : layout.EnablePivot) && layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
                     React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Row Groups',
+                isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
@@ -110,6 +111,7 @@ const LayoutWizard = (props) => {
             },
             {
                 title: 'Aggregations',
+                isVisible: () => layoutSupportedFeatures.AggregationColumns,
                 details: 'Select Column Aggregations',
                 renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
@@ -118,6 +120,7 @@ const LayoutWizard = (props) => {
             },
             {
                 title: 'Sort',
+                isVisible: () => layoutSupportedFeatures.ColumnSorts,
                 renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
                 details: 'Configure Column Sorts',
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
@@ -125,6 +128,8 @@ const LayoutWizard = (props) => {
             },
             {
                 title: 'Filters',
+                isVisible: () => layoutSupportedFeatures.ColumnFilters,
+                isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'View Column Filters',
                 renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },

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

@@ -32,8 +32,8 @@ const AggregationsSectionSummary = () => {
     const entires = Object.entries(aggregations !== null && aggregations !== void 0 ? aggregations : {});
     let content = null;
     if (entires.length) {
-        content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId) },
-            React.createElement(Tag_1.Tag, null, aggregation))))));
+        content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) },
+            React.createElement(Tag_1.Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
     }
     else {
         content = React.createElement(Tag_1.Tag, null, "No Aggregations");
@@ -92,7 +92,7 @@ const ColumnRow = (props) => {
     let weightName = null;
     if (typeof aggValue === 'object' && aggValue.type === 'weightedAverage') {
         weightName = aggValue.weightedColumnId
-            ? adaptable.api.columnApi.getFriendlyNameFromColumnId(aggValue.weightedColumnId)
+            ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
     return (React.createElement(rebass_1.Flex, { alignItems: "center" },
@@ -107,12 +107,12 @@ const AggregationsSection = (props) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const allAggregableColumns = adaptable.api.columnApi.getAggregetableColumns();
+    const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getColumns();
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         var _a, _b;
-        return (0, sortWithOrder_1.sortWithOrderArray)(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {

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

@@ -35,11 +35,12 @@ const ColumnsSectionSummary = () => {
                 adaptable.api.columnApi.isAutoRowGroupColumn(columnId)) {
                 return null;
             }
-            const friendlyName = adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId);
+            const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId);
             const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
             const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
             const columnPinning = (_d = layout.PinnedColumnsMap) === null || _d === void 0 ? void 0 : _d[columnId];
-            const agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            let agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            agg = typeof agg === 'object' ? agg.type : agg;
             const sortIndex = ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnSorts) !== null && _f !== void 0 ? _f : []).findIndex((sort) => sort.ColumnId === columnId);
             const sortOrder = sortIndex != -1
                 ? {
@@ -137,7 +138,7 @@ const ColumnRow = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     // headers
-    const initialHeader = adaptable.api.columnApi.getFriendlyNameFromColumnId(props.column.columnId);
+    const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId);
     const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : '';
     // column pinning
     const columnPinning = ((_c = props.layout.PinnedColumnsMap) === null || _c === void 0 ? void 0 : _c[props.column.columnId]) || 'None';
@@ -158,7 +159,7 @@ const ColumnRow = (props) => {
     const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
     // width
     const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
-    return (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow" },
+    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
         React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
             React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
             props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
@@ -167,31 +168,31 @@ const ColumnRow = (props) => {
             React.createElement(rebass_1.Flex, { mr: 2 },
                 React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
             React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(SimpleButton_1.default, { ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
+            React.createElement(SimpleButton_1.default, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
         isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
             React.createElement(rebass_1.Flex, { mb: 2 },
                 React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
                     React.createElement(FormLayout_1.FormRow, { label: "Column ID" },
                         React.createElement(Tag_1.Tag, null, props.column.friendlyName)),
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
                             }, value: columnWidth })),
                     React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedColumns = React.useMemo(() => {
-        return (0, sortWithOrder_1.sortWithOrderArray)(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allColumns]);
     const handlePinChange = (columnId, pinning) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));
@@ -201,8 +202,8 @@ const ColumnsSection = (props) => {
     };
     const handleColumnsChange = (columnIds) => {
         var _a, _b;
-        const oldColumns = (_a = layout.Columns.map((colId) => adaptable.api.columnApi.getColumnFromId(colId))) !== null && _a !== void 0 ? _a : [];
-        const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnFromId(colId))) !== null && _b !== void 0 ? _b : [];
+        const oldColumns = (_a = layout.Columns.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _a !== void 0 ? _a : [];
+        const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _b !== void 0 ? _b : [];
         if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
             return;
         }

package/src/View/Layout/Wizard/sections/FilterSection.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
+export declare const isColumnFiltersValid: (layout: Layout) => true | string;
 export declare const FilterSectionSummary: React.FunctionComponent;
 interface FilterSectionProps {
     onChange: (data: Layout) => void;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterSection = exports.FilterSectionSummary = void 0;
+exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
@@ -11,6 +11,18 @@ const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/A
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const Tag_1 = require("../../../../components/Tag");
+const PredicateEditor_1 = require("../../../Components/PredicateEditor/PredicateEditor");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const isColumnFiltersValid = (layout) => {
+    var _a, _b;
+    const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    if (invalidColumnFilters.length > 0) {
+        return 'Please select a predicate for each column filter';
+    }
+    return true;
+};
+exports.isColumnFiltersValid = isColumnFiltersValid;
 const FilterSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -27,9 +39,46 @@ const FilterSection = (props) => {
     const handleDelete = React.useCallback((columnFilter) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
     }, [layout]);
+    const handlePredicateEdit = React.useCallback((predicate, columnFilter) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId
+                ? Object.assign(Object.assign({}, columnFilter), { Predicate: predicate }) : layoutFilter) }));
+    }, [layout.ColumnFilters]);
+    const columnsOptions = React.useMemo(() => adaptable.api.columnApi
+        .getFilterableColumns()
+        .filter(
+    // filter out columns with filters already
+    (abColumn) => {
+        var _a;
+        return !((_a = layout.ColumnFilters) === null || _a === void 0 ? void 0 : _a.some((columnFilter) => abColumn.columnId === columnFilter.ColumnId));
+    })
+        .map(({ columnId }) => ({
+        label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
+        onClick: () => {
+            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                    ...layoutFilters,
+                    {
+                        ColumnId: columnId,
+                        Predicate: null,
+                    },
+                ] }));
+        },
+    })), [layout, layoutFilters]);
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
-        React.createElement(Tabs_1.Tabs.Content, null, (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) ? (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: filterModule.toView(columnFilter).items, onDelete: () => handleDelete(columnFilter) }))))) : (React.createElement(rebass_1.Box, null,
-            React.createElement(Tag_1.Tag, null, "No Column Filters are applied. Filters are set using the grid."))))));
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, { mb: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Add new filter" },
+                    React.createElement(DropdownButton_1.default, { "data-name": "select-column", minWidth: 250, items: columnsOptions, mr: 2, columns: ['label'] }, "Select Column"))),
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+                const predicateDefs = adaptable.api.filterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
+                const items = [
+                    ...filterModule.toView(columnFilter).items,
+                    {
+                        name: 'Filter',
+                        view: (React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                    },
+                ];
+                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
+            }))))));
 };
 exports.FilterSection = FilterSection;

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

@@ -15,7 +15,7 @@ const PivotColumnsSectionSummary = () => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {
@@ -25,7 +25,7 @@ const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        return (0, sortWithOrder_1.sortWithOrderArray)(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allPivotColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));

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

@@ -16,7 +16,7 @@ const RowGroupingSectionSummary = () => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
+    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
 };
 exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
 const RowGroupingSection = (props) => {
@@ -26,7 +26,7 @@ const RowGroupingSection = (props) => {
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         var _a;
-        return (0, sortWithOrder_1.sortWithOrderArray)(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));

package/src/View/Layout/Wizard/sections/SettingsSection.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const SettingsSectionSummary: React.FunctionComponent;
+export declare const SettingsSectionSummary: React.FunctionComponent<React.PropsWithChildren<unknown>>;
 interface SettingsSectionProps {
     onChange: (data: Layout) => void;
 }
-export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;
+export declare const SettingsSection: React.FunctionComponent<React.PropsWithChildren<SettingsSectionProps>>;
 export {};

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

@@ -45,7 +45,7 @@ const SettingsSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
-                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
 };
 exports.SettingsSection = SettingsSection;

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

@@ -32,13 +32,10 @@ const SortSection = (props) => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const allSortableColumns = adaptable.api.columnApi.getSortableColumns().filter((column) => {
-        // filter out columns that are not in the layout
-        return layout.Columns.includes(column.columnId);
-    });
+    const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
     const sortedSortColumns = React.useMemo(() => {
         var _a;
-        return (0, sortWithOrder_1.sortWithOrderArray)(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allSortableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {

package/src/View/License/LicenseWatermark.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const LicenseWatermark: React.FunctionComponent;
+export declare const LicenseWatermark: React.FunctionComponent<React.PropsWithChildren<unknown>>;

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.js

@@ -36,7 +36,7 @@ function PlusMinusRuleWizardSection(props) {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: null,
             useAggregationQuery: null,
         } }));

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.d.ts

@@ -4,7 +4,7 @@ import { PlusMinusNudge, AdaptableApi } from '../../../types';
 export declare const PlusMinusSettingsSummary: React.FunctionComponent<{
     hasCondition: boolean;
 }>;
-export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => true | "No valid Condition is specified" | "The Predicate is not valid" | "The Expression is not a valid Boolean Expression" | "Nudge value is not specified" | "Nudge value must be different than 0";
+export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => true | "The Expression is not a valid Boolean Expression" | "No valid Condition is specified" | "The Predicates are not valid" | "Nudge value is not specified" | "Nudge value must be different than 0";
 interface PlusMinusSettingsWizardSectionProps {
     onChange: (plusMinusNudge: PlusMinusNudge) => void;
     hasCondition: boolean;