@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

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

@@ -1,20 +1,16 @@
-"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 DropdownButton from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+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) {
@@ -22,19 +18,17 @@ const isColumnFiltersValid = (layout) => {
     }
     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 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) }));
@@ -63,22 +57,21 @@ const FilterSection = (props) => {
                 ] }));
         },
     })), [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 new filter" },
+                    React.createElement(DropdownButton, { "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(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/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;

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

@@ -1,32 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SettingsSection = exports.SettingsSectionSummary = 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 Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const SettingsSectionSummary = () => {
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, null,
-        React.createElement(Tag_1.Tag, { mr: 2 },
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
+import Radio from '../../../../components/Radio';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+export const SettingsSectionSummary = () => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null,
+        React.createElement(Tag, { mr: 2 },
             "Layout Name: ",
             layout.Name),
-        React.createElement(Tag_1.Tag, { mr: 2 },
+        React.createElement(Tag, { mr: 2 },
             "Layout Grid Type: ",
             layout.EnablePivot ? 'Pivot' : 'Table'),
-        React.createElement(Tag_1.Tag, { mr: 2 },
+        React.createElement(Tag, { mr: 2 },
             "Suppress Aggregation Function in Header: ",
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
 };
-exports.SettingsSectionSummary = SettingsSectionSummary;
-const SettingsSection = (props) => {
+export const SettingsSection = (props) => {
     var _a;
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const onNameChange = (event) => {
         props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
     };
@@ -34,18 +29,17 @@ const SettingsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { width: "100%", style: { maxWidth: 300 } },
-                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
-                            React.createElement(Input_1.default, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
-            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, { "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"))))));
+        React.createElement(Tabs, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, { width: "100%", style: { maxWidth: 300 } },
+                        React.createElement(FormRow, { label: "Name" },
+                            React.createElement(Input, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Grid Type"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(Radio, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
 };
-exports.SettingsSection = SettingsSection;

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

@@ -1,41 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortSection = exports.SortSectionSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
-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 SortSectionSummary = () => {
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, adaptable.api);
-    return (React.createElement(rebass_1.Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Sorts"))));
+import * as React from 'react';
+import { Box } from 'rebass';
+import SimpleButton from '../../../../components/SimpleButton';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
+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 SortSectionSummary = () => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = useAdaptable();
+    const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
+    return (React.createElement(Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Sorts"))));
 };
-exports.SortSectionSummary = SortSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b, _c;
     const SortOrder = (_c = ((_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.ColumnSorts) !== null && _b !== void 0 ? _b : []).find((sort) => sort.ColumnId === props.column.columnId)) === null || _c === void 0 ? void 0 : _c.SortOrder;
     const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Box, null,
         props.column.friendlyName,
-        SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
+        SortOrder && (React.createElement(SimpleButton, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
-const SortSection = (props) => {
+export const SortSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     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.getColumnWithColumnId(colId));
+        return 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) => {
@@ -56,11 +51,10 @@ const SortSection = (props) => {
                 return sort;
             }) }));
     }, [layout]);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column Sorts"),
-        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; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Column Sorts"),
+        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; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));
 };
-exports.SortSection = SortSection;

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

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.columnFilter = void 0;
-const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate === null || candidate === void 0 ? void 0 : candidate.toLowerCase().includes(searchText.toLowerCase()));
-exports.columnFilter = columnFilter;
+export const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate === null || candidate === void 0 ? void 0 : candidate.toLowerCase().includes(searchText.toLowerCase()));

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),t=e.__importStar(require("react")),r=require("../../components/Logo"),o=require("rebass"),n={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},i=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),i(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=n.border,l.current.style.padding=n.padding,l.current.style.fontWeight=`${n.fontWeight}`,l.current.style.margin=n.margin,l.current.style.fontSize=n.fontSize,l.current.style.color=n.color,l.current.style.background=n.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),t.createElement(o.Flex,{style:n,ref:l},t.createElement(r.Logo,{style:{marginRight:10}}),t.createElement("div",null,e.children))};exports.LicenseWatermark=l;
+import*as e from"react";import{Logo as t}from"../../components/Logo";import{Flex as r}from"rebass";const o={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},n=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0};export const LicenseWatermark=i=>{const l=e.useRef(null);return e.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=o.border,l.current.style.padding=o.padding,l.current.style.fontWeight=`${o.fontWeight}`,l.current.style.margin=o.margin,l.current.style.fontSize=o.fontSize,l.current.style.color=o.color,l.current.style.background=o.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),e.createElement(r,{style:o,ref:l},e.createElement(t,{style:{marginRight:10}}),e.createElement("div",null,i.children))};

