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

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

@@ -3,6 +3,7 @@ import type { ViewManagerProvider } from '@xh/hoist/core';
 import { SaveAsDialogModel } from './SaveAsDialogModel';
 import { ViewInfo } from './ViewInfo';
 import { View } from './View';
+import { ViewToBlobApi } from './ViewToBlobApi';
 export interface ViewManagerConfig {
     /**
      * True (default) to allow user to opt in to automatically saving changes to their current view.
@@ -94,6 +95,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
      */
     static createAsync(config: ViewManagerConfig): Promise<ViewManagerModel>;
     /** Immutable configuration for this model. */
+    persistWith: ViewManagerPersistOptions;
     readonly viewType: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
@@ -124,18 +126,22 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
      */
     saveTask: TaskObserver;
     manageDialogOpen: boolean;
-    readonly saveAsDialogModel: SaveAsDialogModel;
+    saveAsDialogModel: SaveAsDialogModel;
+    /** Unsaved changes on the current view.*/
     private pendingValue;
-    private lastPushed;
     /**
      * Array of {@link ViewManagerProvider} instances bound to this model. Providers will
      * push themselves onto this array when constructed with a reference to this model. Used to
      * proactively push state to the target components when the model's selected `value` changes.
-     *
      * @internal
      */
     providers: ViewManagerProvider<any>[];
-    persistWith: ViewManagerPersistOptions;
+    /**
+     * Data access for persisting views
+     * @internal
+     */
+    api: ViewToBlobApi<T>;
+    private lastPushed;
     get isValueDirty(): boolean;
     get isViewSavable(): boolean;
     get isViewAutoSavable(): boolean;
@@ -165,12 +171,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
     openManageDialog(): void;
     closeManageDialog(): void;
     validateViewNameAsync(name: string, existing?: ViewInfo): Promise<string>;
-    deleteViewAsync(view: ViewInfo): Promise<void>;
-    updateViewAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean): Promise<void>;
-    createViewAsync(name: string, description: string, value: PlainObject): Promise<View>;
     private loadViewAsync;
-    private fetchViewAsync;
-    private fetchViewInfosAsync;
     private maybeAutoSaveAsync;
     private setAsView;
     private handleException;

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

@@ -0,0 +1,18 @@
+import { PlainObject } from '@xh/hoist/core';
+import { ViewInfo } from './ViewInfo';
+import { View } from './View';
+import { ViewManagerModel } from './ViewManagerModel';
+/**
+ * Class for accessing and updating views using JSON Blobs Service.
+ *
+ * @internal
+ */
+export declare class ViewToBlobApi<T> {
+    private owner;
+    constructor(owner: ViewManagerModel<T>);
+    fetchViewInfosAsync(): Promise<ViewInfo[]>;
+    fetchViewAsync(info: ViewInfo): Promise<View<T>>;
+    createViewAsync(name: string, description: string, value: PlainObject): Promise<View<T>>;
+    updateViewAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean): Promise<void>;
+    deleteViewAsync(view: ViewInfo): Promise<void>;
+}

package/cmp/viewmanager/SaveAsDialogModel.ts

