@xh/hoist 71.0.0-SNAPSHOT.1734552619121 → 71.0.0-SNAPSHOT.1734627276913

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -64,14 +64,24 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
         showRevertButton = 'never',
         buttonSide = 'right'
     }: ViewManagerProps) {
-        const locModel = useLocalModel(() => new ViewManagerLocalModel(model)),
+        const {loadModel} = model,
+            locModel = useLocalModel(() => new ViewManagerLocalModel(model)),
             save = saveButton({model: locModel, mode: showSaveButton, ...saveButtonProps}),
             revert = revertButton({model: locModel, mode: showRevertButton, ...revertButtonProps}),
             menu = popover({
                 disabled: !locModel.isVisible, // Prevent orphaned popover menu
                 item: menuButton({model: locModel, ...menuButtonProps}),
-                content: viewMenu({model: locModel}),
-                placement: 'bottom-start',
+                content: loadModel.isPending
+                    ? box({
+                          item: spinner({compact: true}),
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          height: 30,
+                          width: 30
+                      })
+                    : viewMenu({model: locModel}),
+                onOpening: () => model.refreshAsync(),
+                placement: 'bottom',
                 popoverClassName: 'xh-view-manager__popover'
             });
         return fragment(

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -5,15 +5,12 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {box} from '@xh/hoist/cmp/layout';
-import {spinner} from '@xh/hoist/cmp/spinner';
 import {hoistCmp} from '@xh/hoist/core';
 import {ViewManagerModel, ViewInfo} from '@xh/hoist/cmp/viewmanager';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
-import {wait} from '@xh/hoist/promise';
-import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
+import {pluralize} from '@xh/hoist/utils/js';
 import {Dictionary} from 'express-serve-static-core';
 import {each, filter, groupBy, isEmpty, orderBy, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
@@ -83,7 +80,6 @@ function getOtherMenuItems(model: ViewManagerLocalModel): ReactNode[] {
         isViewSavable,
         views,
         isValueDirty,
-        loadModel,
         typeDisplayName
     } = parent;
 
@@ -126,21 +122,6 @@ function getOtherMenuItems(model: ViewManagerLocalModel): ReactNode[] {
             disabled: isEmpty(views),
             text: `Manage ${pluralName}...`,
             onClick: () => model.manageDialogModel.open()
-        }),
-        menuItem({
-            icon: !loadModel.isPending
-                ? Icon.refresh()
-                : box({
-                      height: 20,
-                      item: spinner({width: 16.25, height: 16.25})
-                  }),
-            disabled: loadModel.isPending,
-            text: `Refresh ${pluralName}`,
-            onClick: e => {
-                // Ensure at least 100ms delay to render spinner
-                Promise.all([wait(100), parent.refreshAsync()]).linkTo(loadModel);
-                consumeEvent(e);
-            }
         })
     ];
 }

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

@@ -17,7 +17,7 @@ import {viewsGrid} from '@xh/hoist/desktop/cmp/viewmanager/dialog/ManageDialog';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
-import {capitalize, compact, isEmpty, some, startCase} from 'lodash';
+import {capitalize, compact, every, isEmpty, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
 import {ViewPanelModel} from './ViewPanelModel';
 
@@ -128,7 +128,11 @@ export class ManageDialogModel extends HoistModel {
 
     @action
     togglePinned(views: ViewInfo[]) {
-        views.forEach(v => this.viewManagerModel.togglePinned(v));
+        const allPinned = every(views, 'isPinned'),
+            {viewManagerModel} = this;
+        views.forEach(v =>
+            allPinned ? viewManagerModel.userUnpin(v) : viewManagerModel.userPin(v)
+        );
         this.refreshAsync();
     }
 
@@ -293,7 +297,7 @@ export class ManageDialogModel extends HoistModel {
                 {field: 'name', flex: true},
                 {field: 'group', hidden: true},
                 {field: 'owner', hidden: true},
-                {field: 'lastUpdated', ...dateTimeCol},
+                {field: 'lastUpdated', ...dateTimeCol, hidden: true},
                 {
                     field: 'isPinned',
                     width: 40,

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

@@ -11,7 +11,7 @@ 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 {every, isEmpty} from 'lodash';
 import {ManageDialogModel} from './ManageDialogModel';
 
 export const viewMultiPanel = hoistCmp.factory<ManageDialogModel>({
@@ -38,8 +38,7 @@ const buttons = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
         const views = model.selectedViews,
             allEditable = every(views, 'isEditable'),
-            allPinned = every(views, 'isPinned'),
-            allUnpinned = !some(views, 'isPinned');
+            allPinned = every(views, 'isPinned');
 
         return vbox({
             style: {gap: 10, alignItems: 'center'},
@@ -52,7 +51,6 @@ const buttons = hoistCmp.factory<ManageDialogModel>({
                     }),
                     width: 200,
                     outlined: true,
-                    omit: !(allPinned || allUnpinned),
                     onClick: () => model.togglePinned(views)
                 }),
                 button({

package/package.json

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