@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -1,33 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
-const tslib_1 = require("tslib");
-const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const AdaptableColumn_1 = require("../../../../PredefinedConfig/Common/AdaptableColumn");
-const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const ValueSelector_1 = require("../../../Components/ValueSelector");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const Utilities_1 = require("./Utilities");
-const icons_1 = require("../../../../components/icons");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const Helper_1 = require("../../../../Utilities/Helpers/Helper");
-const ColumnLabels_1 = require("../Components/ColumnLabels");
-const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
-const ColumnsSectionSummary = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import DropdownButton from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
+import SimpleButton from '../../../../components/SimpleButton';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { isValidOrderForColumnGroups, } from '../../../../PredefinedConfig/Common/AdaptableColumn';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { columnFilter } from './Utilities';
+import { Icon } from '../../../../components/icons';
+import { CheckBox } from '../../../../components/CheckBox';
+import { clamp } from '../../../../Utilities/Helpers/Helper';
+import { ColumnLabels } from '../Components/ColumnLabels';
+const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
+export const ColumnsSectionSummary = () => {
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -82,8 +78,8 @@ const ColumnsSectionSummary = () => {
                     if (!((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.sortOrder) === null || _b === void 0 ? void 0 : _b.sort)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
-                        React.createElement(icons_1.Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
+                    return (React.createElement(Flex, null,
+                        React.createElement(Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
                         ' ',
                         React.createElement(PropertyOrderText, null, (_g = (_f = (_e = params.data) === null || _e === void 0 ? void 0 : _e.sortOrder) === null || _f === void 0 ? void 0 : _f.index) !== null && _g !== void 0 ? _g : '')));
                 },
@@ -98,7 +94,7 @@ const ColumnsSectionSummary = () => {
                     if (!((_a = params.data) === null || _a === void 0 ? void 0 : _a.filter)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
+                    return React.createElement(CheckBox, { checked: true });
                 },
             },
             group: {
@@ -111,8 +107,8 @@ const ColumnsSectionSummary = () => {
                     if (!params.data.grouping) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
-                        React.createElement(CheckBox_1.CheckBox, { margin: 0, mr: 1, checked: true }),
+                    return (React.createElement(Flex, null,
+                        React.createElement(CheckBox, { margin: 0, mr: 1, checked: true }),
                         React.createElement(PropertyOrderText, null, (_a = params.data) === null || _a === void 0 ? void 0 : _a.grouping)));
                 },
             },
@@ -125,18 +121,17 @@ const ColumnsSectionSummary = () => {
             minHeight: tableHeight,
         },
     };
-    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+    return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
+        React.createElement(InfiniteTable, { columnTypes: {
                 default: {
                     defaultFlex: 1,
                 },
             }, rowHeight: rowHeight, domProps: tableDOMProps, columns: columns })));
 };
-exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b, _c, _d;
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     // headers
     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 : initialHeader;
