@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.0

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -4,29 +4,28 @@ exports.useGridFilterExpressionEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const useGridFilterExpressionEditor = () => {
-    var _a, _b, _c;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const currentLayout = (0, react_redux_1.useSelector)((state) => {
         return state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout);
     });
-    const isReadOnly = Boolean(currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.IsReadOnly);
-    const gridFilter = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.GridFilter;
+    const isReadOnly = Boolean(currentLayout?.IsReadOnly);
+    const gridFilter = currentLayout?.GridFilter;
     const [isAdaptableReady, setIsAdaptableReady] = React.useState(false);
     const [expression, setExpression] = React.useState(() => {
-        return adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
+        return adaptable.api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
     });
-    const namedQueries = (_a = (0, react_redux_1.useSelector)((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
-    const cachedQueries = (_b = (0, react_redux_1.useSelector)((state) => state.System.CachedQueries)) !== null && _b !== void 0 ? _b : [];
-    const isSuspended = (_c = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.IsSuspended) !== null && _c !== void 0 ? _c : false;
+    const namedQueries = (0, react_redux_1.useSelector)((state) => state.NamedQuery.NamedQueries) ?? [];
+    const cachedQueries = (0, react_redux_1.useSelector)((state) => state.Internal.CachedQueries) ?? [];
+    const isSuspended = gridFilter?.IsSuspended ?? false;
     const onAddCachedQuery = (cachedQuery) => {
-        dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
+        dispatch(InternalRedux.CachedQueryAdd(cachedQuery));
     };
     const gridFilterHelpPage = adaptable.ModuleService.getModuleById('GridFilter').moduleInfo.HelpPage;
     const gridFilterLinkDisabled = !adaptable.api.internalApi.isDocumentationLinksDisplayed();
@@ -36,11 +35,10 @@ const useGridFilterExpressionEditor = () => {
         });
     }, []);
     React.useEffect(() => {
-        var _a;
-        if ((gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) != expression) {
-            setExpression((_a = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== null && _a !== void 0 ? _a : '');
+        if (gridFilter?.Expression != expression) {
+            setExpression(gridFilter?.Expression ?? '');
         }
-    }, [gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression]);
+    }, [gridFilter?.Expression]);
     const isExpressionValid = expression == '' ||
         adaptable.api.internalApi
             .getQueryLanguageService()
