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

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

@@ -17,12 +17,16 @@ export declare class View<T extends PlainObject = PlainObject> {
      * state of the components is captured.
      */
     readonly value: Partial<T>;
+    private readonly model;
+    get name(): string;
+    get token(): string;
+    get type(): string;
     get isDefault(): boolean;
     get isGlobal(): boolean;
     get lastUpdated(): number;
-    get token(): string;
+    get typedName(): string;
     static fromBlob<T>(blob: JsonBlob, model: ViewManagerModel): View<T>;
-    static createDefault<T>(): View<T>;
+    static createDefault<T>(model: ViewManagerModel): View<T>;
     withUpdatedValue(value: Partial<T>): View<T>;
-    constructor(info: ViewInfo, value: Partial<T>);
+    constructor(info: ViewInfo, value: Partial<T>, model: ViewManagerModel);
 }

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

@@ -6,7 +6,7 @@ import { JsonBlob } from '@xh/hoist/svc';
 export declare class ViewInfo {
     /** Unique Id */
     readonly token: string;
-    /** App-defined type discriminator, as per {@link ViewManagerConfig.viewType}. */
+    /** App-defined type discriminator, as per {@link ViewManagerConfig.type}. */
     readonly type: string;
     /** User-supplied descriptive name. */
     readonly name: string;

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

@@ -47,10 +47,10 @@ export interface ViewManagerConfig {
      * different viewManagers to be added to your app in the future - e.g. `portfolioGridView` or
      * `tradeBlotterDashboard`.
      */
-    viewType: string;
+    type: string;
     /**
      * Optional user-facing display name for the view type, displayed in the ViewManager menu
-     * and associated management dialogs and prompts. Defaulted from `viewType` if not provided.
+     * and associated management dialogs and prompts. Defaulted from `type` if not provided.
      */
     typeDisplayName?: string;
     /**
@@ -96,7 +96,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 type: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
@@ -156,7 +156,6 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
      * initial load before binding to persistable components.
      */
     private constructor();
-    private initAsync;
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     selectViewAsync(info: ViewInfo): Promise<void>;
     saveAsync(): Promise<void>;
@@ -171,6 +170,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
     openManageDialog(): void;
     closeManageDialog(): void;
     validateViewNameAsync(name: string, existing?: ViewInfo): Promise<string>;
+    private initAsync;
     private loadViewAsync;
     private maybeAutoSaveAsync;
     private setAsView;

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

@@ -13,6 +13,8 @@ export declare class ViewToBlobApi<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>;
+    updateViewInfoAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean): Promise<View<T>>;
+    updateViewValueAsync(view: View<T>, value: Partial<T>): Promise<View<T>>;
     deleteViewAsync(view: ViewInfo): Promise<void>;
+    private trackChange;
 }

package/cmp/viewmanager/SaveAsDialogModel.ts

