@xh/hoist 71.0.0-SNAPSHOT.1733791818708 → 71.0.0-SNAPSHOT.1734118787755

package/cmp/viewmanager/ViewManagerModel.ts

@@ -10,7 +10,6 @@ import {
     ExceptionHandlerOptions,
     HoistModel,
     LoadSpec,
-    managed,
     PersistableState,
     PersistenceProvider,
     PersistOptions,
@@ -25,12 +24,11 @@ import {fmtDateTime} from '@xh/hoist/format';
 import {action, bindable, makeObservable, observable, runInAction, when} from '@xh/hoist/mobx';
 import {olderThan, SECONDS} from '@xh/hoist/utils/datetime';
 import {executeIfFunction, pluralize, throwIf} from '@xh/hoist/utils/js';
-import {find, isEqual, isNil, isObject, lowerCase, without} from 'lodash';
+import {find, isEmpty, isEqual, isNil, isObject, lowerCase, pickBy} from 'lodash';
 import {ReactNode} from 'react';
-import {SaveAsDialogModel} from './SaveAsDialogModel';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
-import {ViewToBlobApi} from './ViewToBlobApi';
+import {ViewToBlobApi, ViewCreateSpec} from './ViewToBlobApi';
 
 export interface ViewManagerConfig {
     /**
@@ -45,8 +43,10 @@ export interface ViewManagerConfig {
      */
     enableDefault?: boolean;
 
-    /** True (default) to allow user to mark views as favorites. Requires `persistWith`. */
-    enableFavorites?: boolean;
+    /**
+     * True (default) to allow users to share their views with other users.
+     */
+    enableSharing?: boolean;
 
     /**
      * Function to determine the initial view for a user, when no view has already been persisted.
@@ -59,11 +59,10 @@ export interface ViewManagerConfig {
     initialViewSpec?: (views: ViewInfo[]) => ViewInfo;
 
     /**
-     * Delay after state has been set on associated components before they will be observed for
-     * any further state changes.  Larger values may be useful when providing state to complex
-     * components such as dashboards or grids that may create dirty state immediately after load.
-     *
-     * Specified in milliseconds.  Default is 250.
+     * Delay (in ms) to wait after state has been set on associated components before listening for
+     * further state changes. The long default wait 1000ms is intended to avoid a false positive
+     * dirty indicator when linking to complex components such as dashboards or grids that can
+     * report immediate changes to state due to internal processing or rendering.
      */
     settleTime?: number;
 
@@ -97,8 +96,8 @@ export interface ViewManagerConfig {
 }
 
 export interface ViewManagerPersistOptions extends PersistOptions {
-    /** True to persist favorites or provide specific PersistOptions. (Default true) */
-    persistFavorites?: boolean | 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;
@@ -112,8 +111,8 @@ export interface ViewManagerPersistOptions extends PersistOptions {
  *    models can be bound to a single ViewManagerModel, allowing a single view to capture the state
  *    of multiple components - e.g. grouping and filtering options along with grid state.
  *  - Views are persisted back to the server as JsonBlob objects.
- *  - Views can be private to their owner, or optionally enabled for global use by (all) other users.
- *  - Views can be marked as favorites for quick access.
+ *  - Views can be private to their owner, or optionally enabled for sharing to (all) other users.
+ *  - Views can be marked as pinned for quick access.
  *  - See the desktop {@link ViewManager} component - the initial Hoist UI for this model.
  */
 export class ViewManagerModel<T = PlainObject> extends HoistModel {
@@ -146,7 +145,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly globalDisplayName: string;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
-    readonly enableFavorites: boolean;
+    readonly enableSharing: boolean;
     readonly manageGlobal: boolean;
     readonly settleTime: number;
     readonly initialViewSpec: (views: ViewInfo[]) => ViewInfo;
@@ -155,8 +154,14 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     @observable.ref view: View<T> = null;
     /** Loaded saved view library - both private and global */
     @observable.ref views: ViewInfo[] = [];
-    /** List of tokens for the user's favorite views. */
-    @observable.ref favorites: string[] = [];
+
+    /**
+     * Map of user's preferred pinned state for views.
+     *
+     * Note that the actual pinned state for the views is determined by this value, layered
+     * over the default state of the views themselves.
+     */
+    @observable.ref userPinned: Record<string, boolean> = {};
 
     /**
      * True if user has opted-in to automatically saving changes to personal views (if auto-save
@@ -170,14 +175,9 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
      */
     selectTask: TaskObserver;
 
-    /**
-     * TaskObserver linked to {@link saveAsync}.
-     */
+    /** TaskObserver linked to {@link saveAsync}. */
     saveTask: TaskObserver;
 
-    @observable manageDialogOpen = false;
-    @managed saveAsDialogModel: SaveAsDialogModel;
-
     //-----------------------
     // Private, internal state.
     //-------------------------
@@ -194,7 +194,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     providers: ViewManagerProvider<any>[] = [];
 
     /**
-     * Data access for persisting views
+     * Data access for persisting views.
      * @internal
      */
     api: ViewToBlobApi<T>;
@@ -211,32 +211,47 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     get isViewSavable(): boolean {
         const {view, manageGlobal} = this;
-        return !view.isDefault && (manageGlobal || !view.isGlobal);
+        return view.isOwned || (view.isGlobal && manageGlobal);
     }
 
     get isViewAutoSavable(): boolean {
         const {enableAutoSave, autoSave, view} = this;
-        return enableAutoSave && autoSave && !view.isGlobal && !view.isDefault;
+        return (
+            enableAutoSave &&
+            autoSave &&
+            !view.isShared &&
+            !view.isDefault &&
+            !XH.identityService.isImpersonating
+        );
     }
 
     get autoSaveUnavailableReason(): string {
         const {view, isViewAutoSavable, typeDisplayName, globalDisplayName} = this;
         if (isViewAutoSavable) return null;
         if (view.isGlobal) return `Cannot auto-save ${globalDisplayName} ${typeDisplayName}.`;
+        if (view.isShared) return `Cannot auto-save shared ${typeDisplayName}.`;
         if (view.isDefault) return `Cannot auto-save default ${typeDisplayName}.`;
+        if (XH.identityService.isImpersonating) return `Auto-save disabled during impersonation.`;
         return null;
     }
 
-    get favoriteViews(): ViewInfo[] {
-        return this.views.filter(it => it.isFavorite);
+    get pinnedViews(): ViewInfo[] {
+        return this.views.filter(it => it.isPinned);
     }
 
-    get globalViews(): ViewInfo[] {
-        return this.views.filter(it => it.isGlobal);
+    /** Views owned by me */
+    get ownedViews(): ViewInfo[] {
+        return this.views.filter(it => it.isOwned);
     }
 
-    get privateViews(): ViewInfo[] {
-        return this.views.filter(it => !it.isGlobal);
+    /** Views shared *with* me */
+    get sharedViews(): ViewInfo[] {
+        return this.views.filter(it => it.isShared && !it.isOwned);
+    }
+
+    /** Global views */
+    get globalViews(): ViewInfo[] {
+        return this.views.filter(it => it.isGlobal);
     }
 
     /** True if any async tasks are pending. */
@@ -257,8 +272,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         manageGlobal = false,
         enableAutoSave = true,
         enableDefault = true,
-        settleTime = 250,
-        enableFavorites = true,
+        enableSharing = true,
+        settleTime = 1000,
         initialViewSpec = null
     }: ViewManagerConfig) {
         super();
@@ -275,8 +290,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.persistWith = persistWith;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
         this.enableDefault = enableDefault;
+        this.enableSharing = enableSharing;
         this.enableAutoSave = enableAutoSave;
-        this.enableFavorites = enableFavorites;
         this.settleTime = settleTime;
         this.initialViewSpec = initialViewSpec;
 
@@ -287,7 +302,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             message: `Saving ${this.typeDisplayName}...`
         });
 
-        this.saveAsDialogModel = new SaveAsDialogModel(this);
         this.api = new ViewToBlobApi(this);
     }
 
@@ -322,6 +336,14 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         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()});
+        this.noteSuccess(`Created ${view.typedName}`);
+        this.userPin(view.info);
+        this.setAsView(view);
+        this.refreshAsync();
+    }
+
     //------------------------
     // Saving/resetting
     //------------------------
@@ -349,15 +371,6 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         this.refreshAsync();
     }
 
