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

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -7,13 +7,14 @@
 
 import {box, fragment, hbox} from '@xh/hoist/cmp/layout';
 import {spinner} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistProps, uses} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, useLocalModel, uses} from '@xh/hoist/core';
 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 {startCase} from 'lodash';
 import {viewMenu} from './ViewMenu';
+import {ViewManagerLocalModel} from './ViewManagerLocalModel';
 import {manageDialog} from './dialog/ManageDialog';
 import {saveAsDialog} from './dialog/SaveAsDialog';
 
@@ -39,10 +40,6 @@ export interface ViewManagerProps extends HoistProps<ViewManagerModel> {
     showRevertButton?: ViewManagerStateButtonMode;
     /** Side the save and revert buttons should appear on (default 'right') */
     buttonSide?: 'left' | 'right';
-    /** True to render private views in sub-menu (Default false) */
-    showPrivateViewsInSubMenu?: boolean;
-    /** True to render global views in sub-menu (Default false) */
-    showGlobalViewsInSubMenu?: boolean;
 }
 
 /**
@@ -64,15 +61,14 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
         revertButtonProps,
         showSaveButton = 'whenDirty',
         showRevertButton = 'never',
-        buttonSide = 'right',
-        showPrivateViewsInSubMenu = false,
-        showGlobalViewsInSubMenu = false
+        buttonSide = 'right'
     }: ViewManagerProps) {
-        const save = saveButton({mode: showSaveButton, ...saveButtonProps}),
-            revert = revertButton({mode: showRevertButton, ...revertButtonProps}),
+        const locModel = useLocalModel(() => new ViewManagerLocalModel(model)),
+            save = saveButton({model: locModel, mode: showSaveButton, ...saveButtonProps}),
+            revert = revertButton({model: locModel, mode: showRevertButton, ...revertButtonProps}),
             menu = popover({
-                item: menuButton(menuButtonProps),
-                content: viewMenu({showPrivateViewsInSubMenu, showGlobalViewsInSubMenu}),
+                item: menuButton({model: locModel, ...menuButtonProps}),
+                content: viewMenu({model: locModel}),
                 placement: 'bottom-start',
                 popoverClassName: 'xh-view-manager__popover'
             });
@@ -81,15 +77,15 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
                 className,
                 items: buttonSide == 'left' ? [revert, save, menu] : [menu, save, revert]
             }),
-            manageDialog({omit: !model.manageDialogOpen}),
-            saveAsDialog()
+            manageDialog({model: locModel.manageDialogModel}),
+            saveAsDialog({model: locModel.saveAsDialogModel})
         );
     }
 });
 
-const menuButton = hoistCmp.factory<ViewManagerModel>({
+const menuButton = hoistCmp.factory<ViewManagerLocalModel>({
     render({model, ...rest}) {
-        const {view, typeDisplayName, isLoading} = model;
+        const {view, typeDisplayName, isLoading} = model.parent;
         return button({
             className: 'xh-view-manager__menu-button',
             text: view.isDefault ? `Default ${startCase(typeDisplayName)}` : view.name,
@@ -106,40 +102,46 @@ const menuButton = hoistCmp.factory<ViewManagerModel>({
     }
 });
 
-const saveButton = hoistCmp.factory<ViewManagerModel>({
+const saveButton = hoistCmp.factory<ViewManagerLocalModel>({
     render({model, mode, ...rest}) {
         if (hideStateButton(model, mode)) return null;
+        const {parent, saveAsDialogModel} = model,
+            {typeDisplayName, isLoading, isValueDirty} = parent;
         return button({
             className: 'xh-view-manager__save-button',
             icon: Icon.save(),
-            tooltip: `Save changes to this ${model.typeDisplayName}`,
+            tooltip: `Save changes to this ${typeDisplayName}`,
             intent: 'primary',
-            disabled: !model.isValueDirty || model.isLoading,
+            disabled: !isValueDirty || isLoading,
             onClick: () => {
-                model.isViewSavable ? model.saveAsync() : model.saveAsAsync();
+                parent.isViewSavable ? parent.saveAsync() : saveAsDialogModel.open();
             },
             ...rest
         });
     }
 });
 
-const revertButton = hoistCmp.factory<ViewManagerModel>({
+const revertButton = hoistCmp.factory<ViewManagerLocalModel>({
     render({model, mode, ...rest}) {
         if (hideStateButton(model, mode)) return null;
+        const {typeDisplayName, isLoading, isValueDirty} = model.parent;
         return button({
             className: 'xh-view-manager__revert-button',
             icon: Icon.reset(),
-            tooltip: `Revert changes to this ${model.typeDisplayName}`,
+            tooltip: `Revert changes to this ${typeDisplayName}`,
             intent: 'danger',
-            disabled: !model.isValueDirty || model.isLoading,
-            onClick: () => model.resetAsync(),
+            disabled: !isValueDirty || isLoading,
+            onClick: () => model.parent.resetAsync(),
             ...rest
         });
     }
 });
 
-function hideStateButton(model: ViewManagerModel, mode: ViewManagerStateButtonMode): boolean {
+function hideStateButton(model: ViewManagerLocalModel, mode: ViewManagerStateButtonMode): boolean {
+    const {parent} = model;
     return (
-        mode === 'never' || (mode === 'whenDirty' && !model.isValueDirty) || model.isViewAutoSavable
+        mode === 'never' ||
+        (mode === 'whenDirty' && !parent.isValueDirty) ||
+        parent.isViewAutoSavable
     );
 }

package/desktop/cmp/viewmanager/ViewManagerLocalModel.ts

@@ -0,0 +1,28 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+
+import {HoistModel, managed} from '@xh/hoist/core';
+import {ManageDialogModel} from './dialog/ManageDialogModel';
+import {SaveAsDialogModel} from './dialog/SaveAsDialogModel';
+import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
+
+export class ViewManagerLocalModel extends HoistModel {
+    readonly parent: ViewManagerModel;
+
+    @managed
+    readonly manageDialogModel: ManageDialogModel;
+
+    @managed
+    readonly saveAsDialogModel: SaveAsDialogModel;
+
+    constructor(parent: ViewManagerModel) {
+        super();
+        this.parent = parent;
+        this.manageDialogModel = new ManageDialogModel(parent);
+        this.saveAsDialogModel = new SaveAsDialogModel(parent);
+    }
+}

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {box, div, filler, fragment, hbox, span} from '@xh/hoist/cmp/layout';
+import {box} from '@xh/hoist/cmp/layout';
 import {spinner} from '@xh/hoist/cmp/spinner';
 import {hoistCmp} from '@xh/hoist/core';
 import {ViewManagerModel, ViewInfo} from '@xh/hoist/cmp/viewmanager';
@@ -14,188 +14,181 @@ import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
 import {wait} from '@xh/hoist/promise';
 import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
-import {isEmpty, startCase} from 'lodash';
+import {Dictionary} from 'express-serve-static-core';
+import {each, filter, groupBy, isEmpty, orderBy, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
-import {ViewManagerProps} from './ViewManager';
+import {ViewManagerLocalModel} from './ViewManagerLocalModel';
 
 /**
  * Default Menu used by ViewManager.
  */