@@ -159,40 +154,40 @@ 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, { "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 },
+    return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
+            React.createElement(Flex, { mr: 2, alignItems: "center" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null,
-            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, { "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: "ColumnId" },
-                        React.createElement(Tag_1.Tag, null, props.column.columnId)),
-                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+            React.createElement(Flex, { mr: 2 },
+                React.createElement(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(Box, { flex: 1 }),
+            React.createElement(SimpleButton, { "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(Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
+            React.createElement(Flex, { mb: 2 },
+                React.createElement(FormLayout, { width: "100%", mr: 3 },
+                    React.createElement(FormRow, { label: "ColumnId" },
+                        React.createElement(Tag, null, props.column.columnId)),
+                    React.createElement(FormRow, { label: "Header" },
+                        React.createElement(Input, { "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, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                    React.createElement(FormRow, { label: "Width" },
+                        React.createElement(Input, { "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, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                    React.createElement(FormRow, { label: "Pinning" },
+                        React.createElement(DropdownButton, { "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)();
+export const ColumnsSection = (props) => {
+    const adaptable = useAdaptable();
+    const { data: layout } = 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.getColumnWithColumnId(colId));
+        return 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 }) }));
@@ -204,7 +199,7 @@ const ColumnsSection = (props) => {
         var _a, _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 })) {
+        if (!isValidOrderForColumnGroups({ oldColumns, newColumns })) {
             return;
         }
         props.onChange(Object.assign(Object.assign({}, layout), { Columns: columnIds }));
@@ -212,11 +207,11 @@ const ColumnsSection = (props) => {
     const handleColumnWidthChange = (columnId, width) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnWidthMap: Object.assign(Object.assign({}, layout.ColumnWidthMap), { [columnId]: width }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
-                React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Columns"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(Flex, { mt: 2, mb: 3 },
+                React.createElement(ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
                         Sortable: 'Sortable',
                         Filterable: 'Filterable',
                         Aggregatable: 'Aggregatable',
@@ -224,8 +219,7 @@ const ColumnsSection = (props) => {
                         Moveable: 'Moveable',
                         Pivotable: 'Pivotable',
                     }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
-            React.createElement(ValueSelector_1.ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
+            React.createElement(ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
-exports.ColumnsSection = ColumnsSection;

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

@@ -1,40 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
-const Tabs_1 = require("../../../../components/Tabs");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
-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) => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
+import { Tabs } from '../../../../components/Tabs';
+import { useAdaptable } from '../../../AdaptableContext';
+import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
+import { Tag } from '../../../../components/Tag';
+import { PredicateEditor } from '../../../Components/PredicateEditor/PredicateEditor';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
+export 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 '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)();
-    const fitlerViewItems = (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, adaptable.api);
-    return (React.createElement(rebass_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Filters"))));
+export const FilterSectionSummary = () => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = useAdaptable();
+    const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
+    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
 };
-exports.FilterSectionSummary = FilterSectionSummary;
-const FilterSection = (props) => {
+export const FilterSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.FilterModuleId);
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const layoutFilters = (_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [];
     const handleDelete = React.useCallback((columnFilter) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
@@ -45,40 +39,37 @@ const FilterSection = (props) => {
     }, [layout.ColumnFilters]);
     const columnsOptions = React.useMemo(() => adaptable.api.columnApi
         .getFilterableColumns()
-        .filter(
-    // filter out columns with filters already
-    (abColumn) => {
+        .filter((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,
-                    },
-                ] }));
-        },
+        value: columnId,
     })), [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,
-            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);
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Column Filters"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, { mb: 2 },
+                React.createElement(FormRow, { label: "Add Column Filter" },
+                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+                            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                                    ...layoutFilters,
+                                    {
+                                        ColumnId: option,
+                                        Predicate: null,
+                                    },
+                                ] }));
+                        } }))),
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+                const predicateDefs = adaptable.api.columnFilterApi.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) })),
+                        name: 'Column Filter',
+                        view: (React.createElement(PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
                     },
                 ];
-                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
+                return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
             }))))));
 };
-exports.FilterSection = FilterSection;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../../../../types';
+export declare const isGridFiltersValid: (layout: Layout, api: AdaptableApi) => true | string;
+export declare const GridFilterSectionSummary: React.FunctionComponent;
+interface GridFilterSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const GridFilterSection: React.FunctionComponent<GridFilterSectionProps>;
+export {};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box } from 'rebass';
+import { Tabs } from '../../../../components/Tabs';
+import { useAdaptable } from '../../../AdaptableContext';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { Tag } from '../../../../components/Tag';
+import { ExpressionEditor } from '../../../../components/ExpressionEditor';
+import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
+export const isGridFiltersValid = (layout, api) => {
+    var _a;
+    const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
+    if (StringExtensions.IsNullOrEmpty(expression)) {
+        return true;
+    }
+    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, GridFilterModuleId)
+        .isValid || 'Invalid Expression');
+};
+export const GridFilterSectionSummary = () => {
+    var _a, _b;
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, React.createElement(Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
+};
+export const GridFilterSection = (props) => {
+    var _a, _b;
+    const { api } = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Grid Filters"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
+                    props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
+                }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })))));
+};

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

@@ -1,40 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const ValueSelector_1 = require("../../../Components/ValueSelector");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const Utilities_1 = require("./Utilities");
-const PivotColumnsSectionSummary = () => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { columnFilter } from './Utilities';
+export 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.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(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, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Column Pivoting"))));
 };
-exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
-const PivotColumnsSection = (props) => {
+export const PivotColumnsSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     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.getColumnWithColumnId(colId));
+        return 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 }));
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Pivot Columns"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
-exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -1,46 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowGroupingSection = exports.RowGroupingSectionSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Utilities_1 = require("./Utilities");
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const ValueSelector_1 = require("../../../Components/ValueSelector");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const RowGroupingSectionSummary = () => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { columnFilter } from './Utilities';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+export 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.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Row Grouping"))));
 };
-exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
-const RowGroupingSection = (props) => {
+export const RowGroupingSection = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     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.getColumnWithColumnId(colId));
+        return 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 }));
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Rows"),
-        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Grouped Rows"),
+        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs.Tab, null, "Expanded Rows"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange })),
-        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
-                React.createElement(FormLayout_1.default, { p: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag_1.Tag, { mb: 2, mr: 2, key: index }, value))))))))));
+        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs.Content, null,
+            React.createElement(Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
+                React.createElement(FormLayout, { p: 2 },
+                    React.createElement(FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag, { mb: 2, mr: 2, key: index }, value))))))))));
 };
-exports.RowGroupingSection = RowGroupingSection;