@xh/hoist 71.0.0-SNAPSHOT.1735311286067 → 71.0.0-SNAPSHOT.1735324944017

package/cmp/viewmanager/ViewManagerModel.ts

@@ -10,26 +10,22 @@ import {
     ExceptionHandlerOptions,
     HoistModel,
     LoadSpec,
-    PersistableState,
-    PersistenceProvider,
-    PersistOptions,
     PlainObject,
     TaskObserver,
     Thunkable,
     XH
 } from '@xh/hoist/core';
-import type {ViewManagerProvider} from '@xh/hoist/core';
+import type {ViewManagerProvider, ReactionSpec} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
 import {fmtDateTime} from '@xh/hoist/format';
-import {action, bindable, makeObservable, observable, when} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable, comparer, runInAction} from '@xh/hoist/mobx';
 import {olderThan, SECONDS} from '@xh/hoist/utils/datetime';
 import {executeIfFunction, pluralize, throwIf} from '@xh/hoist/utils/js';
-import {find, isEmpty, isEqual, isNil, isObject, lowerCase, pickBy} from 'lodash';
-import {runInAction} from 'mobx';
+import {find, isEqual, isNil, isNull, isUndefined, lowerCase} from 'lodash';
 import {ReactNode} from 'react';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
-import {ViewToBlobApi, ViewCreateSpec, ViewUpdateSpec} from './ViewToBlobApi';
+import {DataAccess, ViewCreateSpec, ViewUpdateSpec, ViewUserState} from './DataAccess';
 
 export interface ViewManagerConfig {
     /**
@@ -79,9 +75,6 @@ export interface ViewManagerConfig {
      */
     manageGlobal?: Thunkable<boolean>;
 
-    /** Used to persist the user's state. */
-    persistWith?: ViewManagerPersistOptions;
-
     /**
      * Required discriminator for the particular class of views to be loaded and managed by this
      * model. Set to something descriptive and specific enough to be identifiable and allow for
@@ -90,6 +83,13 @@ export interface ViewManagerConfig {
      */
     type: string;
 
+    /**
+     * Optional sub-discriminator for the particular location in your app this instance of the
+     * view manager appears in. A particular currentView and pendingValue will be maintained by
+     * instance, but all other options, and the available library of views will be shared by type.
+     */
+    instance?: string;
+
     /**
      * Optional user-facing display name for the view type, displayed in the ViewManager menu
      * and associated management dialogs and prompts. Defaulted from `type` if not provided.
@@ -102,14 +102,6 @@ export interface ViewManagerConfig {
     globalDisplayName?: string;
 }
 
-export interface ViewManagerPersistOptions extends PersistOptions {
-    /** True to persist pinning preferences or provide specific PersistOptions. (Default true) */
-    persistPinning?: boolean | PersistOptions;
-
-    /** True to include pending value or provide specific PersistOptions. (Default false) */
-    persistPendingValue?: boolean | PersistOptions;
-}
-
 /**
  *  ViewManagerModel coordinates the loading, saving, and management of user-defined bundles of
  *  {@link Persistable} component/model state.
@@ -146,8 +138,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     /** Immutable configuration for this model. */
-    declare persistWith: ViewManagerPersistOptions;
     readonly type: string;
+    readonly instance: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
@@ -175,7 +167,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
      * True if user has opted-in to automatically saving changes to personal views (if auto-save
      * generally available as per `enableAutoSave`).
      */
-    @bindable autoSave = true;
+    @bindable autoSave = false;
 
     /**
      * TaskObserver linked to {@link selectViewAsync}. If a change to the active view is likely to
@@ -202,7 +194,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     providers: ViewManagerProvider<any>[] = [];
 
     /** Data access for persisting views. */
-    private api: ViewToBlobApi<T>;
+    private dataAccess: DataAccess<T>;
 
     /** Last time changes were pushed to linked persistence providers */
     private lastPushed: number = null;