-export const viewMenu = hoistCmp.factory<ViewManagerProps>({
-    render({model, showPrivateViewsInSubMenu, showGlobalViewsInSubMenu}) {
-        const {
-            enableAutoSave,
-            autoSaveUnavailableReason,
-            autoSave,
-            enableDefault,
-            isViewSavable,
-            view,
-            typeDisplayName,
-            globalDisplayName,
-            favoriteViews,
-            views,
-            isValueDirty,
-            privateViews,
-            globalViews,
-            loadModel
-        } = model;
-
-        const pluralName = pluralize(startCase(typeDisplayName)),
-            myPluralName = `My  ${pluralName}`,
-            globalPluralName = `${startCase(globalDisplayName)}  ${pluralName}`,
-            items = [];
-        if (!isEmpty(favoriteViews)) {
-            items.push(
-                menuDivider({title: 'Favorites'}),
-                ...favoriteViews.map(info => {
-                    return menuItem({
-                        key: `${info.token}-favorite`,
-                        icon: view.token === info.token ? Icon.check() : Icon.placeholder(),
-                        text: textAndFaveToggle({info}),
-                        onClick: () => model.selectViewAsync(info),
-                        title: info.description
-                    });
-                })
-            );
-        }
-
-        if (!isEmpty(privateViews)) {
-            const privateItems = privateViews.map(it => buildMenuItem(it, model));
-            if (showPrivateViewsInSubMenu) {
-                items.push(
-                    menuDivider({omit: isEmpty(items)}),
-                    menuItem({
-                        text: myPluralName,
-                        shouldDismissPopover: false,
-                        items: privateItems
-                    })
-                );
-            } else {
-                items.push(menuDivider({title: myPluralName}), ...privateItems);
-            }
-        }
-
-        if (!isEmpty(globalViews)) {
-            const globalItems = globalViews.map(it => buildMenuItem(it, model));
-            if (showGlobalViewsInSubMenu) {
-                items.push(
-                    menuDivider({omit: isEmpty(items)}),
-                    menuItem({
-                        text: globalPluralName,
-                        shouldDismissPopover: false,
-                        items: globalItems
-                    })
-                );
-            } else {
-                items.push(menuDivider({title: globalPluralName}), ...globalItems);
-            }
-        }
-
+export const viewMenu = hoistCmp.factory<ViewManagerLocalModel>({
+    render({model}) {
         return menu({
             className: 'xh-view-manager__menu',
-            items: [
-                ...items,
-                menuDivider({omit: !enableDefault || isEmpty(items)}),
-                menuItem({
-                    icon: view.isDefault ? Icon.check() : Icon.placeholder(),
-                    text: `Default ${startCase(typeDisplayName)}`,
-                    omit: !enableDefault,
-                    onClick: () => model.selectViewAsync(null)
-                }),
-                menuDivider(),
-                menuItem({
-                    icon: Icon.save(),
-                    text: 'Save',
-                    disabled: !isViewSavable || !isValueDirty,
-                    onClick: () => model.saveAsync()
-                }),
-                menuItem({
-                    icon: Icon.placeholder(),
-                    text: 'Save As...',
-                    onClick: () => model.saveAsAsync()
-                }),
-                menuItem({
-                    icon: Icon.reset(),
-                    text: `Revert`,
-                    disabled: !isValueDirty,
-                    onClick: () => model.resetAsync()
-                }),
-                menuDivider({omit: !enableAutoSave}),
-                menuItem({
-                    omit: !enableAutoSave,
-                    text: switchInput({
-                        label: 'Auto Save',
-                        value: !autoSaveUnavailableReason && autoSave,
-                        disabled: !!autoSaveUnavailableReason,
-                        onChange: v => (model.autoSave = v),
-                        inline: true
-                    }),
-                    title: autoSaveUnavailableReason,
-                    shouldDismissPopover: false
-                }),
-                menuDivider(),
-                menuItem({
-                    icon: Icon.gear(),
-                    disabled: isEmpty(views),
-                    text: `Manage ${pluralName}...`,
-                    onClick: () => model.openManageDialog()
-                }),
-                menuItem({
-                    icon: !loadModel.isPending
-                        ? Icon.refresh()
-                        : box({
-                              height: 20,
-                              item: spinner({width: 16.25, height: 16.25})
-                          }),
-                    disabled: loadModel.isPending,
-                    text: `Refresh ${pluralName}`,
-                    onClick: e => {
-                        // Ensure at least 100ms delay to render spinner
-                        Promise.all([wait(100), model.refreshAsync()]).linkTo(loadModel);
-                        consumeEvent(e);
-                    }
-                })
-            ]
+            items: [...getNavMenuItems(model.parent), menuDivider(), ...getOtherMenuItems(model)]
         });
     }
 });
 
-function buildMenuItem(data: ViewInfo, model: ViewManagerModel): ReactNode {
-    const selected = data.token === model.view.token,
-        icon = selected ? Icon.check() : Icon.placeholder();
+function getNavMenuItems(model: ViewManagerModel): ReactNode[] {
+    const {enableDefault, view, typeDisplayName, globalDisplayName} = model,
+        ownedViews = groupBy(filter(model.ownedViews, 'isPinned'), 'group'),
+        globalViews = groupBy(filter(model.globalViews, 'isPinned'), 'group'),
+        sharedViews = groupBy(filter(model.sharedViews, 'isPinned'), 'owner'),
+        pluralName = pluralize(startCase(typeDisplayName)),
+        ret = [];
+
+    // Main Views items by type
+    if (!isEmpty(ownedViews)) {
+        ret.push(
+            menuDivider({title: `My ${pluralName}`}),
+            ...getGroupedMenuItems(ownedViews, model)
+        );
+    }
+    if (!isEmpty(globalViews)) {
+        ret.push(
+            menuDivider({title: `${startCase(globalDisplayName)}  ${pluralName}`}),
+            ...getGroupedMenuItems(globalViews, model)
+        );
+    }
+    if (!isEmpty(sharedViews)) {
+        ret.push(
+            menuDivider({title: `Shared ${pluralName}`}),
+            ...getGroupedMenuItems(sharedViews, model)
+        );
+    }
+
+    if (enableDefault) {
+        ret.push(
+            menuDivider({omit: isEmpty(ret)}),
+            menuItem({
+                className: 'xh-view-manager__menu-item',
+                icon: view.isDefault ? Icon.check() : Icon.placeholder(),
+                text: `Default ${startCase(typeDisplayName)}`,
+                onClick: () => model.selectViewAsync(null)
+            })
+        );
+    }
+
+    return ret;
+}
+
+function getOtherMenuItems(model: ViewManagerLocalModel): ReactNode[] {
+    const {parent} = model;
+    const {
+        enableAutoSave,
+        autoSaveUnavailableReason,
+        autoSave,
+        isViewSavable,
+        views,
+        isValueDirty,
+        loadModel,
+        typeDisplayName
+    } = parent;
+
+    const pluralName = pluralize(startCase(typeDisplayName));
+
+    return [
+        menuItem({
+            icon: Icon.save(),
+            text: 'Save',
+            disabled: !isViewSavable || !isValueDirty,
+            onClick: () => parent.saveAsync()
+        }),
+        menuItem({
+            icon: Icon.placeholder(),
+            text: 'Save As...',
+            onClick: () => model.saveAsDialogModel.open()
+        }),
+        menuItem({
+            icon: Icon.reset(),
+            text: `Revert`,
+            disabled: !isValueDirty,
+            onClick: () => parent.resetAsync()
+        }),
+        menuDivider({omit: !enableAutoSave}),
+        menuItem({
+            omit: !enableAutoSave,
+            text: switchInput({
+                label: 'Auto Save',
+                value: !autoSaveUnavailableReason && autoSave,
+                disabled: !!autoSaveUnavailableReason,
+                onChange: v => (parent.autoSave = v),
+                inline: true
+            }),
+            title: autoSaveUnavailableReason,
+            shouldDismissPopover: false
+        }),
+        menuDivider(),
+        menuItem({
+            icon: Icon.gear(),
+            disabled: isEmpty(views),
+            text: `Manage ${pluralName}...`,
+            onClick: () => model.manageDialogModel.open()
+        }),
+        menuItem({
+            icon: !loadModel.isPending
+                ? Icon.refresh()
+                : box({
+                      height: 20,
+                      item: spinner({width: 16.25, height: 16.25})
+                  }),
+            disabled: loadModel.isPending,
+            text: `Refresh ${pluralName}`,
+            onClick: e => {
+                // Ensure at least 100ms delay to render spinner
+                Promise.all([wait(100), parent.refreshAsync()]).linkTo(loadModel);
+                consumeEvent(e);
+            }
+        })
+    ];
+}
+
+function getGroupedMenuItems(
+    byGroup: Dictionary<ViewInfo[]>,
+    model: ViewManagerModel
+): ReactNode[] {
+    // Create grouped tree...
+    let nodes: (ViewInfo | {name: string; groupViews: ViewInfo[]; isSelected: boolean})[] = [],
+        selectedToken = model.view.token;
+
+    each(byGroup, (groupViews, name) => {
+        if (name != 'null') {
+            nodes.push({name, groupViews, isSelected: some(groupViews, {token: selectedToken})});
+        } else {
+            nodes.push(...groupViews);
+        }
+    });
+
+    // ...sort groups first, then alpha by name. But could easily intersperse instead
+    nodes = orderBy(nodes, [v => v instanceof ViewInfo, 'name']);
+
+    return nodes.map(n => {
+        return n instanceof ViewInfo
+            ? viewMenuItem(n, model)
+            : menuItem({
+                  text: n.name,
+                  icon: n.isSelected ? Icon.check() : Icon.placeholder(),
+                  shouldDismissPopover: false,
+                  items: n.groupViews.map(v => viewMenuItem(v, model))
+              });
+    });
+}
+
+function viewMenuItem(view: ViewInfo, model: ViewManagerModel): ReactNode {
+    const icon = view.isCurrentView ? Icon.check() : Icon.placeholder(),
+        title = [];
+
+    if (!view.isOwned && view.owner) title.push(view.owner);
+    if (view.description) title.push(view.description);
 
     return menuItem({
         className: 'xh-view-manager__menu-item',
-        key: data.token,
+        key: view.token,
+        text: view.name,
+        title: title.join(' | '),
         icon,
-        text: textAndFaveToggle({info: data}),
-        title: data.description,
-        onClick: () => model.selectViewAsync(data)
+        onClick: () => model.selectViewAsync(view)
     });
 }
-
-const textAndFaveToggle = hoistCmp.factory<ViewManagerModel>({
-    render({model, info}) {
-        const {isFavorite, name} = info;
-        return hbox({
-            alignItems: 'center',
-            items: [
-                span({style: {paddingRight: 5}, item: name}),
-                fragment({
-                    omit: !model.enableFavorites,
-                    items: [
-                        filler(),
-                        div({
-                            className: `xh-view-manager__menu-item__fave-toggle ${isFavorite ? 'xh-view-manager__menu-item__fave-toggle--active' : ''}`,
-                            item: Icon.favorite({prefix: isFavorite ? 'fas' : 'far'}),
-                            onClick: e => {
-                                consumeEvent(e);
-                                model.toggleFavorite(info.token);
-                            }
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-});

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

@@ -5,43 +5,56 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {tabContainer} from '@xh/hoist/cmp/tab';
-import {filler, hframe, placeholder} from '@xh/hoist/cmp/layout';
+import {grid, GridModel} from '@xh/hoist/cmp/grid';
+import {div, filler, hframe, placeholder, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {creates, hoistCmp} from '@xh/hoist/core';
-import {editForm} from './EditForm';
-import {ManageDialogModel} from './ManageDialogModel';
-import {button} from '@xh/hoist/desktop/cmp/button';
+import {tabContainer} from '@xh/hoist/cmp/tab';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {button, refreshButton} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {dialog} from '@xh/hoist/kit/blueprint';
 import {pluralize} from '@xh/hoist/utils/js';
 import {capitalize} from 'lodash';
+import {ManageDialogModel} from './ManageDialogModel';
+import {viewMultiPanel} from './ViewMultiPanel';
+import {viewPanel} from './ViewPanel';
 
 /**
- * Default management dialog for ViewManager
+ * Default management dialog for ViewManager.
  */
 export const manageDialog = hoistCmp.factory({
     displayName: 'ManageDialog',
     className: 'xh-view-manager__manage-dialog',
-    model: creates(ManageDialogModel),
+    model: uses(() => ManageDialogModel),
 
     render({model, className}) {
-        const {typeDisplayName, updateTask, loadTask, selectedViews} = model;
-        const count = selectedViews.length;
+        if (!model.isOpen) return null;
+
+        const {typeDisplayName, updateTask, loadTask, selectedViews} = model,
+            count = selectedViews.length;
+
         return dialog({
             title: `Manage ${capitalize(pluralize(typeDisplayName))}`,
             icon: Icon.gear(),
             className,
             isOpen: true,
-            style: {width: '800px', maxWidth: '90vm', minHeight: '430px'},
+            style: {width: '1000px', maxWidth: '90vw', minHeight: '550px'},
             canOutsideClickClose: false,
             onClose: () => model.close(),
             item: panel({
                 item: hframe(
-                    viewPanel(),
-                    count == 0 ? placeholderPanel() : count > 1 ? multiSelectionPanel() : editForm()
+                    selectorPanel(),
+                    panel({
+                        item:
+                            count == 0
+                                ? placeholderPanel()
+                                : count > 1
+                                  ? viewMultiPanel()
+                                  : viewPanel(),
+                        bbar: bbar()
+                    })
                 ),
                 mask: [updateTask, loadTask]
             })
@@ -49,16 +62,39 @@ export const manageDialog = hoistCmp.factory({
     }
 });
 
-const viewPanel = hoistCmp.factory<ManageDialogModel>({
+const selectorPanel = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
         return panel({
-            modelConfig: {defaultSize: 350, side: 'left', collapsible: false},
+            modelConfig: {defaultSize: 650, side: 'left', collapsible: false},
             item: tabContainer(),
             bbar: [
                 storeFilterField({
                     autoApply: false,
-                    includeFields: ['name'],
+                    includeFields: ['name', 'group'],
                     onFilterChange: f => (model.filter = f)
+                }),
+                filler(),
+                refreshButton({model})
+            ]
+        });
+    }
+});
+
+export const viewsGrid = hoistCmp.factory<GridModel>({
+    render({model, helpText}) {
+        return vframe({
+            paddingTop: 5,
+            items: [
+                grid({
+                    model,
+                    agOptions: {
+                        suppressMakeColumnVisibleAfterUnGroup: true
+                    }
+                }),
+                div({
+                    item: helpText,
+                    omit: !helpText,
+                    className: 'xh-view-manager__manage-dialog__help-text'
                 })
             ]
         });
@@ -67,32 +103,23 @@ const viewPanel = hoistCmp.factory<ManageDialogModel>({
 
 const placeholderPanel = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
-        return panel({
-            item: placeholder(Icon.gears(), `Select a ${model.typeDisplayName}`),
-            bbar: toolbar(filler(), button({text: 'Close', onClick: () => model.close()}))
-        });
+        return placeholder(Icon.gears(), `Select a ${model.typeDisplayName}`);
     }
 });
 
-const multiSelectionPanel = hoistCmp.factory<ManageDialogModel>({
+const bbar = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
-        const {selectedViews} = model;
-        return panel({
-            item: placeholder(
-                Icon.gears(),
-                `${selectedViews.length} selected ${pluralize(model.typeDisplayName)}`
-            ),
-            bbar: toolbar(
-                button({
-                    text: 'Delete',
-                    icon: Icon.delete(),
-                    intent: 'danger',
-                    disabled: !model.canDelete,
-                    onClick: () => model.deleteAsync(selectedViews)
-                }),
-                filler(),
-                button({text: 'Close', onClick: () => model.close()})
-            )
-        });
+        const {selectedView} = model;
+        return toolbar(
+            filler(),
+            button({
+                text: selectedView?.isCurrentView ? 'Currently Active' : 'Activate + Close',
+                onClick: () => model.activateSelectedViewAndClose(),
+                disabled: selectedView?.isCurrentView,
+                omit: !selectedView
+            }),
+            toolbarSep({omit: !selectedView}),
+            button({text: 'Close', onClick: () => model.close()})
+        );
     }
 });