@@ -57,14 +55,14 @@ const useGridFilterExpressionEditor = () => {
         };
     });
     const clearQuery = () => {
-        adaptable.api.gridFilterApi.clearGridFilter();
+        adaptable.api.filterApi.gridFilterApi.clearGridFilter();
         setExpression('');
     };
     const runQuery = (newExpression = expression) => {
         if (StringExtensions_1.default.IsNullOrEmpty(newExpression) &&
-            StringExtensions_1.default.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
+            StringExtensions_1.default.IsNotNullOrEmpty(gridFilter?.Expression)) {
             // user pressed enter key with an empty input => clear existing expression
-            adaptable.api.gridFilterApi.setGridFilterExpression('');
+            adaptable.api.filterApi.gridFilterApi.setGridFilterExpression('');
             return;
         }
         if (!adaptable.api.internalApi
@@ -81,7 +79,7 @@ const useGridFilterExpressionEditor = () => {
                 onAddCachedQuery(cachedQuery);
             }
         }
-        adaptable.api.gridFilterApi.setGridFilterExpression(newExpression);
+        adaptable.api.filterApi.gridFilterApi.setGridFilterExpression(newExpression);
     };
     const gridFilterAccessLevel = React.useMemo(() => {
         return adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants_1.GridFilterModuleId);
@@ -99,10 +97,10 @@ const useGridFilterExpressionEditor = () => {
         onShowNamedQueries(expression, namedqueryPopuName);
     };
     const suspendGridFilter = () => {
-        adaptable.api.gridFilterApi.suspendGridFilter();
+        adaptable.api.filterApi.gridFilterApi.suspendGridFilter();
     };
     const unSuspendGridFilter = () => {
-        adaptable.api.gridFilterApi.unSuspendGridFilter();
+        adaptable.api.filterApi.gridFilterApi.unSuspendGridFilter();
     };
     return {
         isReadOnly,
@@ -120,12 +118,12 @@ const useGridFilterExpressionEditor = () => {
         availableColumns,
         runQuery,
         clearQuery,
-        onExpand: () => adaptable.api.gridFilterApi.openUIEditorForGridFilter(expression),
+        onExpand: () => adaptable.api.filterApi.gridFilterApi.openUIEditorForGridFilter(expression),
         saveQuery,
         suspendGridFilter,
         unSuspendGridFilter,
         setGridFilterExpression: (expression) => {
-            adaptable.api.gridFilterApi.setGridFilterExpression(expression);
+            adaptable.api.filterApi.gridFilterApi.setGridFilterExpression(expression);
         },
         gridFilterAccessLevel,
         gridFilterHelpPage,

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -4,7 +4,7 @@ exports.useGridFilterOptionsForExpressionEditorProps = void 0;
 const AdaptableContext_1 = require("../AdaptableContext");
 const useGridFilterOptionsForExpressionEditorProps = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const gridFilterEditors = adaptable.api.optionsApi.getGridFilterOptions().availableFilterEditors;
+    const gridFilterEditors = adaptable.api.optionsApi.getFilterOptions().gridFilterOptions.availableFilterEditors;
     return {
         showQueryBuilder: gridFilterEditors.includes('QueryBuilder'),
         showExpressionEditor: gridFilterEditors.includes('ExpressionEditor'),

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -13,17 +13,16 @@ const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
-        var _a;
         if (!module.isModuleAvailable()) {
             return null;
         }
-        const items = (_a = module === null || module === void 0 ? void 0 : module.toViewAll) === null || _a === void 0 ? void 0 : _a.call(module);
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        const items = module?.toViewAll?.();
+        if (!items?.length) {
             return null;
         }
         return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
             React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
-            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
+            items?.length && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));
 };
 exports.AdaptableObjectsSummary = AdaptableObjectsSummary;

package/src/View/GridInfo/GridInfoPopup/AdaptableOptionsComponent.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 interface AdaptableOptionsComponentProps {
     api: AdaptableApi;
 }
-export declare const AdaptableOptionsComponent: (props: AdaptableOptionsComponentProps) => JSX.Element;
+export declare const AdaptableOptionsComponent: (props: AdaptableOptionsComponentProps) => React.JSX.Element;
 export {};

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ModuleViewPopupProps } from '../../Components/SharedProps/ModuleViewPopupProps';
 interface GridInfoPopupProps extends ModuleViewPopupProps<any> {
 }
-export declare const GridInfoPopup: (props: GridInfoPopupProps) => JSX.Element;
+export declare const GridInfoPopup: (props: GridInfoPopupProps) => React.JSX.Element;
 export {};

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -16,27 +16,27 @@ const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const EnvVars_1 = require("../../../EnvVars");
 const version = EnvVars_1.ADAPTABLE_VERSION;
 const GridInfoPopup = (props) => {
+    const api = props.api;
     const CreateGridSummaries = (colItems) => {
-        var _a;
         const returnRows = [];
-        const calcColumns = props.api.calculatedColumnApi
+        const calcColumns = api.calculatedColumnApi
             .getCalculatedColumns()
             .map((c) => c.ColumnId);
-        const actionColumns = props.api.actionColumnApi
+        const actionColumns = api.actionColumnApi
             .getActionColumns()
             .map((ac) => ac.columnId);
-        const freeTextColumns = props.api.freeTextColumnApi
+        const freeTextColumns = api.freeTextColumnApi
             .getFreeTextColumns()
             .map((c) => c.ColumnId);
-        const columnFilterDescription = props.api.columnFilterApi.internalApi.columnFiltersToString(props.api.columnFilterApi.getColumnFilters());
-        const gridFilterExpression = props.api.gridFilterApi.getCurrentGridFilterExpression();
+        const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
+        const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
         const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
-            ? props.api.gridApi.getColumnSorts().map((gs) => {
-                return props.api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+            ? api.gridApi.getColumnSorts().map((gs) => {
+                return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
             })
             : null;
-        const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
-        if ((_a = props.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
+        const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+        if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
             returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version));
         }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
@@ -44,13 +44,19 @@ const GridInfoPopup = (props) => {
         returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
+        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo?.gridRows.length));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns)
+            ? ArrayExtensions_1.default.createCommaSeparatedString(calcColumns)
+            : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
+            ? ArrayExtensions_1.default.createCommaSeparatedString(freeTextColumns)
+            : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
+            ? ArrayExtensions_1.default.createCommaSeparatedString(actionColumns)
+            : 'None'));
         return returnRows;
     };
     const createReadOnlyColItem = (colItems, item1, item2, item3) => {

package/src/View/KeyHint.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextProps } from 'rebass';
-export declare const KeyHint: (props: TextProps) => JSX.Element;
+export declare const KeyHint: (props: TextProps) => React.JSX.Element;

