@adaptabletools/adaptable 19.2.3 → 20.0.0-canary.0

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -1,28 +1,27 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { GridFilterModuleId, NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useAdaptable } from '../AdaptableContext';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 export const useGridFilterExpressionEditor = () => {
-    var _a, _b, _c;
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const currentLayout = 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 = useSelector((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
-    const cachedQueries = (_b = 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 = useSelector((state) => state.NamedQuery.NamedQueries) ?? [];
+    const cachedQueries = 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();
@@ -32,11 +31,10 @@ export 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()
@@ -53,14 +51,14 @@ export const useGridFilterExpressionEditor = () => {
         };
     });
     const clearQuery = () => {
-        adaptable.api.gridFilterApi.clearGridFilter();
+        adaptable.api.filterApi.gridFilterApi.clearGridFilter();
         setExpression('');
     };
     const runQuery = (newExpression = expression) => {
         if (StringExtensions.IsNullOrEmpty(newExpression) &&
-            StringExtensions.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
+            StringExtensions.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
@@ -77,7 +75,7 @@ export const useGridFilterExpressionEditor = () => {
                 onAddCachedQuery(cachedQuery);
             }
         }
-        adaptable.api.gridFilterApi.setGridFilterExpression(newExpression);
+        adaptable.api.filterApi.gridFilterApi.setGridFilterExpression(newExpression);
     };
     const gridFilterAccessLevel = React.useMemo(() => {
         return adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(GridFilterModuleId);
@@ -95,10 +93,10 @@ export 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,
@@ -116,12 +114,12 @@ export 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

@@ -1,7 +1,7 @@
 import { useAdaptable } from '../AdaptableContext';
 export const useGridFilterOptionsForExpressionEditorProps = () => {
     const adaptable = 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

@@ -9,16 +9,15 @@ export const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(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(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, { items: items, module: module })));
+            items?.length && React.createElement(AdaptableObjectList, { items: items, module: module })));
     })));
 };

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

@@ -12,27 +12,27 @@ import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
 const version = ADAPTABLE_VERSION;
 export 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.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.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
@@ -40,13 +40,19 @@ export 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.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+            ? ArrayExtensions.createCommaSeparatedString(calcColumns)
+            : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+            ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
+            : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+            ? ArrayExtensions.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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { Text } from 'rebass';
 export const KeyHint = (props) => {
-    return React.createElement(Text, Object.assign({ fontSize: 1, color: "inputcolor" }, props));
+    return React.createElement(Text, { fontSize: 1, color: "inputcolor", ...props });
 };

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
+import { isPivotLayout } from '../../Utilities/isPivotLayout';
 export const EditCurrentLayoutButton = () => {
     const adaptable = useAdaptable();
     const handleClick = React.useCallback(() => {
-        adaptable.api.layoutApi.showLayoutEditor();
+        const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+        const layoutName = currentLayout.Name;
+        const type = isPivotLayout(currentLayout) ? 'pivot' : 'table';
+        adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
     return React.createElement(SimpleButton, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
+import { isPivotLayout } from '../../Utilities/isPivotLayout';
 export const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = useAdaptable();
     const isDisabled = accessLevel === 'ReadOnly';
     const handleClick = React.useCallback(() => {
-        adaptable.api.layoutApi.showLayoutEditor(data.Name, 'Clone');
+        adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
+    return (React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
 };

package/src/View/Layout/LayoutRadioSelector.js

@@ -5,7 +5,7 @@ export const LayoutRadioSelector = ({ data }) => {
     const adaptable = 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

@@ -1,58 +1,73 @@
 import * as React from 'react';
+import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
 import { Flex } from 'rebass';
+import isEqual from 'lodash/isEqual';
 import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
-import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { ButtonClone } from '../Components/Buttons/ButtonClone';
 import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
-import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
+import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
+import { isPivotLayout } from '../../Utilities/isPivotLayout';
+import DropdownButton from '../../components/DropdownButton';
+import { Icon } from '../../components/icons';
 export const 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.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(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
-                React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
-            React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
-                isManualSaveLayout && (React.createElement(ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
-                React.createElement(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, { 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, { 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 && isEqual(Layouts[0], 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.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(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
+            React.createElement(Select, { disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
+        React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
+            React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
+            React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
+            React.createElement(DropdownButton, { variant: "text", tooltip: 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(Icon, { name: "plus" })),
+            React.createElement(ButtonDelete, { tooltip: 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 || [ERROR_LAYOUT];
+    const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || ERROR_LAYOUT;
     return {
         CurrentLayoutName,
-        CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
+        CurrentLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout && !api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {
@@ -60,9 +75,19 @@ 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',
+            }));
         },
     };
 }
-export let LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);
+export const LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);

package/src/View/Layout/PivotDetailsPopoup.js

@@ -15,12 +15,15 @@ export 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)) {
@@ -32,11 +35,18 @@ export 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) {
@@ -45,7 +55,13 @@ export 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(DataSource, { data: data, primaryKey: columnId },
         React.createElement(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

@@ -20,8 +20,7 @@ export 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);
@@ -100,10 +99,6 @@ export const TransposedPopup = (props) => {
             entitlementOptions: {
                 defaultAccessLevel: 'Hidden',
             },
-            layoutOptions: {
-                createDefaultLayout: false,
-                autoSizeColumnsInLayout: autosize,
-            },
             predefinedConfig: {
                 Layout: {
                     Revision: Date.now(),
@@ -111,13 +106,14 @@ export const TransposedPopup = (props) => {
                     Layouts: [
                         {
                             Name: 'TransposedView',
-                            Columns: [
+                            TableColumns: [
                                 transposedFirstColumnHeader,
                                 ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
                             ],
-                            PinnedColumnsMap: {
+                            ColumnPinning: {
                                 [transposedFirstColumnHeader]: 'left',
                             },
+                            AutoSizeColumns: true
                         },
                     ],
                 },
@@ -127,11 +123,11 @@ export 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,
@@ -171,8 +167,7 @@ export 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]);
@@ -180,8 +175,7 @@ export 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;

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

@@ -1,9 +1,8 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { Flex, Text } from 'rebass';
 import { useAdaptable } from '../../../AdaptableContext';
 export const ColumnLabels = (props) => {
-    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = __rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
+    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp, ...columnProperties } = props;
     const labelNames = [
         'Aggregatable',
         'Filterable',
@@ -16,7 +15,7 @@ export const ColumnLabels = (props) => {
     const flexProps = {
         [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
     };
-    return (React.createElement(Flex, Object.assign({ className: "ab-LayoutEditor__Legend", flexDirection: flexDirection }, flexProps, { width: "100%" }),
+    return (React.createElement(Flex, { className: "ab-LayoutEditor__Legend", flexDirection: flexDirection, ...flexProps, width: "100%" },
         showTitle ? (React.createElement(Text, { mr: 2 }, useAdaptable().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
         labels.map((l, index) => {
             const enabled = !!l;