@xh/hoist 76.0.0-SNAPSHOT.1757113228632 → 76.0.0-SNAPSHOT.1757428490497

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

@@ -10,13 +10,16 @@ import {div, filler, hbox, hspacer, span, vbox, vframe, vspacer} from '@xh/hoist
 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 {select, 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 {
+    getGroupOptions,
+    getVisibilityInfo,
+    getVisibilityOptions
+} from '@xh/hoist/desktop/cmp/viewmanager/dialog/Utils';
 import {fmtDateTime} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {capitalize, some} from 'lodash';
 
 /**
  * Form to edit or view details on a single saved view within the ViewManager manage dialog.
@@ -24,11 +27,17 @@ import {capitalize, some} from 'lodash';
 export const viewPanel = hoistCmp.factory({
     model: uses(ViewPanelModel),
     render({model}) {
-        const {view} = model;
+        const {view, parent, formModel} = model,
+            {viewManagerModel} = parent;
+
         if (!view) return null;
 
-        const {isGlobal, lastUpdated, lastUpdatedBy, isEditable} = view,
-            {enableSharing} = model.parent.viewManagerModel;
+        const {lastUpdated, lastUpdatedBy, isEditable} = view,
+            visibility = formModel.values.visibility,
+            isGlobal = visibility === 'global',
+            visOptions = getVisibilityOptions(viewManagerModel),
+            visInfo = getVisibilityInfo(viewManagerModel, visibility),
+            groupOptions = getGroupOptions(viewManagerModel, isGlobal);
 
         return panel({
             item: form({
@@ -52,10 +61,7 @@ export const viewPanel = hoistCmp.factory({
                             item: select({
                                 enableCreate: true,
                                 enableClear: true,
-                                options: getGroupOptions(
-                                    model.parent.viewManagerModel,
-                                    view.isOwned ? 'owned' : 'global'
-                                )
+                                options: groupOptions
                             }),
                             readonlyRenderer: v =>
                                 v || span({item: 'None provided', className: 'xh-text-color-muted'})
@@ -70,22 +76,10 @@ export const viewPanel = hoistCmp.factory({
                                 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: !enableSharing || isGlobal || !isEditable
-                        }),
-                        formField({
-                            field: 'isDefaultPinned',
-                            label: null,
-                            inline: true,
-                            item: switchInput({
-                                label: `Pin to everyone's menu by default`,
-                                labelSide: 'left'
-                            }),
-                            omit: !isGlobal || !isEditable
+                            field: 'visibility',
+                            omit: !isEditable || visOptions.length === 1,
+                            item: select({options: visOptions, enableFilter: false}),
+                            info: visInfo
                         }),
                         vspacer(),
                         formButtons(),
@@ -130,8 +124,6 @@ const formButtons = hoistCmp.factory<ViewPanelModel>({
             });
         }
 
-        const {enableGlobal, globalDisplayName, manageGlobal, globalViews} =
-            parent.viewManagerModel;
         return vbox({
             style: {gap: 10, alignItems: 'center'},
             items: [
@@ -145,15 +137,6 @@ const formButtons = hoistCmp.factory<ViewPanelModel>({
                     outlined: true,
                     onClick: () => parent.togglePinned([view])
                 }),
-                button({
-                    text: `Promote to ${capitalize(globalDisplayName)}`,
-                    icon: Icon.globe(),
-                    width: 200,
-                    outlined: true,
-                    disabled: some(globalViews, {name: view.name}),
-                    omit: readonly || view.isGlobal || !enableGlobal || !manageGlobal,
-                    onClick: () => parent.makeGlobalAsync(view)
-                }),
                 button({
                     text: 'Delete',
                     icon: Icon.delete(),

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

@@ -8,11 +8,11 @@
 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, isUndefined} from 'lodash';
+import {capitalize} from 'lodash';
+import {ReactNode} from 'react';
 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
@@ -44,6 +44,7 @@ export class ViewPanelModel extends HoistModel {
                     const {formModel} = this;
                     formModel.init({
                         ...view,
+                        visibility: view.isShared ? 'shared' : view.isGlobal ? 'global' : 'private',
                         owner: view.owner ?? capitalize(parent.viewManagerModel.globalDisplayName)
                     });
                     formModel.readonly = !view.isEditable;
@@ -57,20 +58,42 @@ export class ViewPanelModel extends HoistModel {
         const {parent, view, formModel} = this,
             updates = formModel.getData(true),
             isValid = await formModel.validateAsync(),
-            isDirty = formModel.isDirty;
+            isDirty = formModel.isDirty,
+            visibilityField = formModel.fields.visibility;
 
         if (!isValid || !isDirty) return;
 
-        if (view.isOwned && !isUndefined(updates.isShared)) {
-            const msg: ReactNode = !updates.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?')];
+        if (visibilityField.isDirty) {
+            const visibility = visibilityField.value;
+            updates.isShared = visibility === 'shared';
+            updates.isGlobal = visibility === 'global';
+
+            const msgs: ReactNode[] = [strong('Are you sure you want to proceed?')];
+            switch (visibility) {
+                case 'private':
+                    msgs.unshift(
+                        `Your ${view.typedName} will no longer be available to all other ${XH.appName} users.`
+                    );
+                    break;
+                case 'global':
+                    msgs.unshift(
+                        `Your ${view.typedName} will become globally visible to all other ${XH.appName} users.`
+                    );
+                    break;
+                case 'shared':
+                    view.isGlobal
+                        ? msgs.unshift(
+                              `Your ${view.typedName} will no longer be globally visible to all other ${XH.appName} users.`
+                          )
+                        : msgs.unshift(
+                              `Your ${view.typedName} will become available to all other ${XH.appName} users.`
+                          );
+            }
 
             const confirmed = await XH.confirm({
                 message: fragment(msgs.map(m => p(m))),
                 confirmProps: {
-                    text: 'Yes, update sharing',
+                    text: 'Yes, update visibility',
                     outlined: true,
                     autoFocus: false,
                     intent: 'primary'
@@ -91,10 +114,11 @@ export class ViewPanelModel extends HoistModel {
                 {
                     name: 'name',
                     rules: [
-                        async ({value}) => {
+                        async ({value}, {visibility}) => {
                             return this.parent.viewManagerModel.validateViewNameAsync(
                                 value,
-                                this.view
+                                this.view,
+                                visibility === 'global'
                             );
                         }
                     ]
@@ -102,8 +126,7 @@ export class ViewPanelModel extends HoistModel {
                 {name: 'owner'},
                 {name: 'group'},
                 {name: 'description'},
-                {name: 'isShared'},
-                {name: 'isDefaultPinned'}
+                {name: 'visibility'}
             ]
         });
     }

package/package.json

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