package/src/View/KeyHint.js

@@ -5,6 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const KeyHint = (props) => {
-    return React.createElement(rebass_1.Text, Object.assign({ fontSize: 1, color: "inputcolor" }, props));
+    return React.createElement(rebass_1.Text, { fontSize: 1, color: "inputcolor", ...props });
 };
 exports.KeyHint = KeyHint;

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -5,10 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
+const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const EditCurrentLayoutButton = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleClick = React.useCallback(() => {
-        adaptable.api.layoutApi.showLayoutEditor();
+        const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+        const layoutName = currentLayout.Name;
+        const type = (0, isPivotLayout_1.isPivotLayout)(currentLayout) ? 'pivot' : 'table';
+        adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
     return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -5,12 +5,13 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
+const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isDisabled = accessLevel === 'ReadOnly';
     const handleClick = React.useCallback(() => {
-        adaptable.api.layoutApi.showLayoutEditor(data.Name, 'Clone');
+        adaptable.api.layoutApi.showLayoutEditor(data.Name, (0, isPivotLayout_1.isPivotLayout)(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return React.createElement(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
+    return (React.createElement(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
 };
 exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutRadioSelector.js

@@ -9,7 +9,7 @@ const LayoutRadioSelector = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
     const layouts = adaptable.api.layoutApi.getLayouts();
-    const isDisabled = (layouts === null || layouts === void 0 ? void 0 : layouts.length) === 1;
+    const isDisabled = layouts?.length === 1;
     const isSelected = currentLayout.Name === data.Name;
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);

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

@@ -1,19 +1,27 @@
 import * as React from 'react';
-import { Layout } from '../../PredefinedConfig/LayoutState';
+import { Layout, LayoutArray } from '../../PredefinedConfig/LayoutState';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;
     onSaveLayout: (layout: Layout) => void;
-    Layouts: Layout[];
-    CurrentDraftLayout: Layout;
-    CanSave: boolean;
+    showMissingLayoutsError: () => void;
+    Layouts: LayoutArray;
+    CurrentLayout: Layout;
     CurrentLayoutName: string;
 }
-declare class LayoutViewPanelComponent extends React.Component<LayoutViewPanelComponentProps, {}> {
-    render(): any;
-    private onSaveLayout;
-}
-export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof LayoutViewPanelComponentProps> & LayoutViewPanelComponentProps>;
-export {};
+export declare const LayoutViewPanelControl: import("react-redux").ConnectedComponent<React.FC<LayoutViewPanelComponentProps>, {
+    onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;
+    onSaveLayout: (layout: Layout) => void;
+    showMissingLayoutsError: () => void;
+    Layouts: [Layout, ...Layout[]];
+    CurrentLayout: Layout;
+    CurrentLayoutName: string;
+    viewType: "ToolPanel" | "Toolbar";
+    api: import("../../types").AdaptableApi;
+    accessLevel: import("../../types").AccessLevel;
+    moduleInfo: import("../../Strategy/Interface/IModule").ModuleInfo;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+}>;

package/src/View/Layout/LayoutViewPanel.js

@@ -3,60 +3,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const Select_1 = require("../../components/Select");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
-const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
-const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const icons_1 = require("../../components/icons");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
-class LayoutViewPanelComponent extends React.Component {
-    render() {
-        let layoutEntity = this.props.Layouts.find((x) => x.Name == this.props.CurrentLayoutName || x.Uuid == this.props.CurrentLayoutName);
-        // the global access level (Layout Entitlement)
-        const cloneAccessLevel = this.props.accessLevel;
-        const newAccessLevel = this.props.accessLevel;
-        const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(layoutEntity, this.props.accessLevel);
-        const isManualSaveLayout = !this.props.api.layoutApi.shouldAutoSaveLayouts();
-        const availableLayoutOptions = this.props.Layouts.map((layout, index) => {
-            return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
-        });
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
-                React.createElement(Select_1.Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
-                isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
-                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
-                React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
-    }
-    onSaveLayout() {
-        const currentLayoutObject = this.props.CurrentDraftLayout;
-        if (currentLayoutObject) {
-            this.props.onSaveLayout(currentLayoutObject);
+const LayoutViewPanelComponent = (props) => {
+    const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
+    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, isEqual_1.default)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
+    React.useEffect(() => {
+        if (isErrorLayout) {
+            showMissingLayoutsError();
         }
-    }
-}
+    }, [isErrorLayout]);
+    const layoutEntity = Layouts.find((x) => x.Name === CurrentLayoutName || x.Uuid === CurrentLayoutName);
+    // the global access level (Layout Entitlement)
+    const cloneAccessLevel = accessLevel;
+    const newAccessLevel = accessLevel;
+    const entityAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(layoutEntity, accessLevel);
+    // Layout options for select
+    const availableLayoutOptions = Layouts.map((layout) => ({
+        ...layout,
+        label: layout.Name,
+        value: layout.Name,
+        onClick: () => onSelectLayout(layout.Name),
+    }));
+    const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
+    return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
+            React.createElement(Select_1.Select, { disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
+        React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
+            React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
+            React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
+            React.createElement(DropdownButton_1.default, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [
+                    {
+                        dataName: 'table',
+                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Table Layout"),
+                        onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
+                    },
+                    {
+                        dataName: 'pivot',
+                        disabled: api.gridApi.isTreeDataGrid(),
+                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Pivot Layout"),
+                        onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
+                    },
+                ], tone: "neutral", accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new` },
+                React.createElement(icons_1.Icon, { name: "plus" })),
+            React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: GeneralConstants_1.LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel }))));
+};
 function mapStateToProps(state, ownProps) {
     const CurrentLayoutName = state.Layout.CurrentLayout;
-    const Layouts = state.Layout.Layouts || [];
-    const selectedLayout = Layouts.find((l) => l.Name === CurrentLayoutName);
-    const api = ownProps.api;
+    const Layouts = state.Layout.Layouts || [GeneralConstants_1.ERROR_LAYOUT];
+    const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || GeneralConstants_1.ERROR_LAYOUT;
     return {
         CurrentLayoutName,
-        CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
+        CurrentLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout && !api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {
@@ -64,8 +79,18 @@ function mapDispatchToProps(dispatch) {
         onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
         onSaveLayout: (layout) => {
             dispatch(LayoutRedux.LayoutSave(layout));
-            // Cannot be se to null, because it needs to be up to date when it is updated
-            dispatch(GridRedux.LayoutUpdateCurrentDraft(layout));
+        },
+        showMissingLayoutsError: () => {
+            dispatch(PopupRedux.PopupShowConfirmation({
+                Header: 'Missing Layouts',
+                Msg: 'You have not defined any Layout! See the console for more details.',
+                ConfirmAction: null,
+                ConfirmButtonText: 'OK',
+                CancelButtonText: null,
+                CancelAction: null,
+                ShowInputBox: false,
+                MessageType: 'Error',
+            }));
         },
     };
 }

package/src/View/Layout/PivotDetailsPopoup.js

@@ -19,12 +19,15 @@ const PivotDetailsPopoup = (props) => {
     const { hasPivotValue, rows, rowGroups, columnId, layout, aggColumn, pivotValue, pivotColumnId, } = props.popupProps;
     let data = rows;
     const columns = React.useMemo(() => {
-        var _a;
         const getFriendlyName = (columnId) => adaptableApi.columnApi.getFriendlyNameForColumnId(columnId);
-        const pivotPreviewOptionColumn = (_a = adaptableApi.optionsApi.getLayoutOptions()) === null || _a === void 0 ? void 0 : _a.pivotPreviewColumns;
+        const pivotPreviewOptionColumn = adaptableApi.optionsApi.getLayoutOptions()?.pivotPreviewColumns;
         let pivotPreviewExtraColumns = [];
         if (typeof pivotPreviewOptionColumn === 'function') {
-            const pivotPreviewColumnsContext = Object.assign({ layout: layout, columnId: columnId }, adaptableApi.internalApi.buildBaseContext());
+            const pivotPreviewColumnsContext = {
+                layout: layout,
+                columnId: columnId,
+                ...adaptableApi.internalApi.buildBaseContext(),
+            };
             pivotPreviewExtraColumns = pivotPreviewOptionColumn(pivotPreviewColumnsContext);
         }
         else if (Array.isArray(pivotPreviewOptionColumn)) {
@@ -36,11 +39,18 @@ const PivotDetailsPopoup = (props) => {
         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);
+            columns = {
+                ...columns,
+                [aggColumn]: { field: aggColumn, header: getFriendlyName(aggColumn) },
+                [pivotColumnId]: { field: pivotColumnId, header: getFriendlyName(pivotColumnId) },
+            };
+            data = rows.filter((row) => row?.[pivotColumnId] === pivotValue);
         }
         else {
-            columns = Object.assign(Object.assign({}, columns), { [columnId]: { field: columnId, header: getFriendlyName(columnId) } });
+            columns = {
+                ...columns,
+                [columnId]: { field: columnId, header: getFriendlyName(columnId) },
+            };
         }
         const extraColumns = [];
         if (Array.isArray(rowGroups) && rowGroups.length > 0) {
@@ -49,7 +59,13 @@ const PivotDetailsPopoup = (props) => {
         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) } })), {}));
+        return {
+            ...columns,
+            ...extraColumns.reduce((acc, colId) => ({
+                ...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: {

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
-export declare const TransposedPopup: (props: WindowPopupChildProps) => JSX.Element;
+export declare const TransposedPopup: (props: WindowPopupChildProps) => React.JSX.Element;

package/src/View/Layout/TransposedPopup.js

@@ -24,8 +24,7 @@ const TransposedPopup = (props) => {
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
     const [syntheticTransposedByColumnId, doSetSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
     const setSyntheticTransposedByColumnId = (syntheticTransposedByColumnId) => {
-        var _a;
-        (_a = transposedAdaptableApiRef.current) === null || _a === void 0 ? void 0 : _a.destroy({ unmount: true, destroyAgGrid: true });
+        transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
         doSetSyntheticTransposedByColumnId(syntheticTransposedByColumnId);
     };
     const transposedAdaptableApiRef = React.useRef(null);
@@ -104,10 +103,6 @@ const TransposedPopup = (props) => {
             entitlementOptions: {
                 defaultAccessLevel: 'Hidden',
             },
-            layoutOptions: {
-                createDefaultLayout: false,
-                autoSizeColumnsInLayout: autosize,
-            },
             predefinedConfig: {
                 Layout: {
                     Revision: Date.now(),
@@ -115,13 +110,14 @@ const TransposedPopup = (props) => {
                     Layouts: [
                         {
                             Name: 'TransposedView',
-                            Columns: [
+                            TableColumns: [
                                 transposedFirstColumnHeader,
                                 ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
                             ],
-                            PinnedColumnsMap: {
+                            ColumnPinning: {
                                 [transposedFirstColumnHeader]: 'left',
                             },
+                            AutoSizeColumns: true
                         },
                     ],
                 },
@@ -131,11 +127,11 @@ const TransposedPopup = (props) => {
             },
         };
         const firstColumn = {
-            field: transposedFirstColumnHeader,
+            field: transposedFirstColumnHeader, // use the column friendly name
             headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
         };
         const agGridOptions = {
-            suppressLoadingOverlay: true,
+            loading: false,
             defaultColDef: {
                 floatingFilter: false,
                 filter: false,
@@ -175,8 +171,7 @@ const TransposedPopup = (props) => {
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
             adaptableApi.eventApi.on('ThemeChanged', (event) => {
-                var _a;
-                (_a = transposedAdaptableApiRef.current) === null || _a === void 0 ? void 0 : _a.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+                transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
         });
     }, [syntheticTransposedByColumnId]);
@@ -184,8 +179,7 @@ const TransposedPopup = (props) => {
         // destroy when closing the popup
         return () => {
             requestAnimationFrame(() => {
-                var _a;
-                (_a = transposedAdaptableApiRef.current) === null || _a === void 0 ? void 0 : _a.destroy({ unmount: true, destroyAgGrid: true });
+                transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
             });
         };
     }, []);

package/src/View/Layout/Wizard/Components/ColumnLabels.d.ts

@@ -6,4 +6,4 @@ export declare const ColumnLabels: (props: AdaptableColumnProperties & {
     flexDirection?: 'row' | 'column';
     showBoth?: boolean;
     showTitle?: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;