@@ -23,7 +23,7 @@ export class SaveAsDialogModel extends HoistModel {
     private resolveOpen: (value: View) => void;
 
     get type(): string {
-        return this.parent.viewType;
+        return this.parent.type;
     }
 
     get typeDisplayName(): string {

package/cmp/viewmanager/View.ts

@@ -21,6 +21,20 @@ export class View<T extends PlainObject = PlainObject> {
      */
     readonly value: Partial<T> = null;
 
+    private readonly model: ViewManagerModel;
+
+    get name(): string {
+        return this.info?.name ?? 'Default';
+    }
+
+    get token(): string {
+        return this.info?.token ?? null;
+    }
+
+    get type(): string {
+        return this.model.type;
+    }
+
     get isDefault(): boolean {
         return !this.info;
     }
@@ -33,24 +47,25 @@ export class View<T extends PlainObject = PlainObject> {
         return this.info?.lastUpdated ?? null;
     }
 
-    get token(): string {
-        return this.info?.token ?? null;
+    get typedName(): string {
+        return `${this.model.typeDisplayName} '${this.name}'`;
     }
 
     static fromBlob<T>(blob: JsonBlob, model: ViewManagerModel): View<T> {
-        return new View(new ViewInfo(blob, model), blob.value);
+        return new View(new ViewInfo(blob, model), blob.value, model);
     }
 
-    static createDefault<T>(): View<T> {
-        return new View(null, {});
+    static createDefault<T>(model: ViewManagerModel): View<T> {
+        return new View(null, {}, model);
     }
 
     withUpdatedValue(value: Partial<T>): View<T> {
-        return new View(this.info, value);
+        return new View(this.info, value, this.model);
     }
 
-    constructor(info: ViewInfo, value: Partial<T>) {
+    constructor(info: ViewInfo, value: Partial<T>, model: ViewManagerModel) {
         this.info = info;
         this.value = value;
+        this.model = model;
     }
 }

package/cmp/viewmanager/ViewInfo.ts

@@ -9,7 +9,7 @@ export class ViewInfo {
     /** Unique Id */
     readonly token: string;
 
-    /** App-defined type discriminator, as per {@link ViewManagerConfig.viewType}. */
+    /** App-defined type discriminator, as per {@link ViewManagerConfig.type}. */
     readonly type: string;
 
     /** User-supplied descriptive name. */

package/cmp/viewmanager/ViewManagerModel.ts

@@ -82,11 +82,11 @@ export interface ViewManagerConfig {
      * different viewManagers to be added to your app in the future - e.g. `portfolioGridView` or
      * `tradeBlotterDashboard`.
      */
-    viewType: string;
+    type: string;
 
     /**
      * Optional user-facing display name for the view type, displayed in the ViewManager menu
-     * and associated management dialogs and prompts. Defaulted from `viewType` if not provided.
+     * and associated management dialogs and prompts. Defaulted from `type` if not provided.
      */
     typeDisplayName?: string;
 
@@ -141,7 +141,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     /** Immutable configuration for this model. */
     declare persistWith: ViewManagerPersistOptions;
-    readonly viewType: string;
+    readonly type: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
@@ -250,7 +250,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
      * initial load before binding to persistable components.
      */
     private constructor({
-        viewType,
+        type,
         persistWith,
         typeDisplayName,
         globalDisplayName = 'global',
@@ -269,8 +269,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             "ViewManagerModel requires 'initialViewSpec' if `enableDefault` is false."
         );
 
-        this.viewType = viewType;
-        this.typeDisplayName = lowerCase(typeDisplayName ?? genDisplayName(viewType));
+        this.type = type;
+        this.typeDisplayName = lowerCase(typeDisplayName ?? genDisplayName(type));
         this.globalDisplayName = globalDisplayName;
         this.persistWith = persistWith;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
@@ -291,34 +291,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.api = new ViewToBlobApi(this);
     }
 
-    private async initAsync() {
-        try {
-            const views = await this.api.fetchViewInfosAsync();
-            runInAction(() => (this.views = views));
-
-            if (this.persistWith) {
-                this.initPersist(this.persistWith);
-                await when(() => !this.selectTask.isPending);
-            }
-
-            // If the initial view not initialized from persistence, assign it.
-            if (!this.view) {
-                await this.loadViewAsync(this.initialViewSpec?.(views), this.pendingValue);
-            }
-        } catch (e) {
-            // Always ensure at least default view is installed.
-            if (!this.view) this.loadViewAsync(null, this.pendingValue);
-
-            this.handleException(e, {showAlert: false, logOnServer: true});
-        }
-
-        this.addReaction({
-            track: () => [this.pendingValue, this.autoSave],
-            run: () => this.maybeAutoSaveAsync(),
-            debounce: 5 * SECONDS
-        });
-    }
-
     override async doLoadAsync(loadSpec: LoadSpec) {
         try {
             // 1) Update all view info
@@ -358,21 +330,20 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             this.logError('Unexpected conditions for call to save, skipping');
             return;
         }
-        const {pendingValue} = this,
-            {info} = this.view;
+        const {pendingValue, view, api} = this;
         try {
-            if (!(await this.maybeConfirmSaveAsync(info, pendingValue))) {
+            if (!(await this.maybeConfirmSaveAsync(view, pendingValue))) {
                 return;
             }
-            const update = await XH.jsonBlobService
-                .updateAsync(info.token, {value: pendingValue.value})
+            const updated = await api
+                .updateViewValueAsync(view, pendingValue.value)
                 .linkTo(this.saveTask);
 
-            this.setAsView(View.fromBlob(update, this));
-            this.noteSuccess(`Saved ${info.typedName}`);
+            this.setAsView(updated);
+            this.noteSuccess(`Saved ${view.typedName}`);
         } catch (e) {
             this.handleException(e, {
-                message: `Failed to save ${info.typedName}.  If this persists consider \`Save As...\`.`
+                message: `Failed to save ${view.typedName}.  If this persists consider \`Save As...\`.`
             });
         }
         this.refreshAsync();
@@ -382,7 +353,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         const view = (await this.saveAsDialogModel.openAsync()) as View<T>;
         if (view) {
             this.setAsView(view);
-            this.noteSuccess(`Saved ${view.info.typedName}`);
+            this.noteSuccess(`Saved ${view.typedName}`);
         }
         this.refreshAsync();
     }
@@ -468,6 +439,34 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     //------------------
     // Implementation
     //------------------
+    private async initAsync() {
+        try {
+            const views = await this.api.fetchViewInfosAsync();
+            runInAction(() => (this.views = views));
+
+            if (this.persistWith) {
+                this.initPersist(this.persistWith);
+                await when(() => !this.selectTask.isPending);
+            }
+
+            // If the initial view not initialized from persistence, assign it.
+            if (!this.view) {
+                await this.loadViewAsync(this.initialViewSpec?.(views), this.pendingValue);
+            }
+        } catch (e) {
+            // Always ensure at least default view is installed.
+            if (!this.view) this.loadViewAsync(null, this.pendingValue);
+
+            this.handleException(e, {showAlert: false, logOnServer: true});
+        }
+
+        this.addReaction({
+            track: () => [this.pendingValue, this.autoSave],
+            run: () => this.maybeAutoSaveAsync(),
+            debounce: 5 * SECONDS
+        });
+    }
+
     private async loadViewAsync(
         info: ViewInfo,
         pendingValue: PendingValue<T> = null
@@ -483,18 +482,19 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     private async maybeAutoSaveAsync() {
-        const {pendingValue, isViewAutoSavable, view} = this;
+        const {pendingValue, isViewAutoSavable, view, api} = this;
         if (isViewAutoSavable && pendingValue) {
             try {
-                const raw = await XH.jsonBlobService
-                    .updateAsync(view.token, {value: pendingValue.value})
+                const updated = await api
+                    .updateViewValueAsync(view, pendingValue.value)
                     .linkTo(this.saveTask);
-                this.setAsView(View.fromBlob(raw, this));
+
+                this.setAsView(updated);
             } catch (e) {
                 // TODO: How to alert but avoid for flaky or spam when user editing a deleted view
                 // Keep count and alert server and user once at count n?
                 XH.handleException(e, {
-                    message: `Failing AutoSave for ${this.view.info.typedName}`,
+                    message: `Failing AutoSave for ${view.info.typedName}`,
                     showAlert: false,
                     logOnServer: false
                 });
@@ -542,16 +542,16 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         });
     }
 
-    private async maybeConfirmSaveAsync(info: ViewInfo, pendingValue: PendingValue<T>) {
+    private async maybeConfirmSaveAsync(view: View, pendingValue: PendingValue<T>) {
         // Get latest from server for reference
-        const latest = await this.api.fetchViewAsync(info),
+        const latest = await this.api.fetchViewAsync(view.info),
             isGlobal = latest.isGlobal,
             isStale = latest.lastUpdated > pendingValue.baseUpdated;
         if (!isStale && !isGlobal) return true;
 
         const latestInfo = latest.info,
             {typeDisplayName, globalDisplayName} = this,
-            msgs: ReactNode[] = [`Save ${info.typedName}?`];
+            msgs: ReactNode[] = [`Save ${view.typedName}?`];
         if (isGlobal) {
             msgs.push(
                 span(

package/cmp/viewmanager/ViewToBlobApi.ts

@@ -30,7 +30,7 @@ export class ViewToBlobApi<T> {
         const {owner} = this;
         try {
             const blobs = await XH.jsonBlobService.listAsync({
-                type: owner.viewType,
+                type: owner.type,
                 includeValue: false
             });
             return blobs.map(b => new ViewInfo(b, owner));
@@ -43,7 +43,7 @@ export class ViewToBlobApi<T> {
     }
 
     async fetchViewAsync(info: ViewInfo): Promise<View<T>> {
-        if (!info) return View.createDefault();
+        if (!info) return View.createDefault(this.owner);
         try {
             const blob = await XH.jsonBlobService.getAsync(info.token);
             return View.fromBlob(blob, this.owner);
@@ -59,34 +59,69 @@ export class ViewToBlobApi<T> {
         const {owner} = this;
         try {
             const blob = await XH.jsonBlobService.createAsync({
-                type: owner.viewType,
+                type: owner.type,
                 name: name.trim(),
                 description: description?.trim(),
                 value
             });
-            return View.fromBlob(blob, owner);
+            const ret = View.fromBlob(blob, owner);
+            this.trackChange('Created View', ret);
+            return ret;
         } catch (e) {
             throw XH.exception({message: `Unable to create ${owner.typeDisplayName}`, cause: e});
         }
     }
 
-    async updateViewAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean) {
+    async updateViewInfoAsync(
+        view: ViewInfo,
+        name: string,
+        description: string,
+        isGlobal: boolean
+    ): Promise<View<T>> {
         try {
-            await XH.jsonBlobService.updateAsync(view.token, {
+            const blob = await XH.jsonBlobService.updateAsync(view.token, {
                 name: name.trim(),
                 description: description?.trim(),
                 acl: isGlobal ? '*' : null
             });
+            const ret = View.fromBlob(blob, this.owner);
+            this.trackChange('Updated View Info', ret);
+            return ret;
         } catch (e) {
             throw XH.exception({message: `Unable to update ${view.typedName}`, cause: e});
         }
     }
 
+    async updateViewValueAsync(view: View<T>, value: Partial<T>): Promise<View<T>> {
+        try {
+            const blob = await XH.jsonBlobService.updateAsync(view.token, {value});
+            const ret = View.fromBlob(blob, this.owner);
+            if (ret.isGlobal) {
+                this.trackChange('Updated Global View definition', ret);
+            }
+            return ret;
+        } catch (e) {
+            throw XH.exception({
+                message: `Unable to update value for ${view.typedName}`,
+                cause: e
+            });
+        }
+    }
+
     async deleteViewAsync(view: ViewInfo) {
         try {
             await XH.jsonBlobService.archiveAsync(view.token);
+            this.trackChange('Deleted View', view);
         } catch (e) {
             throw XH.exception({message: `Unable to delete ${view.typedName}`, cause: e});
         }
     }
+
+    private trackChange(message: string, v: View | ViewInfo) {
+        XH.track({
+            message,
+            category: 'Views',
+            data: {name: v.name, token: v.token, isGlobal: v.isGlobal, type: v.type}
+        });
+    }
 }

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -92,7 +92,7 @@ const menuButton = hoistCmp.factory<ViewManagerModel>({
         const {view, typeDisplayName, isLoading} = model;
         return button({
             className: 'xh-view-manager__menu-button',
-            text: view.info?.name ?? `Default ${startCase(typeDisplayName)}`,
+            text: view.isDefault ? `Default ${startCase(typeDisplayName)}` : view.name,
             icon: !isLoading
                 ? Icon.bookmark()
                 : box({

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -50,7 +50,7 @@ export const viewMenu = hoistCmp.factory<ViewManagerProps>({
                 ...favoriteViews.map(info => {
                     return menuItem({
                         key: `${info.token}-favorite`,
-                        icon: view.info?.token === info.token ? Icon.check() : Icon.placeholder(),
+                        icon: view.token === info.token ? Icon.check() : Icon.placeholder(),
                         text: textAndFaveToggle({info}),
                         onClick: () => model.selectViewAsync(info),
                         title: info.description

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

@@ -158,7 +158,7 @@ export class ManageDialogModel extends HoistModel {
     ) {
         const {viewManagerModel} = this;
 
-        await viewManagerModel.api.updateViewAsync(view, name, description, isGlobal);
+        await viewManagerModel.api.updateViewInfoAsync(view, name, description, isGlobal);
         await viewManagerModel.refreshAsync();
         await this.refreshAsync();
 

package/package.json

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