@xh/hoist 71.0.0-SNAPSHOT.1733262000771 → 71.0.0-SNAPSHOT.1733266596001

package/cmp/viewmanager/index.ts

@@ -0,0 +1,4 @@
+export * from './ViewManagerModel';
+export * from './ViewInfo';
+export * from './View';
+export * from './SaveAsDialogModel';

package/core/XH.ts

@@ -26,6 +26,7 @@ import {
     JsonBlobService,
     LocalStorageService,
     PrefService,
+    SessionStorageService,
     TrackService,
     WebSocketService
 } from '@xh/hoist/svc';
@@ -140,6 +141,7 @@ export class XHApi {
     jsonBlobService: JsonBlobService;
     localStorageService: LocalStorageService;
     prefService: PrefService;
+    sessionStorageService: SessionStorageService;
     trackService: TrackService;
     webSocketService: WebSocketService;
 

package/core/persist/PersistOptions.ts

@@ -7,7 +7,7 @@
 
 import {DebounceSpec} from '../';
 import type {DashViewModel} from '@xh/hoist/desktop/cmp/dash'; // Import type only
-import type {ViewManagerModel} from '@xh/hoist/core/persist/viewmanager'; // Import type only
+import type {ViewManagerModel} from '@xh/hoist/cmp/viewmanager'; // Import type only
 
 export interface PersistOptions {
     /** Dot delimited path to store state. */
@@ -28,6 +28,9 @@ export interface PersistOptions {
     /** Browser local storage key used to store state. */
     localStorageKey?: string;
 
+    /** Session (tab-specific) storage key used to store state. */
+    sessionStorageKey?: string;
+
     /** DashViewModel used to read / write view state. */
     dashViewModel?: DashViewModel;
 

package/core/persist/PersistenceProvider.ts

@@ -22,6 +22,7 @@ import {
     CustomProvider,
     DashViewProvider,
     LocalStorageProvider,
+    SessionStorageProvider,
     PersistOptions,
     PrefProvider,
     ViewManagerProvider
@@ -91,6 +92,7 @@ export abstract class PersistenceProvider<S> {
             if (!type) {
                 if (rest.prefKey) type = 'pref';
                 if (rest.localStorageKey) type = 'localStorage';
+                if (rest.sessionStorageKey) type = 'sessionStorage';
                 if (rest.dashViewModel) type = 'dashView';
                 if (rest.viewManagerModel) type = 'viewManager';
                 if (rest.getData || rest.setData) type = 'custom';
@@ -103,6 +105,9 @@ export abstract class PersistenceProvider<S> {
                 case 'localStorage':
                     ret = new LocalStorageProvider(cfg);
                     break;
+                case 'sessionStorage':
+                    ret = new SessionStorageProvider(cfg);
+                    break;
                 case `dashView`:
                     ret = new DashViewProvider(cfg);
                     break;

package/core/persist/index.ts

@@ -1,8 +1,9 @@
 export * from './Persistable';
 export * from './PersistOptions';
 export * from './PersistenceProvider';
-export * from './LocalStorageProvider';
-export * from './DashViewProvider';
-export * from './PrefProvider';
-export * from './CustomProvider';
-export * from './viewmanager/ViewManagerProvider';
+export * from './provider/LocalStorageProvider';
+export * from './provider/SessionStorageProvider';
+export * from './provider/DashViewProvider';
+export * from './provider/PrefProvider';
+export * from './provider/CustomProvider';
+export * from './provider/ViewManagerProvider';

package/core/persist/{CustomProvider.ts → provider/CustomProvider.ts}

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {PersistenceProvider, PersistenceProviderConfig} from './';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
 import {throwIf} from '@xh/hoist/utils/js';
 
 /**

package/core/persist/{DashViewProvider.ts → provider/DashViewProvider.ts}

@@ -7,7 +7,7 @@
 
 import type {DashViewModel} from '@xh/hoist/desktop/cmp/dash'; // Import type only
 import {throwIf} from '@xh/hoist/utils/js';
-import {PersistenceProvider, PersistenceProviderConfig} from './';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
 
 /**
  * PersistenceProvider that stores state within a DashViewModel.

package/core/persist/{LocalStorageProvider.ts → provider/LocalStorageProvider.ts}

@@ -7,7 +7,7 @@
 
 import {XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
-import {PersistenceProvider, PersistenceProviderConfig} from './';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
 
 /**
  * PersistenceProvider that stores state within the Browser's LocalStorage.

package/core/persist/{PrefProvider.ts → provider/PrefProvider.ts}

@@ -5,8 +5,8 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {PersistenceProviderConfig, XH} from '../';
-import {PersistenceProvider} from './';
+import {XH} from '@xh/hoist/core/';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
 import {throwIf} from '@xh/hoist/utils/js';
 
 /**

package/core/persist/provider/SessionStorageProvider.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 {XH} from '@xh/hoist/core';
+import {throwIf} from '@xh/hoist/utils/js';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
+
+/**
+ * PersistenceProvider that stores state within the Browser's SessionStorage.
+ */
+export class SessionStorageProvider<S> extends PersistenceProvider<S> {
+    readonly key: string;
+
+    constructor(cfg: PersistenceProviderConfig<S>) {
+        super(cfg);
+        const {sessionStorageKey} = cfg.persistOptions;
+        throwIf(!sessionStorageKey, `SessionStorageProvider requires a 'sessionStorageKey'.`);
+        this.key = sessionStorageKey;
+    }
+
+    //----------------
+    // Implementation
+    //----------------
+    override readRaw() {
+        return XH.sessionStorageService.get(this.key, {});
+    }
+
+    override writeRaw(data) {
+        XH.sessionStorageService.set(this.key, data);
+    }
+}

package/core/persist/{viewmanager → provider}/ViewManagerProvider.ts

@@ -7,8 +7,8 @@
 
 import {throwIf} from '@xh/hoist/utils/js';
 import {pull} from 'lodash';
-import {PersistenceProvider, PersistenceProviderConfig} from '../index';
-import type {ViewManagerModel} from './index';
+import {PersistenceProvider, PersistenceProviderConfig} from '../PersistenceProvider';
+import type {ViewManagerModel} from '@xh/hoist/cmp/viewmanager/ViewManagerModel';
 
 export class ViewManagerProvider<S> extends PersistenceProvider<S> {
     readonly viewManagerModel: ViewManagerModel;
@@ -23,22 +23,18 @@ export class ViewManagerProvider<S> extends PersistenceProvider<S> {
 
     pushStateToTarget() {
         const state = this.read();
-        if (state) {
-            this.target.setPersistableState(state);
-        } else {
-            this.target.setPersistableState(this.defaultState);
-        }
+        this.target.setPersistableState(state ? state : this.defaultState);
     }
 
     //----------------
     // Implementation
     //----------------
     override readRaw() {
-        return this.viewManagerModel.pendingValue;
+        return this.viewManagerModel.getValue();
     }
 
     override writeRaw(data: Record<typeof this.path, S>) {
-        this.viewManagerModel.setPendingValue(data);
+        this.viewManagerModel.setValue(data);
     }
 
     override destroy() {

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -1,27 +1,29 @@
-import {div, filler, fragment, hbox, span} from '@xh/hoist/cmp/layout';
+/*
+ * 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 {fragment, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, uses} from '@xh/hoist/core';
-import './ViewManager.scss';
-import {ViewTree} from '@xh/hoist/core/persist/viewmanager';
-import {ViewManagerModel} from '@xh/hoist/core/persist/viewmanager/ViewManagerModel';
+import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
-import {switchInput} from '@xh/hoist/desktop/cmp/input';
-import {manageDialog} from './impl/ManageDialog';
-import {saveDialog} from './impl/SaveDialog';
 import {Icon} from '@xh/hoist/icon';
-import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
-import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
-import {isEmpty} from 'lodash';
-import {ReactNode} from 'react';
+import {popover} from '@xh/hoist/kit/blueprint';
+import {startCase} from 'lodash';
+import {viewMenu} from './ViewMenu';
+import {manageDialog} from './dialog/ManageDialog';
+import {saveAsDialog} from './dialog/SaveAsDialog';
+
+import './ViewManager.scss';
 
 /**
  * Visibility options for save/revert button.
  *
  * 'never' to hide button.
  * 'whenDirty' to only show when persistence state is dirty and button is therefore enabled.
- * 'always' will always show button, unless autoSave is active.
- *
- *  Note that we never show the button when 'autoSave' is active because it would never be enabled
- *  for more than a flash.
+ * 'always' will always show button.
  */
 export type ViewManagerStateButtonMode = 'whenDirty' | 'always' | 'never';
 
@@ -34,16 +36,17 @@ export interface ViewManagerProps extends HoistProps<ViewManagerModel> {
     showSaveButton?: ViewManagerStateButtonMode;
     /** Default 'never' */
     showRevertButton?: ViewManagerStateButtonMode;
-
-    /** True to render private views in sub-menu (Default false)*/
+    /** 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 shared views in sub-menu (Default false)*/
-    showSharedViewsInSubMenu?: boolean;
+    /** True to render global views in sub-menu (Default false) */
+    showGlobalViewsInSubMenu?: boolean;
 }
 
 /**
  * Desktop ViewManager component - a button-based menu for saving and swapping between named
- * bundles of persisted component state (eg grid views, dashboards, and similar).
+ * bundles of persisted component state (e.g. grid views, dashboards, and similar).
  *
  * See {@link ViewManagerModel} for additional details and configuration options.
  */
@@ -60,45 +63,36 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
         revertButtonProps,
         showSaveButton = 'whenDirty',
         showRevertButton = 'never',
+        buttonSide = 'right',
         showPrivateViewsInSubMenu = false,
-        showSharedViewsInSubMenu = false
+        showGlobalViewsInSubMenu = false
     }: ViewManagerProps) {
+        const save = saveButton({mode: showSaveButton, ...saveButtonProps}),
+            revert = revertButton({mode: showRevertButton, ...revertButtonProps}),
+            menu = popover({
+                item: menuButton(menuButtonProps),
+                content: viewMenu({showPrivateViewsInSubMenu, showGlobalViewsInSubMenu}),
+                placement: 'bottom-start',
+                popoverClassName: 'xh-view-manager__popover'
+            });
         return fragment(
             hbox({
                 className,
-                items: [
-                    popover({
-                        item: menuButton(menuButtonProps),
-                        content: viewMenu({showPrivateViewsInSubMenu, showSharedViewsInSubMenu}),
-                        placement: 'bottom-start',
-                        popoverClassName: 'xh-view-manager__popover'
-                    }),
-                    saveButton({
-                        mode: showSaveButton,
-                        ...saveButtonProps
-                    }),
-                    revertButton({
-                        mode: showRevertButton,
-                        ...revertButtonProps
-                    })
-                ]
+                items: buttonSide == 'left' ? [revert, save, menu] : [menu, save, revert]
             }),
-            manageDialog({
-                omit: !model.manageDialogOpen,
-                onClose: () => model.closeManageDialog()
-            }),
-            saveDialog()
+            manageDialog({omit: !model.manageDialogOpen}),
+            saveAsDialog()
         );
     }
 });
 
 const menuButton = hoistCmp.factory<ViewManagerModel>({
     render({model, ...rest}) {
-        const {selectedView, DisplayName} = model;
+        const {view, typeDisplayName, isLoading} = model;
         return button({
             className: 'xh-view-manager__menu-button',
-            text: selectedView?.shortName ?? `Default ${DisplayName}`,
-            icon: Icon.bookmark(),
+            text: view.info?.name ?? `Default ${startCase(typeDisplayName)}`,
+            icon: !isLoading ? Icon.bookmark() : Icon.spinner({className: 'fa-spin'}),
             rightIcon: Icon.chevronDown(),
             outlined: true,
             ...rest
@@ -112,11 +106,11 @@ const saveButton = hoistCmp.factory<ViewManagerModel>({
         return button({
             className: 'xh-view-manager__save-button',
             icon: Icon.save(),
-            tooltip: `Save changes to this ${model.displayName}`,
+            tooltip: `Save changes to this ${model.typeDisplayName}`,
             intent: 'primary',
-            disabled: !model.isDirty,
+            disabled: !model.isValueDirty || model.isLoading,
             onClick: () => {
-                model.canSave ? model.saveAsync() : model.saveAsAsync();
+                model.isViewSavable ? model.saveAsync() : model.saveAsAsync();
             },
             ...rest
         });
@@ -129,9 +123,9 @@ const revertButton = hoistCmp.factory<ViewManagerModel>({
         return button({
             className: 'xh-view-manager__revert-button',
             icon: Icon.reset(),
-            tooltip: `Revert changes to this ${model.displayName}`,
+            tooltip: `Revert changes to this ${model.typeDisplayName}`,
             intent: 'danger',
-            disabled: !model.isDirty,
+            disabled: !model.isValueDirty || model.isLoading,
             onClick: () => model.resetAsync(),
             ...rest
         });
@@ -139,183 +133,7 @@ const revertButton = hoistCmp.factory<ViewManagerModel>({
 });
 
 function hideStateButton(model: ViewManagerModel, mode: ViewManagerStateButtonMode): boolean {
-    return mode === 'never' || (mode === 'whenDirty' && !model.isDirty) || model.canAutoSave;
-}
-
-const viewMenu = hoistCmp.factory<ViewManagerProps>({
-    render({model, showPrivateViewsInSubMenu, showSharedViewsInSubMenu}) {
-        const {
-            autoSaveUnavailableReason,
-            enableDefault,
-            canSave,
-            selectedToken,
-            enableAutoSave,
-            DisplayName,
-            autoSave,
-            privateViewTree,
-            sharedViewTree,
-            favoriteViews,
-            views,
-            isDirty
-        } = model;
-
-        const pluralDisp = pluralize(DisplayName),
-            items = [];
-        if (!isEmpty(favoriteViews)) {
-            items.push(
-                menuDivider({title: 'Favorites'}),
-                ...favoriteViews.map(it => {
-                    return menuItem({
-                        key: `${it.token}-favorite`,
-                        icon: model.selectedToken === it.token ? Icon.check() : Icon.placeholder(),
-                        text: menuItemTextAndFaveToggle({
-                            view: {...it, text: it.shortName}
-                        }),
-                        onClick: () => model.selectViewAsync(it.token),
-                        title: it.description
-                    });
-                })
-            );
-        }
-
-        if (!isEmpty(privateViewTree)) {
-            if (showPrivateViewsInSubMenu) {
-                items.push(
-                    menuDivider({omit: isEmpty(items)}),
-                    menuItem({
-                        text: `My ${pluralDisp}`,
-                        shouldDismissPopover: false,
-                        items: privateViewTree.map(it => buildMenuItem(it, model))
-                    })
-                );
-            } else {
-                items.push(
-                    menuDivider({title: `My ${pluralDisp}`}),
-                    ...privateViewTree.map(it => buildMenuItem(it, model))
-                );
-            }
-        }
-
-        if (!isEmpty(sharedViewTree)) {
-            if (showSharedViewsInSubMenu) {
-                items.push(
-                    menuDivider({omit: isEmpty(items)}),
-                    menuItem({
-                        text: `Shared ${pluralDisp}`,
-                        shouldDismissPopover: false,
-                        items: sharedViewTree.map(it => buildMenuItem(it, model))
-                    })
-                );
-            } else {
-                items.push(
-                    menuDivider({title: `Shared ${pluralDisp}`}),
-                    ...sharedViewTree.map(it => buildMenuItem(it, model))
-                );
-            }
-        }
-
-        return menu({
-            className: 'xh-view-manager__menu',
-            items: [
-                ...items,
-                menuDivider({omit: !enableDefault || isEmpty(items)}),
-                menuItem({
-                    icon: selectedToken ? Icon.placeholder() : Icon.check(),
-                    text: `Default ${DisplayName}`,
-                    omit: !enableDefault,
-                    onClick: () => model.selectViewAsync(null)
-                }),
-                menuDivider(),
-                menuItem({
-                    icon: Icon.save(),
-                    text: 'Save',
-                    disabled: !canSave || !isDirty,
-                    onClick: () => model.saveAsync()
-                }),
-                menuItem({
-                    icon: Icon.copy(),
-                    text: 'Save As...',
-                    onClick: () => model.saveAsAsync()
-                }),
-                menuItem({
-                    icon: Icon.reset(),
-                    text: `Revert`,
-                    disabled: !isDirty,
-                    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 ${pluralDisp}...`,
-                    onClick: () => model.openManageDialog()
-                })
-            ]
-        });
-    }
-});
-
-function buildMenuItem(viewOrFolder: ViewTree, model: ViewManagerModel): ReactNode {
-    const {type, text, selected} = viewOrFolder,
-        icon = selected ? Icon.check() : Icon.placeholder();
-
-    switch (type) {
-        case 'folder':
-            return menuItem({
-                text,
-                icon,
-                shouldDismissPopover: false,
-                items: viewOrFolder.items
-                    ? viewOrFolder.items.map(child => buildMenuItem(child, model))
-                    : []
-            });
-        case 'view':
-            return menuItem({
-                className: 'xh-view-manager__menu-item',
-                key: viewOrFolder.token,
-                icon,
-                text: menuItemTextAndFaveToggle({model, view: viewOrFolder}),
-                title: viewOrFolder.description,
-                onClick: () => model.selectViewAsync(viewOrFolder.token)
-            });
-    }
+    return (
+        mode === 'never' || (mode === 'whenDirty' && !model.isValueDirty) || model.isViewAutoSavable
+    );
 }
-
-const menuItemTextAndFaveToggle = hoistCmp.factory<ViewManagerModel>({
-    render({model, view}) {
-        const isFavorite = model.isFavorite(view.token);
-        return hbox({
-            alignItems: 'center',
-            items: [
-                span({style: {paddingRight: 5}, item: view.text}),
-                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(view.token);
-                            }
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-});