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

package/desktop/cmp/viewmanager/ViewManager.scss

@@ -1,32 +1,6 @@
 .xh-view-manager {
   align-items: center;
 
-  &__menu-item {
-    &:hover {
-      .xh-view-manager__menu-item__fave-toggle {
-        opacity: 1;
-        color: var(--xh-yellow);
-      }
-    }
-
-    &__fave-toggle {
-      opacity: 0;
-
-      &:hover {
-        color: var(--xh-yellow-light) !important;
-      }
-
-      &--active {
-        opacity: 1;
-        color: var(--xh-yellow);
-      }
-
-      &--active:hover {
-        color: var(--xh-yellow-light) !important;
-      }
-    }
-  }
-
   //------------------------
   // Dialogs
   //------------------------
@@ -35,8 +9,16 @@
     &__form {
       padding: var(--xh-pad-px);
 
-      .xh-form-field.xh-form-field-readonly .xh-form-field-readonly-display {
-        padding: 0;
+      .xh-form-field.xh-form-field-readonly {
+        &:not(.xh-form-field-inline) {
+          .xh-form-field-label {
+            border-bottom: var(--xh-border-solid);
+          }
+        }
+
+        .xh-form-field-readonly-display {
+          padding: 0;
+        }
       }
 
       .xh-form-field .xh-form-field-info {
@@ -54,5 +36,20 @@
       color: var(--xh-text-color-muted);
       font-size: var(--xh-font-size-small-px);
     }
+
+    &__help-text {
+      display: flex;
+      align-items: center;
+      gap: var(--xh-pad-px);
+      margin: var(--xh-pad-px);
+      padding: var(--xh-pad-px);
+      border: var(--xh-border-solid);
+      border-radius: var(--xh-border-radius-px);
+      background-color: var(--xh-bg-alt);
+
+      .xh-icon {
+        font-size: 1.2em;
+      }
+    }
   }
 }

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -7,13 +7,15 @@
 
 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 {useOnVisibleChange} from '@xh/hoist/utils/react';
 import {startCase} from 'lodash';
 import {viewMenu} from './ViewMenu';
+import {ViewManagerLocalModel} from './ViewManagerLocalModel';
 import {manageDialog} from './dialog/ManageDialog';
 import {saveAsDialog} from './dialog/SaveAsDialog';
 
@@ -39,10 +41,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,32 +62,33 @@ 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}),
+                disabled: !locModel.isVisible, // Prevent orphaned popover menu
+                item: menuButton({model: locModel, ...menuButtonProps}),
+                content: viewMenu({model: locModel}),
                 placement: 'bottom-start',
                 popoverClassName: 'xh-view-manager__popover'
             });
         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({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 +105,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,33 @@
+/*
+ * 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 {bindable, makeObservable} from '@xh/hoist/mobx';
+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;
+
+    @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/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);
-                            }
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-});