@xh/hoist 71.0.0-SNAPSHOT.1734118787755 → 71.0.0-SNAPSHOT.1734551243081

package/CHANGELOG.md

@@ -9,6 +9,7 @@
   * Handle delete and update collisions more gracefully.
   * Support for `settleTime`,
   * Improved management UI Dialog.
+  * Support for "global" views.
 * New `SessionStorageService` and associated persistence provider provides support for saving
   tab local data across reloads.
 

package/build/types/cmp/viewmanager/ViewManagerModel.d.ts

@@ -14,6 +14,11 @@ export interface ViewManagerConfig {
      * in advance, so that there is a clear initial selection for users without any private views.
      */
     enableDefault?: boolean;
+    /**
+     * True (default) to enable "global" views - i.e. views that are not owned by a user and are
+     * available to all.
+     */
+    enableGlobal?: boolean;
     /**
      * True (default) to allow users to share their views with other users.
      */
@@ -101,6 +106,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
+    readonly enableGlobal: boolean;
     readonly enableSharing: boolean;
     readonly manageGlobal: boolean;
     readonly settleTime: number;
@@ -173,6 +179,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
     userUnpin(view: ViewInfo): void;
     isUserPinned(view: ViewInfo): boolean | null;
     validateViewNameAsync(name: string, existing?: ViewInfo): Promise<string>;
+    deleteViewsAsync(toDelete: ViewInfo[]): Promise<void>;
     private initAsync;
     private loadViewAsync;
     private maybeAutoSaveAsync;

package/build/types/cmp/viewmanager/ViewToBlobApi.d.ts

@@ -35,8 +35,7 @@ export declare class ViewToBlobApi<T> {
     makeViewGlobalAsync(view: ViewInfo): Promise<View<T>>;
     /** Update a view's value. */
     updateViewValueAsync(view: View<T>, value: Partial<T>): Promise<View<T>>;
-    /** Delete a view. */
-    deleteViewAsync(view: ViewInfo): Promise<void>;
+    deleteViewsAsync(views: ViewInfo[]): Promise<void>;
     private trackChange;
     private ensureEditable;
 }

package/build/types/desktop/cmp/viewmanager/ViewManagerLocalModel.d.ts

@@ -6,5 +6,6 @@ export declare class ViewManagerLocalModel extends HoistModel {
     readonly parent: ViewManagerModel;
     readonly manageDialogModel: ManageDialogModel;
     readonly saveAsDialogModel: SaveAsDialogModel;
+    isVisible: boolean;
     constructor(parent: ViewManagerModel);
 }

package/build/types/desktop/cmp/viewmanager/dialog/ManageDialog.d.ts

@@ -1,6 +1,7 @@
 import { GridModel } from '@xh/hoist/cmp/grid';
+import { ManageDialogModel } from './ManageDialogModel';
 /**
  * Default management dialog for ViewManager.
  */
-export declare const manageDialog: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<any>>;
+export declare const manageDialog: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ManageDialogModel>>;
 export declare const viewsGrid: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<GridModel>>;

package/build/types/desktop/cmp/viewmanager/dialog/ManageDialogModel.d.ts

@@ -21,10 +21,6 @@ export declare class ManageDialogModel extends HoistModel {
     get gridModel(): GridModel;
     get selectedView(): ViewInfo;
     get selectedViews(): ViewInfo[];
-    get manageGlobal(): boolean;
-    get typeDisplayName(): string;
-    get globalDisplayName(): string;
-    get enableSharing(): boolean;
     constructor(viewManagerModel: ViewManagerModel);
     open(): void;
     close(): void;

package/build/types/desktop/cmp/viewmanager/dialog/ViewMultiPanel.d.ts

@@ -1 +1,2 @@
-export declare const viewMultiPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<any>>;
+import { ManageDialogModel } from './ManageDialogModel';
+export declare const viewMultiPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ManageDialogModel>>;

package/cmp/viewmanager/ViewManagerModel.ts

@@ -21,10 +21,11 @@ import {
 import type {ViewManagerProvider} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
 import {fmtDateTime} from '@xh/hoist/format';
-import {action, bindable, makeObservable, observable, runInAction, when} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable, when} from '@xh/hoist/mobx';
 import {olderThan, SECONDS} from '@xh/hoist/utils/datetime';
 import {executeIfFunction, pluralize, throwIf} from '@xh/hoist/utils/js';
 import {find, isEmpty, isEqual, isNil, isObject, lowerCase, pickBy} from 'lodash';
+import {runInAction} from 'mobx';
 import {ReactNode} from 'react';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
@@ -43,6 +44,12 @@ export interface ViewManagerConfig {
      */
     enableDefault?: boolean;
 
+    /**
+     * True (default) to enable "global" views - i.e. views that are not owned by a user and are
+     * available to all.
+     */
+    enableGlobal?: boolean;
+
     /**
      * True (default) to allow users to share their views with other users.
      */
@@ -145,6 +152,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
+    readonly enableGlobal: boolean;
     readonly enableSharing: boolean;
     readonly manageGlobal: boolean;
     readonly settleTime: number;
@@ -216,13 +224,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     get isViewAutoSavable(): boolean {
         const {enableAutoSave, autoSave, view} = this;
-        return (
-            enableAutoSave &&
-            autoSave &&
-            !view.isShared &&
-            !view.isDefault &&
-            !XH.identityService.isImpersonating
-        );
+        return enableAutoSave && autoSave && view.isOwned && !XH.identityService.isImpersonating;
     }
 
     get autoSaveUnavailableReason(): string {
@@ -272,6 +274,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         manageGlobal = false,
         enableAutoSave = true,
         enableDefault = true,
+        enableGlobal = true,
         enableSharing = true,
         settleTime = 1000,
         initialViewSpec = null
@@ -290,6 +293,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.persistWith = persistWith;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
         this.enableDefault = enableDefault;
+        this.enableGlobal = enableGlobal;
         this.enableSharing = enableSharing;
         this.enableAutoSave = enableAutoSave;
         this.settleTime = settleTime;
@@ -438,6 +442,24 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         return null;
     }
 
+    async deleteViewsAsync(toDelete: ViewInfo[]): Promise<void> {
+        let exception;
+        try {
+            await this.api.deleteViewsAsync(toDelete);
+        } catch (e) {
+            exception = e;
+        }
+
+        await this.refreshAsync();
+        const {views} = this;
+
+        if (toDelete.some(view => view.isCurrentView) && !views.some(view => view.isCurrentView)) {
+            await this.loadViewAsync(this.initialViewSpec?.(views));
+        }
+
+        if (exception) throw exception;
+    }
+
     //------------------
     // Implementation
     //------------------

package/cmp/viewmanager/ViewToBlobApi.ts

@@ -7,7 +7,7 @@
 
 import {PlainObject, XH} from '@xh/hoist/core';
 import {pluralize, throwIf} from '@xh/hoist/utils/js';
-import {omit, pick} from 'lodash';
+import {isEmpty, omit, pick} from 'lodash';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
 import {ViewManagerModel} from './ViewManagerModel';
@@ -50,7 +50,13 @@ export class ViewToBlobApi<T> {
                 type: model.type,
                 includeValue: false
             });
-            return blobs.map(b => new ViewInfo(b, model));
+            return blobs
+                .map(b => new ViewInfo(b, model))
+                .filter(
+                    view =>
+                        (model.enableGlobal || !view.isGlobal) &&
+                        (model.enableSharing || !view.isShared)
+                );
         } catch (e) {
             throw XH.exception({
                 message: `Unable to fetch ${pluralize(model.typeDisplayName)}`,
@@ -151,21 +157,31 @@ export class ViewToBlobApi<T> {
         }
     }
 
-    /** Delete a view. */
-    async deleteViewAsync(view: ViewInfo) {
-        try {
-            this.ensureEditable(view);
-            await XH.jsonBlobService.archiveAsync(view.token);
-            this.trackChange('Deleted View', view);
-        } catch (e) {
-            throw XH.exception({message: `Unable to delete ${view.typedName}`, cause: e});
+    async deleteViewsAsync(views: ViewInfo[]) {
+        views.forEach(v => this.ensureEditable(v));
+        const results = await Promise.allSettled(
+                views.map(v => XH.jsonBlobService.archiveAsync(v.token))
+            ),
+            outcome = results.map((result, idx) => ({result, view: views[idx]})),
+            failed = outcome.filter(({result}) => result.status === 'rejected') as Array<{
+                result: PromiseRejectedResult;
+                view: ViewInfo;
+            }>;
+
+        this.trackChange(`Deleted ${pluralize('View', views.length - failed.length, true)}`);
+
+        if (!isEmpty(failed)) {
+            throw XH.exception({
+                message: `Failed to delete ${pluralize(this.model.typeDisplayName, failed.length, true)}: ${failed.map(({view}) => view.name).join(', ')}`,
+                cause: failed.map(({result}) => result.reason)
+            });
         }
     }
 
     //------------------
     // Implementation
     //------------------
-    private trackChange(message: string, v: View | ViewInfo) {
+    private trackChange(message: string, v?: View | ViewInfo) {
         XH.track({
             message,
             category: 'Views',

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -12,6 +12,7 @@ import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import {popover} from '@xh/hoist/kit/blueprint';
+import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import {startCase} from 'lodash';
 import {viewMenu} from './ViewMenu';
 import {ViewManagerLocalModel} from './ViewManagerLocalModel';
@@ -67,6 +68,7 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
             save = saveButton({model: locModel, mode: showSaveButton, ...saveButtonProps}),
             revert = revertButton({model: locModel, mode: showRevertButton, ...revertButtonProps}),
             menu = popover({
+                disabled: !locModel.isVisible, // Prevent orphaned popover menu
                 item: menuButton({model: locModel, ...menuButtonProps}),
                 content: viewMenu({model: locModel}),
                 placement: 'bottom-start',
@@ -75,7 +77,8 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
         return fragment(
             hbox({
                 className,
-                items: buttonSide == 'left' ? [revert, save, menu] : [menu, save, revert]
+                items: buttonSide == 'left' ? [revert, save, menu] : [menu, save, revert],
+                ref: useOnVisibleChange(isVisible => (locModel.isVisible = isVisible))
             }),
             manageDialog({model: locModel.manageDialogModel}),
             saveAsDialog({model: locModel.saveAsDialogModel})

package/desktop/cmp/viewmanager/ViewManagerLocalModel.ts

@@ -6,6 +6,7 @@
  */
 
 import {HoistModel, managed} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {ManageDialogModel} from './dialog/ManageDialogModel';
 import {SaveAsDialogModel} from './dialog/SaveAsDialogModel';
 import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
@@ -19,8 +20,12 @@ export class ViewManagerLocalModel extends HoistModel {
     @managed
     readonly saveAsDialogModel: SaveAsDialogModel;
 
+    @bindable
+    isVisible = true;
+
     constructor(parent: ViewManagerModel) {
         super();
+        makeObservable(this);
         this.parent = parent;
         this.manageDialogModel = new ManageDialogModel(parent);
         this.saveAsDialogModel = new SaveAsDialogModel(parent);

package/desktop/cmp/viewmanager/dialog/ManageDialog.ts

@@ -24,7 +24,7 @@ import {viewPanel} from './ViewPanel';
 /**
  * Default management dialog for ViewManager.
  */
-export const manageDialog = hoistCmp.factory({
+export const manageDialog = hoistCmp.factory<ManageDialogModel>({
     displayName: 'ManageDialog',
     className: 'xh-view-manager__manage-dialog',
     model: uses(() => ManageDialogModel),
@@ -32,11 +32,11 @@ export const manageDialog = hoistCmp.factory({
     render({model, className}) {
         if (!model.isOpen) return null;
 
-        const {typeDisplayName, updateTask, loadTask, selectedViews} = model,
+        const {updateTask, loadTask, selectedViews, viewManagerModel} = model,
             count = selectedViews.length;
 
         return dialog({
-            title: `Manage ${capitalize(pluralize(typeDisplayName))}`,
+            title: `Manage ${capitalize(pluralize(viewManagerModel.typeDisplayName))}`,
             icon: Icon.gear(),
             className,
             isOpen: true,
@@ -103,7 +103,7 @@ export const viewsGrid = hoistCmp.factory<GridModel>({
 
 const placeholderPanel = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
-        return placeholder(Icon.gears(), `Select a ${model.typeDisplayName}`);
+        return placeholder(Icon.gears(), `Select a ${model.viewManagerModel.typeDisplayName}`);
     }
 });
 

package/desktop/cmp/viewmanager/dialog/ManageDialogModel.ts

@@ -17,7 +17,7 @@ import {viewsGrid} from '@xh/hoist/desktop/cmp/viewmanager/dialog/ManageDialog';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
-import {capitalize, isEmpty, some, startCase} from 'lodash';
+import {capitalize, compact, isEmpty, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
 import {ViewPanelModel} from './ViewPanelModel';
 
@@ -67,22 +67,6 @@ export class ManageDialogModel extends HoistModel {
         return this.gridModel.selectedRecords.map(it => it.data.view) as ViewInfo[];
     }
 
-    get manageGlobal(): boolean {
-        return this.viewManagerModel.manageGlobal;
-    }
-
-    get typeDisplayName(): string {
-        return this.viewManagerModel.typeDisplayName;
-    }
-
-    get globalDisplayName(): string {
-        return this.viewManagerModel.globalDisplayName;
-    }
-
-    get enableSharing(): boolean {
-        return this.viewManagerModel.enableSharing;
-    }
-
     constructor(viewManagerModel: ViewManagerModel) {
         super();
         makeObservable(this);
@@ -108,15 +92,22 @@ export class ManageDialogModel extends HoistModel {
 
     override async doLoadAsync(loadSpec: LoadSpec) {
         const {tabContainerModel} = this,
-            {view, ownedViews, globalViews, sharedViews} = this.viewManagerModel;
+            {enableGlobal, enableSharing, view, ownedViews, globalViews, sharedViews} =
+                this.viewManagerModel;
 
         runInAction(() => {
             this.ownedGridModel.loadData(ownedViews);
-            this.globalGridModel.loadData(globalViews);
-            this.sharedGridModel.loadData(sharedViews);
             tabContainerModel.setTabTitle('owned', this.ownedTabTitle);
-            tabContainerModel.setTabTitle('global', this.globalTabTitle);
-            tabContainerModel.setTabTitle('shared', this.sharedTabTitle);
+
+            if (enableGlobal) {
+                this.globalGridModel.loadData(globalViews);
+                tabContainerModel.setTabTitle('global', this.globalTabTitle);
+            }
+
+            if (enableSharing) {
+                this.sharedGridModel.loadData(sharedViews);
+                tabContainerModel.setTabTitle('shared', this.sharedTabTitle);
+            }
         });
         if (!loadSpec.isRefresh && !view.isDefault) {
             await this.selectViewAsync(view.info);
@@ -145,27 +136,39 @@ export class ManageDialogModel extends HoistModel {
     // Implementation
     //------------------------
     private init() {
+        const {enableGlobal, enableSharing} = this.viewManagerModel;
+
         this.ownedGridModel = this.createGridModel('owned');
-        this.globalGridModel = this.createGridModel('global');
-        this.sharedGridModel = this.createGridModel('shared');
+        if (enableGlobal) this.globalGridModel = this.createGridModel('global');
+        if (enableSharing) this.sharedGridModel = this.createGridModel('shared');
+        const gridModels = compact([
+            this.ownedGridModel,
+            this.globalGridModel,
+            this.sharedGridModel
+        ]);
+
         this.tabContainerModel = this.createTabContainerModel();
         this.viewPanelModel = new ViewPanelModel(this);
-        const gridModels = [this.ownedGridModel, this.globalGridModel, this.sharedGridModel];
+
         this.addReaction({
             track: () => this.filter,
             run: f => gridModels.forEach(m => m.store.setFilter(f)),
             fireImmediately: true
         });
-        gridModels.forEach(gm => {
-            this.addReaction({
-                track: () => gm.hasSelection,
-                run: hasSelection => {
-                    gridModels.forEach(it => {
-                        if (it != gm && hasSelection) it.clearSelection();
-                    });
-                }
+
+        // Only allow one selection at a time across all grids
+        if (gridModels.length > 1) {
+            gridModels.forEach(gm => {
+                this.addReaction({
+                    track: () => gm.hasSelection,
+                    run: hasSelection => {
+                        gridModels.forEach(it => {
+                            if (it != gm && hasSelection) it.clearSelection();
+                        });
+                    }
+                });
             });
-        });
+        }
     }
 
     private async doUpdateAsync(view: ViewInfo, update: ViewUpdateSpec) {
@@ -176,7 +179,8 @@ export class ManageDialogModel extends HoistModel {
     }
 
     private async doDeleteAsync(views: ViewInfo[]) {
-        const {viewManagerModel, typeDisplayName} = this,
+        const {viewManagerModel} = this,
+            {typeDisplayName} = viewManagerModel,
             count = views.length;
 
         if (!count) return;
@@ -208,12 +212,7 @@ export class ManageDialogModel extends HoistModel {
         });
         if (!confirmed) return;
 
-        for (const view of views) {
-            await viewManagerModel.api.deleteViewAsync(view);
-        }
-
-        await viewManagerModel.refreshAsync();
-        await this.refreshAsync();
+        return viewManagerModel.deleteViewsAsync(views).finally(() => this.refreshAsync());
     }
 
     private async doMakeGlobalAsync(view: ViewInfo) {
@@ -250,7 +249,7 @@ export class ManageDialogModel extends HoistModel {
     }
 
     private createGridModel(type: 'owned' | 'global' | 'shared'): GridModel {
-        const {typeDisplayName, globalDisplayName} = this;
+        const {typeDisplayName, globalDisplayName} = this.viewManagerModel;
 
         const modifier =
             type == 'owned' ? `personal` : type == 'global' ? globalDisplayName : 'shared';
@@ -320,13 +319,12 @@ export class ManageDialogModel extends HoistModel {
     }
 
     private createTabContainerModel(): TabContainerModel {
-        const view = this.typeDisplayName,
+        const {enableGlobal, enableSharing, globalDisplayName, typeDisplayName} =
+                this.viewManagerModel,
+            view = typeDisplayName,
             views = pluralize(view),
-            globalViews = `${this.globalDisplayName} ${views}`,
-            {enableSharing} = this.viewManagerModel;
-
-        return new TabContainerModel({
-            tabs: [
+            globalViews = `${globalDisplayName} ${views}`,
+            tabs = [
                 {
                     id: 'owned',
                     title: this.ownedTabTitle,
@@ -340,50 +338,58 @@ export class ManageDialogModel extends HoistModel {
                                 : ''
                         )
                     })
-                },
-                {
-                    id: 'global',
-                    title: this.globalTabTitle,
-                    content: viewsGrid({
-                        model: this.globalGridModel,
-                        helpText: fragment(
-                            Icon.globe(),
-                            `This tab shows ${globalViews} available to everyone. ${capitalize(globalViews)} can be pinned by default so they appear automatically in everyone's menu, but you can choose which ${views} you would like to see by pinning/unpinning them at any time.`
-                        )
-                    })
-                },
-                {
-                    id: 'shared',
-                    title: this.sharedTabTitle,
-                    content: viewsGrid({
-                        model: this.sharedGridModel,
-                        helpText: fragment(
-                            Icon.users(),
-                            `This tab shows ${views} shared by other ${XH.appName} users. You can pin these ${views} to add them to your menu and access them directly. Only the owner will be able to save changes to a shared ${view}, but you can save as a copy to make it your own.`
-                        )
-                    })
                 }
-            ]
-        });
+            ];
+
+        if (enableGlobal) {
+            tabs.push({
+                id: 'global',
+                title: this.globalTabTitle,
+                content: viewsGrid({
+                    model: this.globalGridModel,
+                    helpText: fragment(
+                        Icon.globe(),
+                        `This tab shows ${globalViews} available to everyone. ${capitalize(globalViews)} can be pinned by default so they appear automatically in everyone's menu, but you can choose which ${views} you would like to see by pinning/unpinning them at any time.`
+                    )
+                })
+            });
+        }
+
+        if (enableSharing) {
+            tabs.push({
+                id: 'shared',
+                title: this.sharedTabTitle,
+                content: viewsGrid({
+                    model: this.sharedGridModel,
+                    helpText: fragment(
+                        Icon.users(),
+                        `This tab shows ${views} shared by other ${XH.appName} users. You can pin these ${views} to add them to your menu and access them directly. Only the owner will be able to save changes to a shared ${view}, but you can save as a copy to make it your own.`
+                    )
+                })
+            });
+        }
+
+        return new TabContainerModel({tabs});
     }
 
     private get ownedTabTitle(): ReactNode {
         return hbox(
-            `My ${startCase(pluralize(this.typeDisplayName))}`,
+            `My ${startCase(pluralize(this.viewManagerModel.typeDisplayName))}`,
             badge(this.ownedGridModel.store.allCount)
         );
     }
 
     private get globalTabTitle(): ReactNode {
+        const {globalDisplayName, typeDisplayName} = this.viewManagerModel;
         return hbox(
-            `${startCase(this.globalDisplayName)} ${startCase(pluralize(this.typeDisplayName))}`,
+            `${startCase(globalDisplayName)} ${startCase(pluralize(typeDisplayName))}`,
             badge(this.globalGridModel.store.allCount)
         );
     }
 
     private get sharedTabTitle(): ReactNode {
         return hbox(
-            `Shared ${startCase(pluralize(this.typeDisplayName))}`,
+            `Shared ${startCase(pluralize(this.viewManagerModel.typeDisplayName))}`,
             badge(this.sharedGridModel.store.allCount)
         );
     }

package/desktop/cmp/viewmanager/dialog/ViewMultiPanel.ts

@@ -14,7 +14,7 @@ import {pluralize} from '@xh/hoist/utils/js';
 import {every, isEmpty, some} from 'lodash';
 import {ManageDialogModel} from './ManageDialogModel';
 
-export const viewMultiPanel = hoistCmp.factory({
+export const viewMultiPanel = hoistCmp.factory<ManageDialogModel>({
     model: uses(() => ManageDialogModel),
     render({model}) {
         const views = model.selectedViews;
@@ -25,7 +25,7 @@ export const viewMultiPanel = hoistCmp.factory({
                 className: 'xh-view-manager__manage-dialog__form',
                 item: placeholder(
                     Icon.gears(),
-                    `${views.length} selected ${pluralize(model.typeDisplayName)}`,
+                    `${views.length} selected ${pluralize(model.viewManagerModel.typeDisplayName)}`,
                     vspacer(),
                     buttons()
                 )