@@ -265,7 +257,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
      */
     private constructor({
         type,
-        persistWith,
+        instance = 'default',
         typeDisplayName,
         globalDisplayName = 'global',
         manageGlobal = false,
@@ -285,9 +277,9 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         );
 
         this.type = type;
+        this.instance = instance;
         this.typeDisplayName = lowerCase(typeDisplayName ?? genDisplayName(type));
         this.globalDisplayName = globalDisplayName;
-        this.persistWith = persistWith;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
         this.enableDefault = enableDefault;
         this.enableGlobal = enableGlobal;
@@ -303,20 +295,23 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             message: `Saving ${this.typeDisplayName}...`
         });
 
-        this.api = new ViewToBlobApi(this);
+        this.dataAccess = new DataAccess(this);
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
+        const {dataAccess, view} = this;
         try {
-            // 1) Update all view info
-            const views = await this.api.fetchViewInfosAsync();
+            // 1) Update views and related state
+            const {views, state} = await dataAccess.fetchDataAsync();
             if (loadSpec.isStale) return;
-            runInAction(() => (this.views = views));
+            runInAction(() => {
+                this.views = views;
+                this.userPinned = state.userPinned;
+                this.autoSave = state.autoSave;
+            });
 
-            // 2) Update active view if needed.
-            const {view} = this;
+            // potentially fast-forward current view.
             if (!view.isDefault) {
-                // Reload view if can be fast-forwarded. Otherwise, leave as is for save/saveAs.
                 const latestInfo = find(views, {token: view.token});
                 if (latestInfo && latestInfo.lastUpdated > view.lastUpdated) {
                     this.loadViewAsync(latestInfo, this.pendingValue);
@@ -329,20 +324,24 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     async selectViewAsync(info: ViewInfo): Promise<void> {
-        if (this.isValueDirty) {
-            if (this.isViewAutoSavable) await this.maybeAutoSaveAsync();
-            if (this.isValueDirty && !(await this.confirmDiscardChangesAsync())) return;
+        // ensure any pending auto-save gets completed
+        if (this.isValueDirty && this.isViewAutoSavable) {
+            await this.maybeAutoSaveAsync();
+        }
+
+        // if still dirty, require confirm
+        if (this.isValueDirty && this.view.isOwned && !(await this.confirmDiscardChangesAsync())) {
+            return;
         }
 
         await this.loadViewAsync(info).catch(e => this.handleException(e));
     }
 
     async saveAsAsync(spec: ViewCreateSpec): Promise<void> {
-        const view = await this.api.createViewAsync({...spec, value: this.getValue()});
+        const view = await this.dataAccess.createViewAsync({...spec, value: this.getValue()});
         this.noteSuccess(`Created ${view.typedName}`);
         this.userPin(view.info);
         this.setAsView(view);
-        this.refreshAsync();
     }
 
     //------------------------
@@ -353,12 +352,12 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             this.logError('Unexpected conditions for call to save, skipping');
             return;
         }
-        const {pendingValue, view, api} = this;
+        const {pendingValue, view, dataAccess} = this;
         try {
             if (!(await this.maybeConfirmSaveAsync(view, pendingValue))) {
                 return;
             }
-            const updated = await api
+            const updated = await dataAccess
                 .updateViewValueAsync(view, pendingValue.value)
                 .linkTo(this.saveTask);
 
@@ -441,18 +440,18 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     /** Update all aspects of a view's metadata.*/
     async updateViewInfoAsync(view: ViewInfo, updates: ViewUpdateSpec): Promise<View<T>> {
-        return this.api.updateViewInfoAsync(view, updates);
+        return this.dataAccess.updateViewInfoAsync(view, updates);
     }
 
     /** Promote a view to global visibility/ownership status. */
     async makeViewGlobalAsync(view: ViewInfo): Promise<View<T>> {
-        return this.api.makeViewGlobalAsync(view);
+        return this.dataAccess.makeViewGlobalAsync(view);
     }
 
     async deleteViewsAsync(toDelete: ViewInfo[]): Promise<void> {
         let exception;
         try {
-            await this.api.deleteViewsAsync(toDelete);
+            await this.dataAccess.deleteViewsAsync(toDelete);
         } catch (e) {
             exception = e;
         }
@@ -471,38 +470,86 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     // Implementation
     //------------------
     private async initAsync() {
+        let {dataAccess, pendingValueStorageKey} = this,
+            initialState;
+
         try {
-            const views = await this.api.fetchViewInfosAsync();
-            runInAction(() => (this.views = views));
+            // 1) Initialize views and related state
+            const {views, state} = await dataAccess.fetchDataAsync();
+            initialState = state;
+            runInAction(() => {
+                this.views = views;
+                this.userPinned = state.userPinned;
+                this.autoSave = state.autoSave;
+                this.pendingValue = XH.sessionStorageService.get(pendingValueStorageKey);
+            });
 
-            if (this.persistWith) {
-                this.initPersist(this.persistWith);
-                await when(() => !this.selectTask.isPending);
+            // 2) Initialize/choose initial view.  Null is ok, and will yield default.
+            let initialView,
+                initialTkn = initialState.currentView;
+            if (isUndefined(initialTkn)) {
+                initialView = this.initialViewSpec?.(views);
+            } else if (!isNull(initialTkn)) {
+                initialView = find(views, {token: initialTkn}) ?? this.initialViewSpec?.(views);
+            } else {
+                initialView = null;
             }
 
-            // If the initial view not initialized from persistence, assign it.
-            if (!this.view) {
-                await this.loadViewAsync(this.initialViewSpec?.(views), this.pendingValue);
-            }
+            await this.loadViewAsync(initialView, this.pendingValue);
         } catch (e) {
-            // Always ensure at least default view is installed.
-            if (!this.view) this.loadViewAsync(null, this.pendingValue);
-
+            // Always ensure at least default view is installed (other state defaults are fine)
+            this.loadViewAsync(null, this.pendingValue);
             this.handleException(e, {showAlert: false, logOnServer: true});
         }
 
-        this.addReaction({
+        this.addReaction(
+            this.pendingValueReaction(),
+            this.autoSaveReaction(),
+            ...this.stateReactions(initialState)
+        );
+    }
+
+    private pendingValueReaction(): ReactionSpec {
+        return {
+            track: () => this.pendingValue,
+            run: v => XH.sessionStorageService.set(this.pendingValueStorageKey, v)
+        };
+    }
+
+    private autoSaveReaction(): ReactionSpec {
+        return {
             track: () => [this.pendingValue, this.autoSave],
             run: () => this.maybeAutoSaveAsync(),
-            debounce: 5 * SECONDS
-        });
+            debounce: 2 * SECONDS
+        };
+    }
+
+    private stateReactions(initialState: ViewUserState): ReactionSpec[] {
+        const {dataAccess} = this;
+        return [
+            {
+                track: () => this.userPinned,
+                run: userPinned => dataAccess.updateStateAsync({userPinned}),
+                equals: comparer.structural,
+                debounce: 2 * SECONDS
+            },
+            {
+                track: () => this.autoSave,
+                run: autoSave => dataAccess.updateStateAsync({autoSave})
+            },
+            {
+                track: () => this.view?.token,
+                run: tkn => dataAccess.updateStateAsync({currentView: tkn}),
+                fireImmediately: this.view?.token !== initialState.currentView
+            }
+        ];
     }
 
     private async loadViewAsync(
         info: ViewInfo,
         pendingValue: PendingValue<T> = null
     ): Promise<void> {
-        return this.api
+        return this.dataAccess
             .fetchViewAsync(info)
             .thenAction(latest => {
                 this.setAsView(latest, pendingValue?.token == info?.token ? pendingValue : null);
@@ -513,10 +560,10 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     private async maybeAutoSaveAsync() {
-        const {pendingValue, isViewAutoSavable, view, api} = this;
+        const {pendingValue, isViewAutoSavable, view, dataAccess} = this;
         if (isViewAutoSavable && pendingValue) {
             try {
-                const updated = await api
+                const updated = await dataAccess
                     .updateViewValueAsync(view, pendingValue.value)
                     .linkTo(this.saveTask);
 
@@ -551,6 +598,10 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         XH.successToast(msg);
     }
 
+    private get pendingValueStorageKey(): string {
+        return `${this.type}_${this.instance}`;
+    }
+
     /**
      * Stringify and parse to ensure that any value set here is valid, serializable JSON.
      */
@@ -575,7 +626,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     private async maybeConfirmSaveAsync(view: View, pendingValue: PendingValue<T>) {
         // Get latest from server for reference
-        const latest = await this.api.fetchViewAsync(view.info),
+        const latest = await this.dataAccess.fetchViewAsync(view.info),
             isGlobal = latest.isGlobal,
             isStale = latest.lastUpdated > pendingValue.baseUpdated;
         if (!isStale && !isGlobal) return true;
@@ -613,86 +664,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             }
         });
     }
-
-    //------------------
-    // Persistence
-    //------------------
-    private initPersist(options: ViewManagerPersistOptions) {
-        const {
-            persistPinning = true,
-            persistPendingValue = false,
-            path = 'viewManager',
-            ...rootPersistWith
-        } = options;
-
-        // Pinning potentially in dedicated location
-        if (persistPinning) {
-            const opts = isObject(persistPinning) ? persistPinning : rootPersistWith;
-            PersistenceProvider.create({
-                persistOptions: {path: `${path}.pinning`, ...opts},
-                target: {
-                    getPersistableState: () => new PersistableState(this.userPinned),
-                    setPersistableState: ({value}) => {
-                        const {views} = this;
-                        this.userPinned = !isEmpty(views) // Clean state iff views loaded!
-                            ? pickBy(value, (_, tkn) => views.some(v => v.token === tkn))
-                            : value;
-                    }
-                },
-                owner: this
-            });
-        }
-
-        // AutoSave, potentially in core location.
-        if (this.enableAutoSave) {
-            PersistenceProvider.create({
-                persistOptions: {path: `${path}.autoSave`, ...rootPersistWith},
-                target: {
-                    getPersistableState: () => new PersistableState(this.autoSave),
-                    setPersistableState: ({value}) => (this.autoSave = value)
-                },
-                owner: this
-            });
-        }
-
-        // Pending Value, potentially in dedicated location
-        // On hydration, stash away for one time use when hydrating view itself below
-        if (persistPendingValue) {
-            const opts = isObject(persistPendingValue) ? persistPendingValue : rootPersistWith;
-            PersistenceProvider.create({
-                persistOptions: {path: `${path}.pendingValue`, ...opts},
-                target: {
-                    getPersistableState: () => new PersistableState(this.pendingValue),
-                    setPersistableState: ({value}) => {
-                        // Only accept this during initialization!
-                        if (!this.view) this.pendingValue = value;
-                    }
-                },
-                owner: this
-            });
-        }
-
-        // View, in core location
-        PersistenceProvider.create({
-            persistOptions: {path: `${path}.view`, ...rootPersistWith},
-            target: {
-                // View could be null, just before initialization.
-                getPersistableState: () => new PersistableState(this.view?.token),
-                setPersistableState: async ({value: token}) => {
-                    // Requesting available view -- load it with any init pending val.
-                    const viewInfo = token ? find(this.views, {token}) : null;
-                    if (viewInfo || !token) {
-                        try {
-                            await this.loadViewAsync(viewInfo, this.pendingValue);
-                        } catch (e) {
-                            this.logError('Failure loading persisted view', e);
-                        }
-                    }
-                }
-            },
-            owner: this
-        });
-    }
 }
 
 interface PendingValue<T> {

package/cmp/viewmanager/index.ts

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

package/desktop/cmp/button/Button.scss

@@ -56,33 +56,12 @@
         padding: var(--xh-pad-half-px) var(--xh-pad-px);
       }
 
-      // Standard and outlined have borders - remove standard radius in between adjacent buttons so
-      // they seamlessly combine their inner borders.
-      border-radius: 0;
-      &.xh-button--standard,
-      &.xh-button--outlined {
-        &:first-child {
-          border-bottom-left-radius: var(--xh-button-border-radius-px);
-          border-top-left-radius: var(--xh-button-border-radius-px);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--xh-button-border-radius-px);
-          border-top-right-radius: var(--xh-button-border-radius-px);
-        }
-      }
-
       // Minimal has no borders - radius is made visible by background shading when hovered or
       // pressed, and looks more natural without any radius.
       &.xh-button--minimal {
         border-radius: 0;
       }
 
-      // Outlined buttons should avoid doubled-up inner borders.
-      &.xh-button--outlined:not(:last-child) {
-        border-right: none;
-      }
-
       &.xh-button--enabled {
         // Hoist calls FocusStyleManager.onlyShowFocusOnTabs(), which by default hides focus indicators
         // unless a component has been tabbed into via keyboard. Override here to always show a focus
@@ -93,6 +72,54 @@
         }
       }
     }
+
+    // Horizontal mode only styles
+    &:not(.bp5-vertical) {
+      .xh-button.bp5-button {
+        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
+        // they seamlessly combine their inner borders.
+        border-radius: 0;
+        &.xh-button--standard,
+        &.xh-button--outlined {
+          &:first-child {
+            border-radius: var(--xh-button-border-radius-px) 0 0 var(--xh-button-border-radius-px);
+          }
+
+          &:last-child {
+            border-radius: 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0;
+          }
+        }
+
+        // Outlined buttons should avoid doubled-up inner borders.
+        &.xh-button--outlined:not(:last-child) {
+          border-right: none;
+        }
+      }
+    }
+
+    // Vertical mode only styles
+    &.bp5-vertical {
+      .xh-button.bp5-button {
+        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
+        // they seamlessly combine their inner borders.
+        border-radius: 0;
+        &.xh-button--standard,
+        &.xh-button--outlined {
+          &:first-child {
+            border-radius: var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0 0;
+          }
+
+          &:last-child {
+            border-radius: 0 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px);
+          }
+        }
+
+        // Outlined buttons should avoid doubled-up inner borders.
+        &.xh-button--outlined:not(:last-child) {
+          border-bottom: none;
+        }
+      }
+    }
   }
 }
 

package/package.json

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

package/svc/JsonBlobService.ts

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {HoistService, LoadSpec, PlainObject, XH} from '@xh/hoist/core';
-import {isUndefined, omitBy} from 'lodash';
+import {pick} from 'lodash';
 
 export interface JsonBlob {
     /** Either null for private blobs or special token "*" for globally shared blobs. */
@@ -89,17 +89,32 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Modify mutable properties of an existing JSONBlob, as identified by its unique token. */
-    async updateAsync(
-        token: string,
-        {acl, description, meta, name, owner, value}: Partial<JsonBlob>
-    ): Promise<JsonBlob> {
-        const update = omitBy({acl, description, meta, name, owner, value}, isUndefined);
+    async updateAsync(token: string, update: Partial<JsonBlob>): Promise<JsonBlob> {
+        update = pick(update, ['acl', 'description', 'meta', 'name', 'owner', 'value']);
         return XH.fetchJson({
             url: 'xh/updateJsonBlob',
-            params: {
-                token,
-                update: JSON.stringify(update)
-            }
+            params: {token, update: JSON.stringify(update)}
+        });
+    }
+
+    /** Create or update a blob for a user with the existing type and name. */
+    async createOrUpdateAsync(
+        type: string,
+        name: string,
+        data: Partial<JsonBlob>
+    ): Promise<JsonBlob> {
+        const update = pick(data, ['acl', 'description', 'meta', 'value']);
+        return XH.fetchJson({
+            url: 'xh/createOrUpdateJsonBlob',
+            params: {type, name, update: JSON.stringify(update)}
+        });
+    }
+
+    /** Find a blob owned by this user with a specific type and name.  If none exists, return null.  */
+    async findAsync(type: string, name: string): Promise<JsonBlob> {
+        return XH.fetchJson({
+            url: 'xh/findJsonBlob',
+            params: {type, name}
         });
     }