-    async saveAsAsync(): Promise<void> {
-        const view = (await this.saveAsDialogModel.openAsync()) as View<T>;
-        if (view) {
-            this.setAsView(view);
-            this.noteSuccess(`Saved ${view.typedName}`);
-        }
-        this.refreshAsync();
-    }
-
     async resetAsync(): Promise<void> {
         await this.loadViewAsync(this.view.info).catch(e => this.handleException(e));
     }
@@ -389,40 +402,29 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     }
 
     //------------------
-    // Favorites
+    // Pinning
     //------------------
-    toggleFavorite(token: string) {
-        this.isFavorite(token) ? this.removeFavorite(token) : this.addFavorite(token);
+    togglePinned(view: ViewInfo) {
+        view.isPinned ? this.userUnpin(view) : this.userPin(view);
     }
 
     @action
-    addFavorite(token: string) {
-        this.favorites = [...this.favorites, token];
+    userPin(view: ViewInfo) {
+        this.userPinned = {...this.userPinned, [view.token]: true};
     }
 
     @action
-    removeFavorite(token: string) {
-        this.favorites = without(this.favorites, token);
+    userUnpin(view: ViewInfo) {
+        this.userPinned = {...this.userPinned, [view.token]: false};
     }
 
-    isFavorite(token: string) {
-        return this.favorites.includes(token);
+    isUserPinned(view: ViewInfo): boolean | null {
+        return this.userPinned[view.token];
     }
 
     //-----------------
     // Management
     //-----------------
-    @action
-    openManageDialog() {
-        this.manageDialogOpen = true;
-        this.refreshAsync();
-    }
-
-    @action
-    closeManageDialog() {
-        this.manageDialogOpen = false;
-    }
-
     async validateViewNameAsync(name: string, existing: ViewInfo = null): Promise<string> {
         const maxLength = 50;
         name = name?.trim();
@@ -430,8 +432,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         if (name.length > maxLength) {
             return `Name cannot be longer than ${maxLength} characters`;
         }
-        if (this.views.some(view => view.name === name && view.token != existing?.token)) {
-            return `A ${this.typeDisplayName} with name '${name}' already exists`;
+        if (this.ownedViews.some(view => view.name === name && view.token != existing?.token)) {
+            return `A ${this.typeDisplayName} with name '${name}' already exists.`;
         }
         return null;
     }
@@ -555,15 +557,15 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         if (isGlobal) {
             msgs.push(
                 span(
-                    `This is a ${globalDisplayName} ${typeDisplayName}.`,
-                    strong('Changes will be visible to ALL users.')
+                    `This is a ${globalDisplayName} ${typeDisplayName}. `,
+                    strong('Changes will be visible to all users.')
                 )
             );
         }
         if (isStale) {
             msgs.push(
                 span(
-                    `This ${typeDisplayName} was updated by ${latestInfo.lastUpdatedBy} on ${fmtDateTime(latestInfo.lastUpdated)}.`,
+                    `This ${typeDisplayName} was updated by ${latestInfo.lastUpdatedBy} on ${fmtDateTime(latestInfo.lastUpdated)}. `,
                     strong('Your change may override those changes.')
                 )
             );
@@ -574,11 +576,11 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
             confirmProps: {
                 text: 'Yes, save changes',
                 intent: 'primary',
-                outlined: true
+                outlined: true,
+                autoFocus: false
             },
             cancelProps: {
-                text: 'Cancel',
-                autoFocus: true
+                text: 'Cancel'
             }
         });
     }
@@ -588,21 +590,24 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     //------------------
     private initPersist(options: ViewManagerPersistOptions) {
         const {
-            persistFavorites = true,
+            persistPinning = true,
             persistPendingValue = false,
             path = 'viewManager',
             ...rootPersistWith
         } = options;
 
-        // Favorites, potentially in dedicated location
-        if (this.enableFavorites && persistFavorites) {
-            const opts = isObject(persistFavorites) ? persistFavorites : rootPersistWith;
+        // Pinning potentially in dedicated location
+        if (persistPinning) {
+            const opts = isObject(persistPinning) ? persistPinning : rootPersistWith;
             PersistenceProvider.create({
-                persistOptions: {path: `${path}.favorites`, ...opts},
+                persistOptions: {path: `${path}.pinning`, ...opts},
                 target: {
-                    getPersistableState: () => new PersistableState(this.favorites),
+                    getPersistableState: () => new PersistableState(this.userPinned),
                     setPersistableState: ({value}) => {
-                        this.favorites = value.filter(tkn => this.views.some(v => v.token === tkn));
+                        const {views} = this;
+                        this.userPinned = !isEmpty(views) // Clean state iff views loaded!
+                            ? pickBy(value, (_, tkn) => views.some(v => v.token === tkn))
+                            : value;
                     }
                 },
                 owner: this

package/cmp/viewmanager/ViewToBlobApi.ts

@@ -6,85 +6,108 @@
  */
 
 import {PlainObject, XH} from '@xh/hoist/core';
-import {pluralize} from '@xh/hoist/utils/js';
+import {pluralize, throwIf} from '@xh/hoist/utils/js';
+import {omit, pick} from 'lodash';
 import {ViewInfo} from './ViewInfo';
 import {View} from './View';
 import {ViewManagerModel} from './ViewManagerModel';
 
+export interface ViewCreateSpec {
+    name: string;
+    group: string;
+    description: string;
+    isShared: boolean;
+    value?: PlainObject;
+}
+
+export interface ViewUpdateSpec {
+    name: string;
+    group: string;
+    description: string;
+    isShared?: boolean;
+    isDefaultPinned?: boolean;
+}
+
 /**
- * Class for accessing and updating views using JSON Blobs Service.
- *
+ * Class for accessing and updating views using {@link JsonBlobService}.
  * @internal
  */
 export class ViewToBlobApi<T> {
-    private owner: ViewManagerModel<T>;
+    private readonly model: ViewManagerModel<T>;
 
-    constructor(owner: ViewManagerModel<T>) {
-        this.owner = owner;
+    constructor(model: ViewManagerModel<T>) {
+        this.model = model;
     }
 
     //---------------
     // Load/search.
     //---------------
+    /** Fetch metadata for all views accessible by current user. */
     async fetchViewInfosAsync(): Promise<ViewInfo[]> {
-        const {owner} = this;
+        const {model} = this;
         try {
             const blobs = await XH.jsonBlobService.listAsync({
-                type: owner.type,
+                type: model.type,
                 includeValue: false
             });
-            return blobs.map(b => new ViewInfo(b, owner));
+            return blobs.map(b => new ViewInfo(b, model));
         } catch (e) {
             throw XH.exception({
-                message: `Unable to fetch ${pluralize(owner.typeDisplayName)}`,
+                message: `Unable to fetch ${pluralize(model.typeDisplayName)}`,
                 cause: e
             });
         }
     }
 
+    /** Fetch the latest version of a view. */
     async fetchViewAsync(info: ViewInfo): Promise<View<T>> {
-        if (!info) return View.createDefault(this.owner);
+        const {model} = this;
+        if (!info) return View.createDefault(model);
         try {
             const blob = await XH.jsonBlobService.getAsync(info.token);
-            return View.fromBlob(blob, this.owner);
+            return View.fromBlob(blob, model);
         } catch (e) {
             throw XH.exception({message: `Unable to fetch ${info.typedName}`, cause: e});
         }
     }
 
     //-----------------
-    // Crud
+    // CRUD
     //-----------------
-    async createViewAsync(name: string, description: string, value: PlainObject): Promise<View<T>> {
-        const {owner} = this;
+    /** Create a new view, owned by the current user.*/
+    async createViewAsync(spec: ViewCreateSpec): Promise<View<T>> {
+        const {model} = this;
         try {
             const blob = await XH.jsonBlobService.createAsync({
-                type: owner.type,
-                name: name.trim(),
-                description: description?.trim(),
-                value
+                type: model.type,
+                name: spec.name,
+                description: spec.description,
+                acl: spec.isShared ? '*' : null,
+                meta: {group: spec.group, isShared: spec.isShared},
+                value: spec.value
             });
-            const ret = View.fromBlob(blob, owner);
+            const ret = View.fromBlob(blob, model);
             this.trackChange('Created View', ret);
             return ret;
         } catch (e) {
-            throw XH.exception({message: `Unable to create ${owner.typeDisplayName}`, cause: e});
+            throw XH.exception({message: `Unable to create ${model.typeDisplayName}`, cause: e});
         }
     }
 
-    async updateViewInfoAsync(
-        view: ViewInfo,
-        name: string,
-        description: string,
-        isGlobal: boolean
-    ): Promise<View<T>> {
+    /** Update all aspects of a view's metadata.*/
+    async updateViewInfoAsync(view: ViewInfo, updates: ViewUpdateSpec): Promise<View<T>> {
         try {
-            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.ensureEditable(view);
+            const {isGlobal} = view,
+                {name, group, description, isShared, isDefaultPinned} = updates,
+                meta = {...view.meta, group},
+                blob = await XH.jsonBlobService.updateAsync(view.token, {
+                    name: name.trim(),
+                    description: description?.trim(),
+                    acl: isGlobal || isShared ? '*' : null,
+                    meta: isGlobal ? {...meta, isDefaultPinned} : {...meta, isShared}
+                });
+            const ret = View.fromBlob(blob, this.model);
             this.trackChange('Updated View Info', ret);
             return ret;
         } catch (e) {
@@ -92,10 +115,30 @@ export class ViewToBlobApi<T> {
         }
     }
 
+    /** Promote a view to global visibility/ownership status. */
+    async makeViewGlobalAsync(view: ViewInfo): Promise<View<T>> {
+        try {
+            this.ensureEditable(view);
+            const meta = view.meta,
+                blob = await XH.jsonBlobService.updateAsync(view.token, {
+                    owner: null,
+                    acl: '*',
+                    meta: omit(meta, ['isShared'])
+                });
+            const ret = View.fromBlob(blob, this.model);
+            this.trackChange('Made View Global', ret);
+            return ret;
+        } catch (e) {
+            throw XH.exception({message: `Unable to update ${view.typedName}`, cause: e});
+        }
+    }
+
+    /** Update a view's value. */
     async updateViewValueAsync(view: View<T>, value: Partial<T>): Promise<View<T>> {
         try {
+            this.ensureEditable(view.info);
             const blob = await XH.jsonBlobService.updateAsync(view.token, {value});
-            const ret = View.fromBlob(blob, this.owner);
+            const ret = View.fromBlob(blob, this.model);
             if (ret.isGlobal) {
                 this.trackChange('Updated Global View definition', ret);
             }
@@ -108,8 +151,10 @@ export class ViewToBlobApi<T> {
         }
     }
 
+    /** Delete a view. */
     async deleteViewAsync(view: ViewInfo) {
         try {
+            this.ensureEditable(view);
             await XH.jsonBlobService.archiveAsync(view.token);
             this.trackChange('Deleted View', view);
         } catch (e) {
@@ -117,11 +162,22 @@ export class ViewToBlobApi<T> {
         }
     }
 
+    //------------------
+    // Implementation
+    //------------------
     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}
+            data: pick(v, ['name', 'token', 'isGlobal', 'type'])
         });
     }
+
+    private ensureEditable(view: ViewInfo) {
+        const {model} = this;
+        throwIf(
+            !view.isEditable,
+            `Cannot save changes to ${model.globalDisplayName} ${model.typeDisplayName} - missing required permission.`
+        );
+    }
 }

package/cmp/viewmanager/index.ts

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

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -24,7 +24,17 @@ import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {debounced, ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {cloneDeep, defaultsDeep, find, isFinite, isNil, last, reject, startCase} from 'lodash';
+import {
+    cloneDeep,
+    defaultsDeep,
+    find,
+    isEqual,
+    isFinite,
+    isNil,
+    last,
+    reject,
+    startCase
+} from 'lodash';
 import {createRoot} from 'react-dom/client';
 import {DashConfig, DashModel} from '../';
 import {DashViewModel, DashViewState} from '../DashViewModel';
@@ -371,13 +381,15 @@ export class DashContainerModel
         this.publishState();
     }
 
-    @debounced(1000)
+    @debounced(100)
     private publishState() {
         const {goldenLayout} = this;
         if (!goldenLayout) return;
-        runInAction(() => {
-            this.state = convertGLToState(goldenLayout, this);
-        });
+
+        const newState = convertGLToState(goldenLayout, this);
+        if (!isEqual(this.state, newState)) {
+            runInAction(() => (this.state = newState));
+        }
     }
 
     private onItemDestroyed(item) {