@xh/hoist 73.0.0-SNAPSHOT.1747153991877 → 73.0.0-SNAPSHOT.1747181587236

package/CHANGELOG.md

@@ -35,6 +35,8 @@
    allow the client to do a potentially interactive popup login during the session to re-establish
    the login.  This is especially useful to allow recovery from expired or invalidated refresh
    tokens.
+*  New utility method `XH.openWindow()` for ensuring that new windows/tabs are opened without
+   an unintended `opener` relationship with the original window.
 * Improvements to  Grid columns `HeaderFilter` component:
     * `GridFilterModel` `commitOnChage` now set to `false` by default
     * Addition of ability to append terms to active filter **only** when `commitOnChage:false`

package/admin/AppModel.ts

@@ -155,7 +155,8 @@ export class AppModel extends HoistAppModel {
 
     /** Open the primary business-facing application, typically 'app'. */
     openPrimaryApp() {
-        window.open(`/${this.getPrimaryAppCode()}`);
+        const appCode = this.getPrimaryAppCode();
+        XH.openWindow(`/${appCode}`, appCode);
     }
 
     getPrimaryAppCode() {

package/build/types/core/XH.d.ts

@@ -218,6 +218,14 @@ export declare class XHApi {
      * {@link reloadApp} instead.
      */
     refreshAppAsync(): Promise<void>;
+    /**
+     * Open a url in an external browser window/tab.
+     *
+     * Unlike a simple call to `open`, this method ensures the "opener" method on the
+     * new window is null. This ensures that the new page will not share sessionState with
+     * this page.  See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
+     */
+    openWindow(url: string, target?: string): void;
     /**
      * Flags for controlling experimental, hotfix, or otherwise provisional features.
      *

package/build/types/core/types/AppState.d.ts

@@ -14,6 +14,7 @@ export declare const AppState: Readonly<{
 }>;
 export type AppState = (typeof AppState)[keyof typeof AppState];
 export interface AppSuspendData {
-    message?: string;
     reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE' | 'AUTH_EXPIRED';
+    message?: string;
+    exception?: unknown;
 }

package/build/types/{mobile/appcontainer → desktop/appcontainer/suspend}/SuspendPanel.d.ts

@@ -1,7 +1,7 @@
 import { AppContainerModel } from '@xh/hoist/appcontainer/AppContainerModel';
 import './SuspendPanel.scss';
 /**
- * Generic Panel to display when the app is suspended.
+ * Display when the app is suspended.
  * @internal
  */
 export declare const suspendPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<AppContainerModel>>;

package/core/XH.ts

@@ -442,6 +442,17 @@ export class XHApi {
         return this.refreshContextModel.refreshAsync();
     }
 
+    /**
+     * Open a url in an external browser window/tab.
+     *
+     * Unlike a simple call to `open`, this method ensures the "opener" method on the
+     * new window is null. This ensures that the new page will not share sessionState with
+     * this page.  See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
+     */
+    openWindow(url: string, target?: string) {
+        window.open(url, target ?? '_blank', 'noopener=true');
+    }
+
     /**
      * Flags for controlling experimental, hotfix, or otherwise provisional features.
      *

package/core/types/AppState.ts

@@ -27,6 +27,7 @@ export const AppState = Object.freeze({
 export type AppState = (typeof AppState)[keyof typeof AppState];
 
 export interface AppSuspendData {
+    reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE' | 'AUTH_EXPIRED';
     message?: string;
-    reason: 'IDLE'|'SERVER_FORCE'|'APP_UPDATE'|'AUTH_EXPIRED';
+    exception?: unknown;
 }

package/desktop/appcontainer/AppContainer.ts

@@ -9,7 +9,7 @@ import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
 import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {changelogDialog} from '@xh/hoist/desktop/appcontainer/ChangelogDialog';
-import {suspendPanel} from '@xh/hoist/desktop/appcontainer/SuspendPanel';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
 import {colChooserDialog as colChooser} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserDialog';
 import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserModel';
@@ -34,7 +34,6 @@ import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
 import {feedbackDialog} from './FeedbackDialog';
-import {idlePanel} from './IdlePanel';
 import {impersonationBar} from './ImpersonationBar';
 import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
@@ -172,19 +171,7 @@ const appLoadMask = hoistCmp.factory<AppContainerModel>(({model}) =>
     mask({bind: model.appLoadModel, spinner: true})
 );
 
-const suspendedView = hoistCmp.factory<AppContainerModel>({
-    render({model}) {
-        let ret;
-        if (model.appStateModel.suspendData?.reason === 'IDLE') {
-            const content = model.appSpec.idlePanel ?? idlePanel;
-            ret = elementFromContent(content, {onReactivate: () => XH.reloadApp()});
-        } else {
-            ret = suspendPanel();
-        }
-
-        return viewport(ret, appLoadMask());
-    }
-});
+const suspendedView = hoistCmp.factory(() => viewport(suspendPanel(), appLoadMask()));
 
 const bannerList = hoistCmp.factory<AppContainerModel>({
     render({model}) {

package/desktop/appcontainer/VersionBar.ts

@@ -55,7 +55,7 @@ export const versionBar = hoistCmp.factory({
                 Icon.wrench({
                     omit: isAdminApp || !XH.getUser().isHoistAdminReader,
                     title: 'Open Admin Console',
-                    onClick: () => window.open('/admin')
+                    onClick: () => XH.openWindow('/admin', 'xhAdmin')
                 })
             ]
         });

package/desktop/appcontainer/{SuspendPanel.ts → suspend/SuspendPanel.ts}

@@ -10,26 +10,54 @@ import {viewport, div, p, filler} from '@xh/hoist/cmp/layout';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
+import {idlePanel} from './IdlePanel';
 
 import './SuspendPanel.scss';
+import {elementFromContent} from '@xh/hoist/utils/react';
 
 /**
- * Generic Panel to display when the app is suspended.
+ * Display when the app is suspended.
  * @internal
  */
 export const suspendPanel = hoistCmp.factory<AppContainerModel>({
     displayName: 'SuspendPanel',
 
     render({model}) {
-        const message = model.appStateModel.suspendData?.message;
+        const {suspendData} = model.appStateModel;
+        if (!suspendData) return null;
+
+        let {reason, exception, message} = suspendData;
+
+        // 0) Special case for IDLE, including app override ability.
+        if (reason === 'IDLE') {
+            const content = model.appSpec.idlePanel ?? idlePanel;
+            return elementFromContent(content, {onReactivate: () => XH.reloadApp()});
+        }
+
+        // 1) All Others
+        let icon, title;
+        switch (reason) {
+            case 'APP_UPDATE':
+                icon = Icon.gift();
+                title = 'Application Update';
+                break;
+            case 'AUTH_EXPIRED':
+                icon = Icon.lock();
+                title = 'Authentication Expired';
+                break;
+            default:
+                icon = Icon.refresh();
+                title = 'Reload Required';
+        }
+
         return viewport({
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'column',
             className: 'xh-suspend-viewport',
             item: panel({
-                title: `Reload Required`,
-                icon: Icon.refresh(),
+                title,
+                icon,
                 className: 'xh-suspend-panel',
                 item: div({
                     className: 'xh-suspend-panel__inner',
@@ -39,6 +67,13 @@ export const suspendPanel = hoistCmp.factory<AppContainerModel>({
                     ]
                 }),
                 bbar: [
+                    button({
+                        text: 'More Details',
+                        icon: Icon.detail(),
+                        minimal: true,
+                        omit: !exception,
+                        onClick: () => XH.exceptionHandler.showExceptionDetails(exception)
+                    }),
                     filler(),
                     button({
                         text: 'Reload now',

package/desktop/cmp/button/AppMenuButton.ts

@@ -143,7 +143,7 @@ function buildMenuItems(props: AppMenuButtonProps) {
             omit: hideAdminItem,
             text: 'Admin',
             icon: Icon.wrench(),
-            actionFn: () => window.open('/admin')
+            actionFn: () => XH.openWindow('/admin', 'xhAdmin')
         },
         {
             omit: hideImpersonateItem,

package/desktop/cmp/button/LaunchAdminButton.ts

@@ -25,7 +25,7 @@ export const [LaunchAdminButton, launchAdminButton] = hoistCmp.withFactory<Launc
             ref,
             icon: Icon.wrench(),
             title: 'Launch admin client...',
-            onClick: () => window.open('/admin'),
+            onClick: () => XH.openWindow('/admin', 'xhAdmin'),
             ...props
         });
     }

package/mobile/appcontainer/AppContainer.ts

@@ -24,13 +24,12 @@ import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
 import {feedbackDialog} from './FeedbackDialog';
-import {idlePanel} from './IdlePanel';
 import {impersonationBar} from './ImpersonationBar';
 import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
 import {messageSource} from './MessageSource';
 import {optionsDialog} from './OptionsDialog';
-import {suspendPanel} from './SuspendPanel';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 
@@ -157,16 +156,4 @@ const bannerList = hoistCmp.factory<AppContainerModel>({
     }
 });
 
-const suspendedView = hoistCmp.factory<AppContainerModel>({
-    render({model}) {
-        let ret;
-        if (model.appStateModel.suspendData?.reason === 'IDLE') {
-            const content = model.appSpec.idlePanel ?? idlePanel;
-            ret = elementFromContent(content, {onReactivate: () => XH.reloadApp()});
-        } else {
-            ret = suspendPanel();
-        }
-
-        return viewport(ret, appLoadMask());
-    }
-});
+const suspendedView = hoistCmp.factory(() => viewport(suspendPanel(), appLoadMask()));

package/mobile/appcontainer/suspend/SuspendPanel.ts

@@ -0,0 +1,94 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
+import {XH, hoistCmp} from '@xh/hoist/core';
+import {vframe, div, p} from '@xh/hoist/cmp/layout';
+import {panel} from '@xh/hoist/mobile/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {button} from '@xh/hoist/mobile/cmp/button';
+
+import './SuspendPanel.scss';
+import {idlePanel} from './IdlePanel';
+import {elementFromContent} from '@xh/hoist/utils/react';
+
+/**
+ * Generic Panel to display when the app is suspended.
+ * @internal
+ */
+export const suspendPanel = hoistCmp.factory<AppContainerModel>({
+    displayName: 'SuspendPanel',
+
+    render({model}) {
+        const {suspendData} = model.appStateModel;
+        if (!suspendData) return null;
+
+        let {reason, exception, message} = suspendData;
+
+        // 0) Special case for IDLE, including app override ability.
+        if (reason === 'IDLE') {
+            const content = model.appSpec.idlePanel ?? idlePanel;
+            return elementFromContent(content, {onReactivate: () => XH.reloadApp()});
+        }
+
+        // 1) All Others
+        let icon, title;
+        switch (reason) {
+            case 'APP_UPDATE':
+                icon = Icon.gift();
+                title = 'Application Update';
+                break;
+            case 'AUTH_EXPIRED':
+                icon = Icon.lock();
+                title = 'Authentication Expired';
+                break;
+            default:
+                icon = Icon.refresh();
+                title = 'Reload Required';
+        }
+
+        return panel({
+            className: 'xh-suspend-panel',
+            title,
+            icon,
+            items: [
+                vframe({
+                    className: 'xh-suspend-panel__content',
+                    items: [
+                        div({
+                            className: 'xh-suspend-panel__text-container',
+                            items: [
+                                p({item: message, omit: !message}),
+                                p(`${XH.clientAppName} must be reloaded to continue.`)
+                            ]
+                        }),
+                        div({
+                            className: 'xh-suspend-panel__button-container',
+                            items: [
+                                button({
+                                    text: 'Reload Now',
+                                    icon: Icon.refresh(),
+                                    intent: 'primary',
+                                    flex: 1,
+                                    onClick: () => XH.reloadApp()
+                                }),
+                                button({
+                                    text: 'More Details',
+                                    icon: Icon.detail(),
+                                    minimal: true,
+                                    omit: !exception,
+                                    onClick: () =>
+                                        XH.exceptionHandler.showExceptionDetails(exception)
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});

package/package.json

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

package/security/BaseOAuthClient.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {br, fragment} from '@xh/hoist/cmp/layout';
-import {HoistBase, managed, XH} from '@xh/hoist/core';
+import {HoistBase, isHoistException, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable} from '@xh/hoist/mobx';
 import {never, wait} from '@xh/hoist/promise';
@@ -148,13 +148,22 @@ export abstract class BaseOAuthClient<
      * Main entry point for this object.
      */
     async initAsync(): Promise<void> {
-        const tokens = await this.doInitAsync();
-        this.logDebug('Successfully initialized with following tokens:');
-        this.logTokensDebug(tokens);
-        if (this.config.autoRefreshSecs > 0) {
-            this.timer = Timer.create({
-                runFn: async () => this.onTimerAsync(),
-                interval: this.TIMER_INTERVAL
+        try {
+            const tokens = await this.doInitAsync();
+            this.logDebug('Successfully initialized with following tokens:');
+            this.logTokensDebug(tokens);
+            if (this.config.autoRefreshSecs > 0) {
+                this.timer = Timer.create({
+                    runFn: async () => this.onTimerAsync(),
+                    interval: this.TIMER_INTERVAL
+                });
+            }
+        } catch (e) {
+            if (isHoistException(e)) throw e;
+            throw XH.exception({
+                name: 'Auth Failed',
+                message: 'Authentication has failed.',
+                cause: e
             });
         }
     }