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

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

@@ -6,16 +6,17 @@
  */
 
 import {form} from '@xh/hoist/cmp/form';
-import {filler, vframe} from '@xh/hoist/cmp/layout';
+import {filler, hbox, vframe} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
-import {SaveAsDialogModel} from '@xh/hoist/cmp/viewmanager/';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
-import {textArea, textInput} from '@xh/hoist/desktop/cmp/input';
+import {select, switchInput, 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 {dialog} from '@xh/hoist/kit/blueprint';
 import {startCase} from 'lodash';
+import {SaveAsDialogModel} from './SaveAsDialogModel';
+import {getGroupOptions} from './Utils';
 
 /**
  * Default Save As dialog used by ViewManager.
@@ -34,7 +35,7 @@ export const saveAsDialog = hoistCmp.factory<SaveAsDialogModel>({
             isOpen: true,
             style: {width: 500},
             canOutsideClickClose: false,
-            onClose: () => model.cancel(),
+            onClose: () => model.close(),
             item: formPanel()
         });
     }
@@ -45,7 +46,9 @@ const formPanel = hoistCmp.factory<SaveAsDialogModel>({
         return panel({
             item: form({
                 fieldDefaults: {
-                    commitOnChange: true
+                    commitOnChange: true,
+                    inline: true,
+                    minimal: true
                 },
                 item: vframe({
                     className: 'xh-view-manager__save-dialog__form',
@@ -60,13 +63,31 @@ const formPanel = hoistCmp.factory<SaveAsDialogModel>({
                                 }
                             })
                         }),
+                        formField({
+                            field: 'group',
+                            item: select({
+                                enableCreate: true,
+                                enableClear: true,
+                                placeholder: 'Select optional group....',
+                                options: getGroupOptions(model.parent, 'owned')
+                            })
+                        }),
                         formField({
                             field: 'description',
                             item: textArea({
                                 selectOnFocus: true,
-                                height: 90
+                                height: 70
+                            })
+                        }),
+                        hbox(
+                            formField({
+                                field: 'isShared',
+                                label: 'Share?',
+                                labelTextAlign: 'left',
+                                omit: !model.parent.enableSharing,
+                                item: switchInput()
                             })
-                        })
+                        )
                     ]
                 })
             }),
@@ -78,12 +99,12 @@ const formPanel = hoistCmp.factory<SaveAsDialogModel>({
 
 const bbar = hoistCmp.factory<SaveAsDialogModel>({
     render({model}) {
-        const {typeDisplayName} = model;
+        const {typeDisplayName} = model.parent;
         return toolbar(
             filler(),
             button({
                 text: 'Cancel',
-                onClick: () => model.cancel()
+                onClick: () => model.close()
             }),
             button({
                 text: `Save as new ${startCase(typeDisplayName)}`,

package/{cmp/viewmanager → desktop/cmp/viewmanager/dialog}/SaveAsDialogModel.ts

@@ -8,8 +8,7 @@
 import {FormModel} from '@xh/hoist/cmp/form';
 import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {makeObservable, action, observable} from '@xh/hoist/mobx';
-import {View} from './View';
-import {ViewManagerModel} from './ViewManagerModel';
+import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
 
 /**
  * Backing model for ViewManagerModel's SaveAs
@@ -20,20 +19,6 @@ export class SaveAsDialogModel extends HoistModel {
     @managed readonly formModel: FormModel;
     @observable isOpen: boolean = false;
 
-    private resolveOpen: (value: View) => void;
-
-    get type(): string {
-        return this.parent.type;
-    }
-
-    get typeDisplayName(): string {
-        return this.parent.typeDisplayName;
-    }
-
-    get globalDisplayName(): string {
-        return this.parent.globalDisplayName;
-    }
-
     constructor(parent: ViewManagerModel) {
         super();
         makeObservable(this);
@@ -42,20 +27,35 @@ export class SaveAsDialogModel extends HoistModel {
     }
 
     @action
-    openAsync(): Promise<View> {
-        this.formModel.init(this.parent.view.info ?? {});
-        this.isOpen = true;
+    open() {
+        const {parent, formModel} = this,
+            src = parent.view,
+            name = parent.ownedViews.some(it => it.name === src.name)
+                ? `Copy of ${src.name}`
+                : src.name;
+
+        formModel.init({
+            name,
+            group: src.group,
+            description: src.description,
+            isShared: false
+        });
 
-        return new Promise(resolve => (this.resolveOpen = resolve));
+        this.isOpen = true;
     }
 
-    cancel() {
-        this.close();
-        this.resolveOpen(null);
+    @action
+    close() {
+        this.isOpen = false;
     }
 
     async saveAsAsync() {
-        return this.doSaveAsAsync().linkTo(this.parent.saveTask);
+        try {
+            await this.doSaveAsAsync().linkTo(this.parent.saveTask);
+            this.close();
+        } catch (e) {
+            XH.handleException(e);
+        }
     }
 
     //------------------------
@@ -68,30 +68,25 @@ export class SaveAsDialogModel extends HoistModel {
                     name: 'name',
                     rules: [({value}) => this.parent.validateViewNameAsync(value)]
                 },
-                {name: 'description'}
+                {name: 'group'},
+                {name: 'description'},
+                {name: 'isShared'}
             ]
         });
     }
 
     private async doSaveAsAsync() {
-        const {formModel, parent} = this,
-            {name, description} = formModel.getData(),
+        let {formModel, parent} = this,
+            {name, group, description, isShared} = formModel.getData(),
             isValid = await formModel.validateAsync();
 
         if (!isValid) return;
 
-        try {
-            const ret = await this.parent.api.createViewAsync(name, description, parent.getValue());
-            this.close();
-            this.resolveOpen(ret);
-        } catch (e) {
-            XH.handleException(e);
-        }
-    }
-
-    @action
-    private close() {
-        this.isOpen = false;
-        this.formModel.init();
+        return parent.saveAsAsync({
+            name: name.trim(),
+            group: group?.trim(),
+            description: description?.trim(),
+            isShared
+        });
     }
 }

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

@@ -0,0 +1,18 @@
+/*
+ * 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 {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
+import {SelectOption} from '@xh/hoist/core';
+import {map, uniq} from 'lodash';
+
+export function getGroupOptions(model: ViewManagerModel, type: 'owned' | 'global'): SelectOption[] {
+    const views = type == 'owned' ? model.ownedViews : model.globalViews;
+    return uniq(map(views, 'group'))
+        .sort()
+        .filter(g => g != null)
+        .map(g => ({label: g, value: g}));
+}

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

@@ -0,0 +1,70 @@
+/*
+ * 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 {placeholder, vbox, vframe, vspacer} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {pluralize} from '@xh/hoist/utils/js';
+import {every, isEmpty, some} from 'lodash';
+import {ManageDialogModel} from './ManageDialogModel';
+
+export const viewMultiPanel = hoistCmp.factory({
+    model: uses(() => ManageDialogModel),
+    render({model}) {
+        const views = model.selectedViews;
+        if (isEmpty(views)) return null;
+
+        return panel({
+            item: vframe({
+                className: 'xh-view-manager__manage-dialog__form',
+                item: placeholder(
+                    Icon.gears(),
+                    `${views.length} selected ${pluralize(model.typeDisplayName)}`,
+                    vspacer(),
+                    buttons()
+                )
+            })
+        });
+    }
+});
+
+const buttons = hoistCmp.factory<ManageDialogModel>({
+    render({model}) {
+        const views = model.selectedViews,
+            allEditable = every(views, 'isEditable'),
+            allPinned = every(views, 'isPinned'),
+            allUnpinned = !some(views, 'isPinned');
+
+        return vbox({
+            style: {gap: 10, alignItems: 'center'},
+            items: [
+                button({
+                    text: allPinned ? 'Unpin from your Menu' : 'Pin to your Menu',
+                    icon: Icon.pin({
+                        prefix: allPinned ? 'fas' : 'far',
+                        className: allPinned ? 'xh-yellow' : ''
+                    }),
+                    width: 200,
+                    outlined: true,
+                    omit: !(allPinned || allUnpinned),
+                    onClick: () => model.togglePinned(views)
+                }),
+                button({
+                    text: 'Delete',
+                    icon: Icon.delete(),
+                    width: 200,
+                    outlined: true,
+                    intent: 'danger',
+                    omit: !allEditable,
+                    onClick: () => model.deleteAsync(views)
+                })
+            ]
+        });
+    }
+});

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

@@ -0,0 +1,161 @@
+/*
+ * 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 {form} from '@xh/hoist/cmp/form';
+import {div, filler, hbox, hspacer, span, vbox, vframe, vspacer} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses, XH} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {select, switchInput, textArea, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {ViewPanelModel} from '@xh/hoist/desktop/cmp/viewmanager/dialog/ViewPanelModel';
+import {getGroupOptions} from '@xh/hoist/desktop/cmp/viewmanager/dialog/Utils';
+import {fmtDateTime} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
+import {capitalize} from 'lodash';
+
+/**
+ * Form to edit or view details on a single saved view within the ViewManager manage dialog.
+ */
+export const viewPanel = hoistCmp.factory({
+    model: uses(ViewPanelModel),
+    render({model}) {
+        const {view} = model;
+        if (!view) return null;
+
+        const {isGlobal, lastUpdated, lastUpdatedBy, isEditable} = view;
+
+        return panel({
+            item: form({
+                fieldDefaults: {
+                    commitOnChange: true,
+                    minimal: true
+                },
+                item: vframe({
+                    className: 'xh-view-manager__manage-dialog__form',
+                    items: [
+                        formField({
+                            field: 'name',
+                            item: textInput()
+                        }),
+                        formField({
+                            field: 'owner',
+                            omit: isEditable
+                        }),
+                        formField({
+                            field: 'group',
+                            item: select({
+                                enableCreate: true,
+                                enableClear: true,
+                                options: getGroupOptions(
+                                    model.parent.viewManagerModel,
+                                    view.isOwned ? 'owned' : 'global'
+                                )
+                            }),
+                            readonlyRenderer: v =>
+                                v || span({item: 'None provided', className: 'xh-text-color-muted'})
+                        }),
+                        formField({
+                            field: 'description',
+                            item: textArea({
+                                selectOnFocus: true,
+                                height: 70
+                            }),
+                            readonlyRenderer: v =>
+                                v || span({item: 'None provided', className: 'xh-text-color-muted'})
+                        }),
+                        formField({
+                            field: 'isShared',
+                            label: 'Shared?',
+                            inline: true,
+                            item: switchInput(),
+                            readonlyRenderer: v => (v ? 'Yes' : 'No'),
+                            omit: isGlobal || !isEditable
+                        }),
+                        formField({
+                            field: 'isDefaultPinned',
+                            label: 'Pin by default?',
+                            labelWidth: 110,
+                            inline: true,
+                            item: switchInput(),
+                            omit: !isGlobal || !isEditable
+                        }),
+                        vspacer(),
+                        formButtons(),
+                        filler(),
+                        div({
+                            className: 'xh-view-manager__manage-dialog__metadata',
+                            item: `Last Updated: ${fmtDateTime(lastUpdated)} by ${lastUpdatedBy === XH.getUsername() ? 'you' : lastUpdatedBy}`
+                        })
+                    ]
+                })
+            })
+        });
+    }
+});
+
+const formButtons = hoistCmp.factory<ViewPanelModel>({
+    render({model}) {
+        const {formModel, parent, view} = model,
+            {readonly} = formModel,
+            {isPinned} = view;
+
+        return formModel.isDirty
+            ? hbox({
+                  justifyContent: 'center',
+                  items: [
+                      button({
+                          text: 'Save Changes',
+                          icon: Icon.check(),
+                          intent: 'success',
+                          minimal: false,
+                          disabled: !formModel.isValid,
+                          onClick: () => model.saveAsync()
+                      }),
+                      hspacer(),
+                      button({
+                          icon: Icon.reset(),
+                          tooltip: 'Revert changes',
+                          minimal: false,
+                          onClick: () => formModel.reset()
+                      })
+                  ]
+              })
+            : vbox({
+                  style: {gap: 10, alignItems: 'center'},
+                  items: [
+                      button({
+                          text: isPinned ? 'Unpin from your Menu' : 'Pin to your Menu',
+                          icon: Icon.pin({
+                              prefix: isPinned ? 'fas' : 'far',
+                              className: isPinned ? 'xh-yellow' : null
+                          }),
+                          width: 200,
+                          outlined: true,
+                          onClick: () => parent.togglePinned([view])
+                      }),
+                      button({
+                          text: `Promote to ${capitalize(parent.globalDisplayName)} ${parent.typeDisplayName}`,
+                          icon: Icon.globe(),
+                          width: 200,
+                          outlined: true,
+                          omit: readonly || view.isGlobal || !parent.manageGlobal,
+                          onClick: () => parent.makeGlobalAsync(view)
+                      }),
+                      button({
+                          text: 'Delete',
+                          icon: Icon.delete(),
+                          width: 200,
+                          outlined: true,
+                          intent: 'danger',
+                          omit: readonly,
+                          onClick: () => parent.deleteAsync([view])
+                      })
+                  ]
+              });
+    }
+});

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

@@ -0,0 +1,116 @@
+/*
+ * 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 {FormModel} from '@xh/hoist/cmp/form';
+import {fragment, p, strong} from '@xh/hoist/cmp/layout';
+import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {capitalize} from 'lodash';
+import {ManageDialogModel} from './ManageDialogModel';
+import {makeObservable} from '@xh/hoist/mobx';
+import {ViewInfo} from '@xh/hoist/cmp/viewmanager';
+import {ReactNode} from 'react';
+
+/**
+ * Backing model for EditForm
+ */
+export class ViewPanelModel extends HoistModel {
+    parent: ManageDialogModel;
+
+    @managed formModel: FormModel;
+
+    get view(): ViewInfo {
+        return this.parent.selectedView;
+    }
+
+    get loadTask(): TaskObserver {
+        return this.parent.loadModel;
+    }
+
+    constructor(parent: ManageDialogModel) {
+        super();
+        makeObservable(this);
+
+        this.parent = parent;
+        this.formModel = this.createFormModel();
+
+        this.addReaction({
+            track: () => this.view,
+            run: view => {
+                if (view) {
+                    const {formModel} = this;
+                    formModel.init({
+                        ...view,
+                        owner: view.owner ?? capitalize(parent.globalDisplayName)
+                    });
+                    formModel.readonly = !view.isEditable;
+                }
+            },
+            fireImmediately: true
+        });
+    }
+
+    async saveAsync() {
+        const {parent, view, formModel} = this,
+            {name, group, description, isDefaultPinned, isShared} = formModel.getData(),
+            isValid = await formModel.validateAsync(),
+            isDirty = formModel.isDirty;
+
+        if (!isValid || !isDirty) return;
+
+        if (view.isOwned && view.isShared != isShared) {
+            const msg: ReactNode = !isShared
+                ? `Your ${view.typedName} will no longer be visible to all other ${XH.appName} users.`
+                : `Your ${view.typedName} will become visible to all other ${XH.appName} users.`;
+            const msgs = [msg, strong('Are you sure you want to proceed?')];
+
+            const confirmed = await XH.confirm({
+                message: fragment(msgs.map(m => p(m))),
+                confirmProps: {
+                    text: 'Yes, update sharing',
+                    outlined: true,
+                    autoFocus: false,
+                    intent: 'primary'
+                }
+            });
+            if (!confirmed) return;
+        }
+
+        await parent.updateAsync(view, {
+            name,
+            group,
+            description,
+            isShared,
+            isDefaultPinned
+        });
+    }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private createFormModel(): FormModel {
+        return new FormModel({
+            fields: [
+                {
+                    name: 'name',
+                    rules: [
+                        async ({value}) => {
+                            return this.parent.viewManagerModel.validateViewNameAsync(
+                                value,
+                                this.view
+                            );
+                        }
+                    ]
+                },
+                {name: 'owner'},
+                {name: 'group'},
+                {name: 'description'},
+                {name: 'isShared'},
+                {name: 'isDefaultPinned'}
+            ]
+        });
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1733791818708",
+  "version": "71.0.0-SNAPSHOT.1734118787755",
   "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 {pickBy} from 'lodash';
+import {isUndefined, omitBy} from 'lodash';
 
 export interface JsonBlob {
     /** Either null for private blobs or special token "*" for globally shared blobs. */
@@ -91,9 +91,9 @@ 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, value}: Partial<JsonBlob>
+        {acl, description, meta, name, owner, value}: Partial<JsonBlob>
     ): Promise<JsonBlob> {
-        const update = pickBy({acl, description, meta, name, value}, (v, k) => v !== undefined);
+        const update = omitBy({acl, description, meta, name, owner, value}, isUndefined);
         return XH.fetchJson({
             url: 'xh/updateJsonBlob',
             params: {

package/svc/storage/BaseStorageService.ts

@@ -59,7 +59,7 @@ export abstract class BaseStorageService extends HoistService {
     }
 
     clear() {
-        this.storeInstance().clear();
+        this.storeInstance.clear();
     }
 
     keys(): string[] {