@xh/hoist 67.0.0-SNAPSHOT.1724286422850 → 67.0.0-SNAPSHOT.1724719449021

package/CHANGELOG.md

@@ -21,7 +21,8 @@
 * New property `FetchOptions.asJson` to instruct `FetchService` to decode an HTTP response as JSON.
   Note that `FetchService` methods suffixed with `Json` will set this property automatically.
 * `GridModel` will now accept `contextMenu: false` to omit context menus.
-* Swapped locations of `primaryOnly` and `active` sliders in `MonitorEditorDialog`.
+* New bindable `AppContainerModel.intializingLoadMaskMessage` property to allow apps to customize
+  the loading mask message shown during app initialization.
 
 ### 🐞 Bug Fixes
 

package/admin/tabs/userData/roles/recategorize/RecategorizeDialog.ts

@@ -9,6 +9,7 @@ import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {select} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
@@ -17,7 +18,7 @@ export const recategorizeDialog = hoistCmp.factory({
     model: uses(RecategorizeDialogModel),
 
     render({model}) {
-        const {isOpen} = model;
+        const {isOpen, savingTask} = model;
         if (!isOpen) return null;
 
         return dialog({
@@ -26,22 +27,24 @@ export const recategorizeDialog = hoistCmp.factory({
             style: {width: 300},
             isOpen: true,
             isCloseButtonShown: false,
-            items: [
-                dialogBody(
+            item: panel({
+                mask: savingTask,
+                item: dialogBody(
                     select({
+                        autoFocus: true,
                         bind: 'categoryName',
                         enableCreate: true,
                         options: model.options,
                         width: 260
                     })
                 ),
-                tbar()
-            ]
+                bbar: bbar()
+            })
         });
     }
 });
 
-const tbar = hoistCmp.factory<RecategorizeDialogModel>(({model}) => {
+const bbar = hoistCmp.factory<RecategorizeDialogModel>(({model}) => {
     return toolbar(
         filler(),
         button({

package/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {RoleModel} from '@xh/hoist/admin/tabs/userData/roles/RoleModel';
-import {HoistModel, XH} from '@xh/hoist/core';
+import {HoistModel, TaskObserver, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon/Icon';
 import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
@@ -15,6 +15,8 @@ export class RecategorizeDialogModel extends HoistModel {
     private parent: RoleModel;
     selectedRecords: StoreRecord[];
 
+    readonly savingTask = TaskObserver.trackLast();
+
     @bindable categoryName = null;
     @observable isOpen = false;
 
@@ -53,17 +55,21 @@ export class RecategorizeDialogModel extends HoistModel {
             it => !it.isGroupRow
         );
         const roles: string[] = map(roleSpec, it => it.name);
-        await XH.fetchService
-            .postJson({
-                url: 'roleAdmin/bulkCategoryUpdate',
-                body: {
-                    roles,
-                    category: this.categoryName === '_CLEAR_ROLES_' ? null : this.categoryName
-                }
-            })
-            .catchDefault();
-        await this.parent.refreshAsync();
-        this.close();
+        try {
+            await XH.fetchService
+                .postJson({
+                    url: 'roleAdmin/bulkCategoryUpdate',
+                    body: {
+                        roles,
+                        category: this.categoryName === '_CLEAR_ROLES_' ? null : this.categoryName
+                    }
+                })
+                .linkTo(this.savingTask);
+            await this.parent.refreshAsync();
+            this.close();
+        } catch (e) {
+            XH.handleException(e);
+        }
     }
 
     //-----------------

package/appcontainer/AppContainerModel.ts

@@ -16,9 +16,10 @@ import {
     XH
 } from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
-import {action, when as mobxWhen} from '@xh/hoist/mobx';
+import {action, bindable, when as mobxWhen} from '@xh/hoist/mobx';
 import {never, wait} from '@xh/hoist/promise';
 import numbro from 'numbro';
+import {ReactNode} from 'react';
 import {createRoot} from 'react-dom/client';
 import {
     AlertBannerService,
@@ -97,6 +98,12 @@ export class AppContainerModel extends HoistModel {
     @managed themeModel = new ThemeModel();
     @managed userAgentModel = new UserAgentModel();
 
+    /**
+     * Message shown on spinner while the application is in the INITIALIZING state.
+     * Update within `AppModel.initAsync()` to relay app-specific initialization status.
+     */
+    @bindable initializingLoadMaskMessage: ReactNode;
+
     /**
      * Main entry point. Initialize and render application code.
      */

package/build/types/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.d.ts

@@ -1,8 +1,9 @@
-import { HoistModel } from '@xh/hoist/core';
+import { HoistModel, TaskObserver } from '@xh/hoist/core';
 import { StoreRecord } from '@xh/hoist/data';
 export declare class RecategorizeDialogModel extends HoistModel {
     private parent;
     selectedRecords: StoreRecord[];
+    readonly savingTask: TaskObserver;
     categoryName: any;
     isOpen: boolean;
     recategorizeAction(): {

package/build/types/appcontainer/AppContainerModel.d.ts

@@ -1,4 +1,5 @@
 import { AppSpec, HoistAppModel, HoistModel, RootRefreshContextModel, TaskObserver } from '@xh/hoist/core';
+import { ReactNode } from 'react';
 import { AboutDialogModel } from './AboutDialogModel';
 import { BannerSourceModel } from './BannerSourceModel';
 import { ChangelogDialogModel } from './ChangelogDialogModel';
@@ -40,6 +41,11 @@ export declare class AppContainerModel extends HoistModel {
     viewportSizeModel: ViewportSizeModel;
     themeModel: ThemeModel;
     userAgentModel: UserAgentModel;
+    /**
+     * Message shown on spinner while the application is in the INITIALIZING state.
+     * Update within `AppModel.initAsync()` to relay app-specific initialization status.
+     */
+    initializingLoadMaskMessage: ReactNode;
     /**
      * Main entry point. Initialize and render application code.
      */

package/desktop/appcontainer/AppContainer.ts

@@ -87,7 +87,7 @@ export const AppContainer = hoistCmp({
                     },
                     errorRenderer: () => null
                 },
-                item: viewForState()
+                item: viewForState({model})
             }),
             // Modal component helpers rendered here at top-level to support display of messages
             // and exceptions at any point during the app lifecycle.
@@ -101,11 +101,13 @@ export const AppContainer = hoistCmp({
 //-----------------------------------------
 // Implementation
 //-----------------------------------------
-function viewForState() {
+function viewForState({model}) {
     switch (XH.appState) {
         case 'PRE_AUTH':
         case 'INITIALIZING':
-            return viewport(mask({spinner: true, isDisplayed: true}));
+            return viewport(
+                mask({spinner: true, isDisplayed: true, message: model.initializingLoadMaskMessage})
+            );
         case 'LOGIN_REQUIRED':
             return loginPanel();
         case 'ACCESS_DENIED':

package/mobile/appcontainer/AppContainer.ts

@@ -72,7 +72,7 @@ export const AppContainer = hoistCmp({
                     },
                     errorRenderer: () => null
                 },
-                item: viewForState()
+                item: viewForState({model})
             }),
             // Modal component helpers rendered here at top-level to support display of messages
             // and exceptions at any point during the app lifecycle.
@@ -86,11 +86,13 @@ export const AppContainer = hoistCmp({
 //-------------------
 // Implementation
 //-------------------
-function viewForState() {
+function viewForState({model}) {
     switch (XH.appState) {
         case 'PRE_AUTH':
         case 'INITIALIZING':
-            return viewport(mask({spinner: true, isDisplayed: true}));
+            return viewport(
+                mask({spinner: true, isDisplayed: true, message: model.initializingLoadMaskMessage})
+            );
         case 'LOGIN_REQUIRED':
             return loginPanel();
         case 'ACCESS_DENIED':

package/package.json

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