@@ -81,7 +81,7 @@ export class SaveAsDialogModel extends HoistModel {
         if (!isValid) return;
 
         try {
-            const ret = await this.parent.createViewAsync(name, description, parent.getValue());
+            const ret = await this.parent.api.createViewAsync(name, description, parent.getValue());
             this.close();
             this.resolveOpen(ret);
         } catch (e) {

package/cmp/viewmanager/ViewManagerModel.ts

@@ -30,6 +30,7 @@ import {ReactNode} from 'react';
 import {SaveAsDialogModel} from './SaveAsDialogModel';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
+import {ViewToBlobApi} from './ViewToBlobApi';
 
 export interface ViewManagerConfig {
     /**
@@ -139,6 +140,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     /** Immutable configuration for this model. */
+    declare persistWith: ViewManagerPersistOptions;
     readonly viewType: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
@@ -174,25 +176,35 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     saveTask: TaskObserver;
 
     @observable manageDialogOpen = false;
-    @managed readonly saveAsDialogModel: SaveAsDialogModel;
-
-    // Unsaved changes on the current view.
-    @observable.ref private pendingValue: PendingValue<T> = null;
+    @managed saveAsDialogModel: SaveAsDialogModel;
 
-    // Last time changes were pushed to linked persistence providers
-    private lastPushed: number = null;
+    //-----------------------
+    // Private, internal state.
+    //-------------------------
+    /** Unsaved changes on the current view.*/
+    @observable.ref
+    private pendingValue: PendingValue<T> = null;
 
     /**
      * Array of {@link ViewManagerProvider} instances bound to this model. Providers will
      * push themselves onto this array when constructed with a reference to this model. Used to
      * proactively push state to the target components when the model's selected `value` changes.
-     *
      * @internal
      */
     providers: ViewManagerProvider<any>[] = [];
 
-    declare persistWith: ViewManagerPersistOptions;
+    /**
+     * Data access for persisting views
+     * @internal
+     */
+    api: ViewToBlobApi<T>;
+
+    // Last time changes were pushed to linked persistence providers
+    private lastPushed: number = null;
 
+    //---------------
+    // Getters
+    //---------------
     get isValueDirty(): boolean {
         return !!this.pendingValue;
     }
@@ -266,7 +278,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.enableAutoSave = enableAutoSave;
         this.enableFavorites = enableFavorites;
         this.settleTime = settleTime;
-        this.saveAsDialogModel = new SaveAsDialogModel(this);
         this.initialViewSpec = initialViewSpec;
 
         this.selectTask = TaskObserver.trackLast({
@@ -275,11 +286,14 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.saveTask = TaskObserver.trackLast({
             message: `Saving ${this.typeDisplayName}...`
         });
+
+        this.saveAsDialogModel = new SaveAsDialogModel(this);
+        this.api = new ViewToBlobApi(this);
     }
 
     private async initAsync() {
         try {
-            const views = await this.fetchViewInfosAsync();
+            const views = await this.api.fetchViewInfosAsync();
             runInAction(() => (this.views = views));
 
             if (this.persistWith) {
@@ -308,7 +322,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     override async doLoadAsync(loadSpec: LoadSpec) {
         try {
             // 1) Update all view info
-            const views = await this.fetchViewInfosAsync();
+            const views = await this.api.fetchViewInfosAsync();
             if (loadSpec.isStale) return;
             runInAction(() => (this.views = views));
 
@@ -451,46 +465,15 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         return null;
     }
 
-    async deleteViewAsync(view: ViewInfo) {
-        try {
-            await XH.jsonBlobService.archiveAsync(view.token);
-            this.removeFavorite(view.token);
-        } catch (e) {
-            throw XH.exception({message: `Unable to delete ${view.typedName}`, cause: e});
-        }
-    }
-
-    async updateViewAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean) {
-        try {
-            await XH.jsonBlobService.updateAsync(view.token, {
-                name: name.trim(),
-                description: description?.trim(),
-                acl: isGlobal ? '*' : null
-            });
-        } catch (e) {
-            throw XH.exception({message: `Unable to update ${view.typedName}`, cause: e});
-        }
-    }
-
-    async createViewAsync(name: string, description: string, value: PlainObject): Promise<View> {
-        try {
-            const blob = await XH.jsonBlobService.createAsync({
-                type: this.viewType,
-                name: name.trim(),
-                description: description?.trim(),
-                value
-            });
-            return View.fromBlob(blob, this);
-        } catch (e) {
-            throw XH.exception({message: `Unable to create ${this.typeDisplayName}`, cause: e});
-        }
-    }
-
     //------------------
     // Implementation
     //------------------
-    private loadViewAsync(info: ViewInfo, pendingValue: PendingValue<T> = null): Promise<void> {
-        return this.fetchViewAsync(info)
+    private async loadViewAsync(
+        info: ViewInfo,
+        pendingValue: PendingValue<T> = null
+    ): Promise<void> {
+        return this.api
+            .fetchViewAsync(info)
             .thenAction(latest => {
                 this.setAsView(latest, pendingValue?.token == info?.token ? pendingValue : null);
                 this.providers.forEach(it => it.pushStateToTarget());
@@ -499,31 +482,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             .linkTo(this.selectTask);
     }
 
-    private async fetchViewAsync(info: ViewInfo): Promise<View<T>> {
-        if (!info) return View.createDefault();
-        try {
-            const blob = await XH.jsonBlobService.getAsync(info.token);
-            return View.fromBlob(blob, this);
-        } catch (e) {
-            throw XH.exception({message: `Unable to fetch ${info.typedName}`, cause: e});
-        }
-    }
-
-    private async fetchViewInfosAsync(): Promise<ViewInfo[]> {
-        try {
-            const blobs = await XH.jsonBlobService.listAsync({
-                type: this.viewType,
-                includeValue: false
-            });
-            return blobs.map(b => new ViewInfo(b, this));
-        } catch (e) {
-            throw XH.exception({
-                message: `Unable to fetch ${pluralize(this.typeDisplayName)}`,
-                cause: e
-            });
-        }
-    }
-
     private async maybeAutoSaveAsync() {
         const {pendingValue, isViewAutoSavable, view} = this;
         if (isViewAutoSavable && pendingValue) {
@@ -586,7 +544,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     private async maybeConfirmSaveAsync(info: ViewInfo, pendingValue: PendingValue<T>) {
         // Get latest from server for reference
-        const latest = await this.fetchViewAsync(info),
+        const latest = await this.api.fetchViewAsync(info),
             isGlobal = latest.isGlobal,
             isStale = latest.lastUpdated > pendingValue.baseUpdated;
         if (!isStale && !isGlobal) return true;

package/cmp/viewmanager/ViewToBlobApi.ts

@@ -0,0 +1,92 @@
+/*
+ * 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 {PlainObject, XH} from '@xh/hoist/core';
+import {pluralize} from '@xh/hoist/utils/js';
+import {ViewInfo} from './ViewInfo';
+import {View} from './View';
+import {ViewManagerModel} from './ViewManagerModel';
+
+/**
+ * Class for accessing and updating views using JSON Blobs Service.
+ *
+ * @internal
+ */
+export class ViewToBlobApi<T> {
+    private owner: ViewManagerModel<T>;
+
+    constructor(owner: ViewManagerModel<T>) {
+        this.owner = owner;
+    }
+
+    //---------------
+    // Load/search.
+    //---------------
+    async fetchViewInfosAsync(): Promise<ViewInfo[]> {
+        const {owner} = this;
+        try {
+            const blobs = await XH.jsonBlobService.listAsync({
+                type: owner.viewType,
+                includeValue: false
+            });
+            return blobs.map(b => new ViewInfo(b, owner));
+        } catch (e) {
+            throw XH.exception({
+                message: `Unable to fetch ${pluralize(owner.typeDisplayName)}`,
+                cause: e
+            });
+        }
+    }
+
+    async fetchViewAsync(info: ViewInfo): Promise<View<T>> {
+        if (!info) return View.createDefault();
+        try {
+            const blob = await XH.jsonBlobService.getAsync(info.token);
+            return View.fromBlob(blob, this.owner);
+        } catch (e) {
+            throw XH.exception({message: `Unable to fetch ${info.typedName}`, cause: e});
+        }
+    }
+
+    //-----------------
+    // Crud
+    //-----------------
+    async createViewAsync(name: string, description: string, value: PlainObject): Promise<View<T>> {
+        const {owner} = this;
+        try {
+            const blob = await XH.jsonBlobService.createAsync({
+                type: owner.viewType,
+                name: name.trim(),
+                description: description?.trim(),
+                value
+            });
+            return View.fromBlob(blob, owner);
+        } catch (e) {
+            throw XH.exception({message: `Unable to create ${owner.typeDisplayName}`, cause: e});
+        }
+    }
+
+    async updateViewAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean) {
+        try {
+            await XH.jsonBlobService.updateAsync(view.token, {
+                name: name.trim(),
+                description: description?.trim(),
+                acl: isGlobal ? '*' : null
+            });
+        } catch (e) {
+            throw XH.exception({message: `Unable to update ${view.typedName}`, cause: e});
+        }
+    }
+
+    async deleteViewAsync(view: ViewInfo) {
+        try {
+            await XH.jsonBlobService.archiveAsync(view.token);
+        } catch (e) {
+            throw XH.exception({message: `Unable to delete ${view.typedName}`, cause: e});
+        }
+    }
+}

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -5,7 +5,8 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {fragment, hbox} from '@xh/hoist/cmp/layout';
+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 {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
@@ -92,7 +93,12 @@ const menuButton = hoistCmp.factory<ViewManagerModel>({
         return button({
             className: 'xh-view-manager__menu-button',
             text: view.info?.name ?? `Default ${startCase(typeDisplayName)}`,
-            icon: !isLoading ? Icon.bookmark() : Icon.spinner({className: 'fa-spin'}),
+            icon: !isLoading
+                ? Icon.bookmark()
+                : box({
+                      item: spinner({width: 13, height: 13, style: {margin: 'auto'}}),
+                      width: 16.25
+                  }),
             rightIcon: Icon.chevronDown(),
             outlined: true,
             ...rest

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -5,12 +5,14 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {div, filler, fragment, hbox, span} from '@xh/hoist/cmp/layout';
+import {box, div, filler, fragment, hbox, span} 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';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 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 {ReactNode} from 'react';
@@ -34,7 +36,8 @@ export const viewMenu = hoistCmp.factory<ViewManagerProps>({
             views,
             isValueDirty,
             privateViews,
-            globalViews
+            globalViews,
+            loadModel
         } = model;
 
         const pluralName = pluralize(startCase(typeDisplayName)),
@@ -138,10 +141,17 @@ export const viewMenu = hoistCmp.factory<ViewManagerProps>({
                     onClick: () => model.openManageDialog()
                 }),
                 menuItem({
-                    icon: Icon.refresh(),
+                    icon: !loadModel.isPending
+                        ? Icon.refresh()
+                        : box({
+                              height: 20,
+                              item: spinner({width: 16.25, height: 16.25})
+                          }),
+                    disabled: loadModel.isPending,
                     text: `Refresh ${pluralName}`,
                     onClick: e => {
-                        model.refreshAsync();
+                        // Ensure at least 100ms delay to render spinner
+                        Promise.all([wait(100), model.refreshAsync()]).linkTo(loadModel);
                         consumeEvent(e);
                     }
                 })

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

@@ -15,7 +15,7 @@ import {formField} from '@xh/hoist/desktop/cmp/form';
 import {select, textArea, textInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {fmtCompactDate} from '@xh/hoist/format';
+import {fmtDateTime} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {startCase} from 'lodash';
 
@@ -98,7 +98,7 @@ export const editForm = hoistCmp.factory({
                         filler(),
                         div({
                             className: 'xh-view-manager__manage-dialog__metadata',
-                            item: `Last Updated: ${fmtCompactDate(lastUpdated)} (${lastUpdatedBy === XH.getUsername() ? 'you' : lastUpdatedBy})`
+                            item: `Last Updated: ${fmtDateTime(lastUpdated)} by ${lastUpdatedBy === XH.getUsername() ? 'you' : lastUpdatedBy}`
                         })
                     ]
                 })

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

@@ -158,7 +158,7 @@ export class ManageDialogModel extends HoistModel {
     ) {
         const {viewManagerModel} = this;
 
-        await viewManagerModel.updateViewAsync(view, name, description, isGlobal);
+        await viewManagerModel.api.updateViewAsync(view, name, description, isGlobal);
         await viewManagerModel.refreshAsync();
         await this.refreshAsync();
 
@@ -200,7 +200,7 @@ export class ManageDialogModel extends HoistModel {
         if (!confirmed) return;
 
         for (const view of views) {
-            await viewManagerModel.deleteViewAsync(view);
+            await viewManagerModel.api.deleteViewAsync(view);
         }
 
         await viewManagerModel.refreshAsync();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1733266596001",
+  "version": "71.0.0-SNAPSHOT.1733372979467",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",