@xh/hoist 70.0.0-SNAPSHOT.1731083521069 → 70.0.0-SNAPSHOT.1731623470295

package/core/persist/viewmanager/impl/ManageDialogModel.ts

@@ -0,0 +1,274 @@
+import {FormModel} from '@xh/hoist/cmp/form';
+import {GridAutosizeMode, GridModel} from '@xh/hoist/cmp/grid';
+import {fragment, p} from '@xh/hoist/cmp/layout';
+import {HoistModel, lookup, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {lengthIs, required} from '@xh/hoist/data';
+import {Icon} from '@xh/hoist/icon';
+import {makeObservable} from '@xh/hoist/mobx';
+import {pluralize, throwIf} from '@xh/hoist/utils/js';
+import {ViewManagerModel} from '../ViewManagerModel';
+
+export class ManageDialogModel extends HoistModel {
+    @lookup(() => ViewManagerModel)
+    private viewManagerModel: ViewManagerModel;
+
+    @managed gridModel: GridModel;
+    @managed formModel: FormModel;
+
+    readonly saveTask = TaskObserver.trackLast();
+    readonly deleteTask = TaskObserver.trackLast();
+
+    get selectedId(): string {
+        return this.gridModel.selectedId as string;
+    }
+
+    get selectedIds(): string[] {
+        return this.gridModel.selectedIds as string[];
+    }
+
+    get hasMultiSelection(): boolean {
+        return this.selectedIds.length > 1;
+    }
+
+    get selIsShared(): boolean {
+        return this.gridModel.selectedRecords.some(rec => rec.data.isShared);
+    }
+
+    get canDelete(): boolean {
+        const {viewManagerModel, selIsShared, enableSharing, selectedIds} = this,
+            {views, enableDefault} = viewManagerModel;
+
+        // Can't delete shared views without manager role.
+        if (selIsShared && !enableSharing) return false;
+
+        // Can't delete all the views, unless default mode is enabled.
+        return enableDefault || views.length - selectedIds.length > 0;
+    }
+
+    get canEdit(): boolean {
+        return this.enableSharing || !this.selIsShared;
+    }
+
+    get enableSharing(): boolean {
+        return this.viewManagerModel.enableSharing;
+    }
+
+    get showSaveButton(): boolean {
+        const {formModel, viewManagerModel} = this;
+        return formModel.isDirty && !formModel.readonly && !viewManagerModel.loadModel.isPending;
+    }
+
+    get displayName(): string {
+        return this.viewManagerModel.displayName;
+    }
+
+    get enableFavorites(): boolean {
+        return this.viewManagerModel.enableFavorites;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        super.onLinked();
+
+        this.gridModel = this.createGridModel();
+        this.formModel = this.createFormModel();
+
+        this.addReaction(
+            {
+                track: () => this.viewManagerModel.views,
+                run: () => this.refreshAsync()
+            },
+            {
+                track: () => this.gridModel.selectedRecord,
+                run: record => {
+                    if (record) {
+                        this.formModel.readonly = !this.canEdit;
+                        this.formModel.init(record.data);
+                    }
+                }
+            }
+        );
+    }
+
+    override async doLoadAsync() {
+        this.gridModel.loadData(this.viewManagerModel.views);
+        await this.ensureGridHasSelection();
+    }
+
+    async saveAsync() {
+        return this.doSaveAsync().linkTo(this.saveTask).catchDefault();
+    }
+
+    async deleteAsync() {
+        return this.doDeleteAsync().linkTo(this.deleteTask).catchDefault();
+    }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private async doSaveAsync() {
+        const {formModel, viewManagerModel, enableSharing, selectedId, gridModel, displayName} =
+                this,
+            {isDirty} = formModel,
+            {name, description, isShared} = formModel.getData(),
+            isValid = await formModel.validateAsync(),
+            {token, owner} = gridModel.selectedRecord.data,
+            isOwnView = owner === XH.getUsername();
+
+        if (!isValid || !selectedId || !isDirty) return;
+
+        // Additional sanity-check before POSTing an update - non-admins should never be modifying global views.
+        throwIf(
+            isShared && !enableSharing,
+            `Cannot save changes to shared ${displayName} - missing required permission.`
+        );
+
+        if (formModel.getField('isShared').isDirty) {
+            const confirmMsgs = [];
+            if (isShared) {
+                confirmMsgs.push(
+                    `This ${displayName} will become visible to all other ${XH.appName} users.`
+                );
+            } else if (isOwnView) {
+                confirmMsgs.push(
+                    `The selected ${displayName} will revert to being private to you. It will no longer be available to other users.`
+                );
+            } else {
+                confirmMsgs.push(
+                    `The selected ${displayName} will revert to being private to its owner (${owner}).`,
+                    `Note that you will no longer have access to this view, meaning you will not be able to undo this change.`
+                );
+            }
+
+            confirmMsgs.push('Are you sure you want to proceed?');
+
+            const confirmed = await XH.confirm({
+                message: fragment(confirmMsgs.map(msg => p(msg))),
+                confirmProps: {
+                    text: 'Yes, update visibility',
+                    outlined: true,
+                    autoFocus: false,
+                    intent: 'primary'
+                }
+            });
+
+            if (!confirmed) return;
+        }
+
+        await XH.jsonBlobService.updateAsync(token, {
+            name,
+            description,
+            acl: isShared ? '*' : null
+        });
+
+        await viewManagerModel.refreshAsync();
+    }
+
+    private async doDeleteAsync() {
+        const {viewManagerModel, gridModel, displayName, selectedIds, hasMultiSelection} = this,
+            count = selectedIds.length;
+        if (!count) return;
+
+        const confirmStr = hasMultiSelection
+                ? pluralize(displayName, count, true)
+                : `"${gridModel.selectedRecord.data.name}"`,
+            confirmed = await XH.confirm({
+                message: `Are you sure you want to delete ${confirmStr}?`,
+                confirmProps: {
+                    text: `Yes, delete ${pluralize(displayName, count)}`,
+                    outlined: true,
+                    autoFocus: false,
+                    intent: 'danger'
+                }
+            });
+        if (!confirmed) return;
+
+        for (const token of selectedIds) {
+            viewManagerModel.removeFavorite(token);
+            await XH.jsonBlobService.archiveAsync(token);
+        }
+
+        await viewManagerModel.refreshAsync();
+    }
+
+    private async ensureGridHasSelection() {
+        const {gridModel, viewManagerModel} = this,
+            {selectedToken} = viewManagerModel;
+
+        if (!gridModel.hasSelection) {
+            selectedToken
+                ? await gridModel.selectAsync(selectedToken)
+                : await gridModel.preSelectFirstAsync();
+        }
+    }
+
+    private createGridModel(): GridModel {
+        return new GridModel({
+            emptyText: `No saved ${pluralize(this.displayName)} found...`,
+            sortBy: 'name',
+            groupBy: 'group',
+            hideHeaders: true,
+            showGroupRowCounts: false,
+            selModel: 'multiple',
+            store: {
+                idSpec: 'token',
+                fields: [
+                    {name: 'token', type: 'string'},
+                    {name: 'name', type: 'string'},
+                    {name: 'description', type: 'string'},
+                    {name: 'isShared', type: 'bool'},
+                    {name: 'isFavorite', type: 'bool'},
+                    {name: 'acl', type: 'json'},
+                    {name: 'meta', type: 'json'},
+                    {name: 'dateCreated', type: 'date'},
+                    {name: 'createdBy', type: 'string'},
+                    {name: 'owner', type: 'string'},
+                    {name: 'lastUpdatedBy', type: 'string'},
+                    {name: 'lastUpdated', type: 'date'}
+                ]
+            },
+            autosizeOptions: {mode: GridAutosizeMode.DISABLED},
+            columns: [
+                {field: 'name', flex: true},
+                {
+                    field: 'isFavorite',
+                    omit: !this.enableFavorites,
+                    width: 40,
+                    align: 'center',
+                    headerName: Icon.favorite(),
+                    highlightOnChange: true,
+                    renderer: v => {
+                        return Icon.favorite({
+                            prefix: v ? 'fas' : 'fal',
+                            className: v ? 'xh-yellow' : 'xh-text-color-muted'
+                        });
+                    }
+                },
+                {field: 'group', hidden: true}
+            ],
+            onCellClicked: ({colDef, data: record}) => {
+                if (colDef.colId === 'isFavorite') {
+                    this.viewManagerModel.toggleFavorite(record.id);
+                }
+            }
+        });
+    }
+
+    private createFormModel(): FormModel {
+        return new FormModel({
+            fields: [
+                {name: 'name', rules: [required, lengthIs({max: 255})]},
+                {name: 'description'},
+                {name: 'isShared', displayName: 'Shared'},
+                {name: 'owner', readonly: true},
+                {name: 'dateCreated', displayName: 'Created', readonly: true},
+                {name: 'lastUpdated', displayName: 'Updated', readonly: true},
+                {name: 'lastUpdatedBy', displayName: 'Updated By', readonly: true}
+            ]
+        });
+    }
+}

package/core/persist/viewmanager/impl/SaveDialogModel.ts

@@ -0,0 +1,112 @@
+import {FormModel} from '@xh/hoist/cmp/form';
+import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {ViewManagerModel} from '@xh/hoist/core/persist/viewmanager';
+import {lengthIs, required} from '@xh/hoist/data';
+import {makeObservable} from '@xh/hoist/mobx';
+import {JsonBlob} from '@xh/hoist/svc';
+import {action, observable} from 'mobx';
+import {View} from '../Types';
+
+export class SaveDialogModel extends HoistModel {
+    private readonly viewManagerModel: ViewManagerModel;
+
+    @managed readonly formModel: FormModel;
+    readonly saveTask = TaskObserver.trackLast();
+
+    @observable viewStub: Partial<View>;
+    @observable isOpen: boolean = false;
+
+    private resolveOpen: (value: JsonBlob) => void;
+    private invalidNames: string[] = [];
+
+    get type(): string {
+        return this.viewManagerModel.viewType;
+    }
+
+    get DisplayName(): string {
+        return this.viewManagerModel.DisplayName;
+    }
+
+    constructor(viewManagerModel: ViewManagerModel) {
+        super();
+        makeObservable(this);
+        this.viewManagerModel = viewManagerModel;
+        this.formModel = this.createFormModel();
+    }
+
+    @action
+    openAsync(viewStub: Partial<View>, invalidNames: string[]): Promise<JsonBlob> {
+        this.viewStub = viewStub;
+        this.invalidNames = invalidNames;
+
+        this.formModel.init({
+            name: viewStub.name ? `${viewStub.name} (COPY)` : '',
+            description: viewStub.description
+        });
+
+        this.isOpen = true;
+
+        return new Promise(resolve => {
+            this.resolveOpen = resolve;
+        });
+    }
+
+    cancel() {
+        this.close();
+        this.resolveOpen(null);
+    }
+
+    async saveAsAsync() {
+        return this.doSaveAsAsync().linkTo(this.saveTask);
+    }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private createFormModel(): FormModel {
+        return new FormModel({
+            fields: [
+                {
+                    name: 'name',
+                    rules: [
+                        required,
+                        lengthIs({max: 255}),
+                        ({value}) => {
+                            if (this.invalidNames.includes(value)) {
+                                return `An entry with name "${value}" already exists`;
+                            }
+                        }
+                    ]
+                },
+                {name: 'description'}
+            ]
+        });
+    }
+
+    private async doSaveAsAsync() {
+        const {formModel, viewStub, type} = this,
+            {name, description} = formModel.getData(),
+            isValid = await formModel.validateAsync();
+
+        if (!isValid) return;
+
+        try {
+            const newObj = await XH.jsonBlobService.createAsync({
+                type,
+                name,
+                description,
+                value: viewStub.value
+            });
+            this.close();
+            this.resolveOpen(newObj);
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+
+    @action
+    private close() {
+        this.isOpen = false;
+        this.formModel.init();
+    }
+}

package/core/persist/viewmanager/index.ts

@@ -0,0 +1,2 @@
+export * from './ViewManagerModel';
+export * from './Types';

package/desktop/cmp/button/ColAutosizeButton.ts

@@ -16,7 +16,7 @@ export interface ColAutosizeButtonProps extends ButtonProps {
     gridModel?: GridModel;
 
     /** Options for the grid autosize. */
-    autosizeOptions?: GridAutosizeOptions;
+    autosizeOptions?: Omit<GridAutosizeOptions, 'mode'>;
 }
 
 /**

package/desktop/cmp/dash/DashConfig.ts

@@ -6,11 +6,13 @@
  */
 
 import {MenuItemLike, PersistOptions} from '@xh/hoist/core';
+import {DashViewState} from '@xh/hoist/desktop/cmp/dash/DashViewModel';
+import {DashViewSpec} from '@xh/hoist/desktop/cmp/dash/DashViewSpec';
 
 /**
  * Base interface for {@link DashCanvasConfig} and {@link DashContainerConfig}.
  */
-export interface DashConfig<VSPEC, VSTATE> {
+export interface DashConfig<VSPEC extends DashViewSpec, VSTATE extends DashViewState> {
     /**
      * A collection of viewSpecs, each describing a type of view that can be displayed in this
      * container.

package/desktop/cmp/dash/DashModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {bindable, makeObservable, observable} from '@xh/hoist/mobx';
-import {HoistModel, managed, PersistenceProvider, RefreshContextModel} from '@xh/hoist/core';
+import {HoistModel, managed, RefreshContextModel} from '@xh/hoist/core';
 
 /**
  * Base Model for {@link DashCanvasModel} and {@link DashContainerModel}.
@@ -40,7 +40,6 @@ export abstract class DashModel<VSPEC, VSTATE, VMODEL> extends HoistModel {
     // Implementation properties
     //------------------------
     protected restoreState: any;
-    protected provider: PersistenceProvider;
 
     constructor() {
         super();

package/desktop/cmp/dash/DashViewSpec.ts

@@ -21,7 +21,7 @@ export interface DashViewSpec {
     content: Content;
 
     /** Title text added to the tab header. */
-    title: string;
+    title?: string;
 
     /** An icon placed at the left-side of the tab header. */
     icon?: ReactElement;

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {PersistenceProvider, XH} from '@xh/hoist/core';
+import {Persistable, PersistableState, PersistenceProvider, XH} from '@xh/hoist/core';
 import {required} from '@xh/hoist/data';
 import {DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel} from '../';
 import '@xh/hoist/desktop/register';
@@ -64,11 +64,10 @@ export interface DashCanvasItemLayout {
  * Model for {@link DashCanvas}, managing all configurable options for the component and publishing
  * the observable state of its current widgets and their layout.
  */
-export class DashCanvasModel extends DashModel<
-    DashCanvasViewSpec,
-    DashCanvasItemState,
-    DashCanvasViewModel
-> {
+export class DashCanvasModel
+    extends DashModel<DashCanvasViewSpec, DashCanvasItemState, DashCanvasViewModel>
+    implements Persistable<{state: DashCanvasItemState[]}>
+{
     //-----------------------------
     // Settable State
     //------------------------------
@@ -182,26 +181,23 @@ export class DashCanvasModel extends DashModel<
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
 
-        // Read state from provider -- fail gently
-        let persistState = null;
+        this.loadState(initialState);
+        this.state = this.buildState();
+
         if (persistWith) {
-            try {
-                this.provider = PersistenceProvider.create({path: 'dashCanvas', ...persistWith});
-                persistState = this.provider.read();
-            } catch (e) {
-                this.logError(e);
-                XH.safeDestroy(this.provider);
-                this.provider = null;
-            }
+            PersistenceProvider.create({
+                persistOptions: {
+                    path: 'dashCanvas',
+                    ...persistWith
+                },
+                target: this
+            });
         }
 
-        this.loadState(persistState?.state ?? initialState);
-        this.state = this.buildState();
-
         this.addReaction(
             {
                 track: () => this.viewState,
-                run: () => this.publishState()
+                run: () => (this.state = this.buildState())
             },
             {
                 when: () => !!this.ref.current,
@@ -238,7 +234,6 @@ export class DashCanvasModel extends DashModel<
         this.columns = restoreState.columns;
         this.rowHeight = restoreState.rowHeight;
         this.loadState(restoreState.initialState);
-        this.provider?.clear();
     }
 
     /**
@@ -318,6 +313,18 @@ export class DashCanvasModel extends DashModel<
         this.getView(id)?.ensureVisible();
     }
 
+    //------------------------
+    // Persistable Interface
+    //------------------------
+    getPersistableState(): PersistableState<{state: DashCanvasItemState[]}> {
+        return new PersistableState({state: this.state});
+    }
+
+    setPersistableState(persistableState: PersistableState<{state: DashCanvasItemState[]}>) {
+        const {state} = persistableState.value;
+        if (state) this.loadState(state);
+    }
+
     //------------------------
     // Implementation
     //------------------------
@@ -396,7 +403,7 @@ export class DashCanvasModel extends DashModel<
         if (!layoutChanged) return;
 
         this.layout = layout;
-        if (!this.isLoadingState) this.publishState();
+        if (!this.isLoadingState) this.state = this.buildState();
 
         // Check if scrollbar visibility has changed, and force resize event if so
         const node = this.ref.current;
@@ -409,7 +416,7 @@ export class DashCanvasModel extends DashModel<
     }
 
     @action
-    private loadState(state) {
+    private loadState(state: DashCanvasItemState[]) {
         this.isLoadingState = true;
         try {
             this.clear();
@@ -427,13 +434,7 @@ export class DashCanvasModel extends DashModel<
         }
     }
 
-    @action
-    private publishState() {
-        this.state = this.buildState();
-        this.provider?.write({state: this.state});
-    }
-
-    private buildState() {
+    private buildState(): DashCanvasItemState[] {
         const {viewState} = this;
 
         return this.layout.map(it => {