package/src/View/License/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LicenseWatermark = void 0;
-var LicenseWatermark_1 = require("./LicenseWatermark");
-Object.defineProperty(exports, "LicenseWatermark", { enumerable: true, get: function () { return LicenseWatermark_1.LicenseWatermark; } });
+export { LicenseWatermark } from './LicenseWatermark';

package/src/View/NamedQuery/EditCurrentQueryButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EditGridFilterButton: () => JSX.Element;

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+export const EditGridFilterButton = () => {
+    const adaptable = useAdaptable();
+    const handleClick = React.useCallback((event) => {
+        event.stopPropagation();
+        adaptable.api.gridFilterApi.expandGridFilterEditor();
+    }, []);
+    return React.createElement(SimpleButton, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
+};

package/src/View/{Query → NamedQuery}/Wizard/NamedQueryExpressionWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { NamedQuery } from '../../../PredefinedConfig/QueryState';
+import { NamedQuery } from '../../../types';
 export interface NamedQueryExpressionWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { Text } from 'rebass';
+import { ExpressionEditor } from '../../../components/ExpressionEditor';
+import { Tag } from '../../../components/Tag';
+import { NamedQueryModuleId } from '../../../Utilities/Constants/ModuleConstants';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+export const isValidNamedQueryExpression = (data, api) => {
+    if (!data.BooleanExpression) {
+        return 'Expression is empty';
+    }
+    const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, NamedQueryModuleId);
+    if (!valid) {
+        return 'Query is not a valid Boolean Query';
+    }
+    return valid;
+};
+export const renderNamedQueryExpressionSummary = (data) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Text, { fontSize: 2 },
+        "Expression: ",
+        React.createElement(Tag, null, api.internalApi.getAdaptableQueryExpressionText(data))));
+};
+export const NamedQueryExpressionWizardSection = (props) => {
+    const { data, moduleInfo, api } = useOnePageAdaptableWizardContext();
+    const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    return (React.createElement(ExpressionEditor, { allowSaveNamedQuery: false, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
+            props.onChange(Object.assign(Object.assign({}, data), { BooleanExpression }));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
+};

package/src/View/{Query → NamedQuery}/Wizard/NamedQuerySettingsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { NamedQuery } from '../../../PredefinedConfig/QueryState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { NamedQuery } from '../../../types';
 export interface NamedQuerySettingsWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }

package/src/View/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -0,0 +1,38 @@
+// TODO: move to named query
+import * as React from 'react';
+import { Text } from 'rebass';
+import WizardPanel from '../../../components/WizardPanel';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import ErrorBox from '../../../components/ErrorBox';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import AdaptableInput from '../../Components/AdaptableInput';
+import { Tag } from '../../../components/Tag';
+export const isValidNamedQuerySettings = (data, api) => {
+    const validationResult = api.namedQueryApi.isValidNamedQueryName(data);
+    const ErrorMessage = !validationResult.valid ? validationResult.message : null;
+    if (!ErrorMessage) {
+        return true;
+    }
+    return ErrorMessage;
+};
+export const renderNamedQuerySettingsSummary = (data) => {
+    return (React.createElement(Text, { fontSize: 2 },
+        "Name: ",
+        React.createElement(Tag, null, data.Name)));
+};
+export const NamedQuerySettingsWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const valid = isValidNamedQuerySettings(data, api);
+    const errorMessage = valid === true ? null : valid;
+    const handleColumnNameChange = (event) => {
+        let e = event.target;
+        props.onChange(Object.assign(Object.assign({}, data), { Name: e.value }));
+    };
+    return (React.createElement(WizardPanel, { "data-name": 'named-query-settings' },
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Name" },
+                React.createElement(AdaptableInput, { "data-name": "query-name", value: data.Name, autoFocus: true, width: 300, type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) })),
+            ' ',
+            errorMessage ? (React.createElement(FormRow, { label: "" },
+                React.createElement(ErrorBox, null, errorMessage))) : null)));
+};