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

package/CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## 76.0.0-SNAPSHOT - unreleased
 
-### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - upgrade to Hoist Core)
+### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - upgrade to Hoist Core, change to Tab constructor)
+*  The constructor for `TabModel` has changed to take its owning container as a second argument.
+   (Most applications do not create `TabModels` directly, but it is possible.)
 
 ### 🎁 New Features
 
@@ -11,6 +13,8 @@
   or disruptive action.
 * Updated grid column filters to apply on `Enter` / dismiss on `Esc` and tweaked the filter popup
   toolbar for clarity.
+* Added new ability to specify nested tab containers in a single declarative config.  Apps may now
+  provide a spec for a nested tab container directly to the `TabConfig.content` property.
 
 ### 🐞 Bug Fixes
 

package/admin/AppModel.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {clusterTab} from '@xh/hoist/admin/tabs/cluster/ClusterTab';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {TabConfig, TabContainerModel} from '@xh/hoist/cmp/tab';
 import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
@@ -14,9 +13,15 @@ import {without} from 'lodash';
 import {Route} from 'router5';
 import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
 import {clientsPanel} from './tabs/clients/ClientsPanel';
-import {generalTab} from './tabs/general/GeneralTab';
 import {monitorTab} from './tabs/monitor/MonitorTab';
-import {userDataTab} from './tabs/userData/UserDataTab';
+import {instancesTab, clusterObjectsPanel} from '@xh/hoist/admin/tabs/cluster';
+import {aboutPanel, alertBannerPanel, configPanel} from '@xh/hoist/admin/tabs/general';
+import {
+    jsonBlobPanel,
+    userPreferencePanel,
+    rolePanel,
+    userPanel
+} from '@xh/hoist/admin/tabs/userData';
 
 export class AppModel extends HoistAppModel {
     tabModel: TabContainerModel;
@@ -118,16 +123,31 @@ export class AppModel extends HoistAppModel {
     }
 
     createTabs(): TabConfig[] {
+        const conf = XH.getConf('xhAdminAppConfig', {});
+
         return [
             {
                 id: 'general',
                 icon: Icon.info(),
-                content: generalTab
+                content: {
+                    switcher: {orientation: 'left', testId: 'general-tab-switcher'},
+                    tabs: [
+                        {id: 'about', icon: Icon.info(), content: aboutPanel},
+                        {id: 'config', icon: Icon.settings(), content: configPanel},
+                        {id: 'alertBanner', icon: Icon.bullhorn(), content: alertBannerPanel}
+                    ]
+                }
             },
             {
                 id: 'servers',
                 icon: Icon.server(),
-                content: clusterTab
+                content: {
+                    switcher: {orientation: 'left', testId: 'cluster-tab-switcher'},
+                    tabs: [
+                        {id: 'instances', icon: Icon.server(), content: instancesTab},
+                        {id: 'objects', icon: Icon.boxFull(), content: clusterObjectsPanel}
+                    ]
+                }
             },
             {
                 id: 'clients',
@@ -142,7 +162,35 @@ export class AppModel extends HoistAppModel {
             {
                 id: 'userData',
                 icon: Icon.users(),
-                content: userDataTab
+                content: {
+                    switcher: {orientation: 'left', testId: 'user-data-tab-switcher'},
+                    refreshMode: 'onShowAlways',
+                    tabs: [
+                        {
+                            id: 'users',
+                            icon: Icon.users(),
+                            content: userPanel,
+                            omit: conf['hideUsersTab']
+                        },
+                        {
+                            id: 'roles',
+                            icon: Icon.idBadge(),
+                            content: rolePanel
+                        },
+                        {
+                            id: 'prefs',
+                            title: 'Preferences',
+                            icon: Icon.bookmark(),
+                            content: userPreferencePanel
+                        },
+                        {
+                            id: 'jsonBlobs',
+                            title: 'JSON Blobs',
+                            icon: Icon.json(),
+                            content: jsonBlobPanel
+                        }
+                    ]
+                }
             },
             {
                 id: 'activity',

package/admin/tabs/cluster/index.ts

@@ -0,0 +1,2 @@
+export * from './instances/InstancesTab';
+export * from './objects/ClusterObjectsPanel';

package/admin/tabs/general/index.ts

@@ -0,0 +1,3 @@
+export * from './about/AboutPanel';
+export * from './alertBanner/AlertBannerPanel';
+export * from './config/ConfigPanel';

package/admin/tabs/userData/index.ts

@@ -0,0 +1,4 @@
+export * from './jsonblob/JsonBlobPanel';
+export * from './prefs/UserPreferencePanel';
+export * from './roles/RolePanel';
+export * from './users/UserPanel';

package/build/types/admin/tabs/cluster/index.d.ts

@@ -0,0 +1,2 @@
+export * from './instances/InstancesTab';
+export * from './objects/ClusterObjectsPanel';

package/build/types/admin/tabs/general/index.d.ts

@@ -0,0 +1,3 @@
+export * from './about/AboutPanel';
+export * from './alertBanner/AlertBannerPanel';
+export * from './config/ConfigPanel';

package/build/types/admin/tabs/userData/index.d.ts

@@ -0,0 +1,4 @@
+export * from './jsonblob/JsonBlobPanel';
+export * from './prefs/UserPreferencePanel';
+export * from './roles/RolePanel';
+export * from './users/UserPanel';

package/build/types/cmp/tab/TabContainerModel.d.ts

@@ -4,7 +4,7 @@ import { TabConfig, TabModel } from './TabModel';
 import { TabSwitcherProps } from './TabSwitcherProps';
 export interface TabContainerConfig {
     /** Tabs to be displayed. */
-    tabs?: TabConfig[];
+    tabs: TabConfig[];
     /**
      * ID of Tab to be shown initially if routing does not specify otherwise. If not set,
      * will default to first tab in the provided collection.
@@ -74,10 +74,18 @@ export declare class TabContainerModel extends HoistModel implements Persistable
     setTabs(tabs: Array<TabModel | TabConfig>): void;
     /** Add a single tab to the container. */
     addTab(tab: TabModel | TabConfig, opts?: AddTabOptions): TabModel;
-    /** Remove a single tab from the container. */
+    /**
+     * Remove a single tab from the container.
+     * Supported for tabs that are immediate children of this container.
+     **/
     removeTab(tab: TabModel | string): void;
-    /** Update the title of an existing tab. Logs failures quietly on debug if not found.  */
+    /**
+     * Update the title of an existing tab.
+     * Supported for tabs that are immediate children of this container.
+     * Logs failures quietly on debug if not found.
+     * */
     setTabTitle(tabId: string, title: ReactNode): void;
+    /** Find a tab that is an immediate child of this container. */
     findTab(id: string): TabModel;
     get activeTab(): TabModel;
     /** The tab immediately before the active tab in the model's tab list. */
@@ -88,9 +96,11 @@ export declare class TabContainerModel extends HoistModel implements Persistable
      * Set the currently active Tab.
      *
      * If using routing, this method will navigate to the new tab via the router and the active Tab
-     * will only be updated once the router state changes. Otherwise the active Tab will be updated
+     * will only be updated once the router state changes. Otherwise, the active Tab will be updated
      * immediately.
      *
+     * Supported for tabs that are immediate children of this container.
+     *
      * @param tab - TabModel or id of TabModel to be activated.
      */
     activateTab(tab: TabModel | string): void;

package/build/types/cmp/tab/TabModel.d.ts

@@ -1,14 +1,9 @@
 import { HoistModel, RefreshMode, RenderMode, Content, RefreshContextModel, Thunkable } from '@xh/hoist/core';
-import { TabContainerModel } from '@xh/hoist/cmp/tab/TabContainerModel';
+import { TabContainerConfig, TabContainerModel } from '@xh/hoist/cmp/tab';
 import { ReactElement, ReactNode } from 'react';
 export interface TabConfig {
     /** Unique ID, used by container for locating tabs and generating routes. */
     id: string;
-    /**
-     *  Parent TabContainerModel. Provided by the container when constructing these models -
-     *  no need for application to specify directly.
-     */
-    containerModel?: TabContainerModel;
     /** Display title for the Tab in the container's TabSwitcher. */
     title?: ReactNode;
     /** Display icon for the Tab in the container's TabSwitcher. */
@@ -24,8 +19,10 @@ export interface TabConfig {
     excludeFromSwitcher?: boolean;
     /** Display an affordance to allow the user to remove this tab from its container.*/
     showRemoveAction?: boolean;
-    /** Item to be rendered by this tab.*/
-    content?: Content;
+    /**
+     * Item to be rendered by this tab, or specification for a child tab container for this tab.
+     */
+    content?: Content | TabConfig[] | TabContainerConfig;
     /**
      * Strategy for rendering this tab. If null, will default to its container's mode. See enum
      * for description of supported modes.
@@ -57,15 +54,18 @@ export declare class TabModel extends HoistModel {
     excludeFromSwitcher: boolean;
     showRemoveAction: boolean;
     content: Content;
-    private _renderMode;
-    private _refreshMode;
     containerModel: TabContainerModel;
     refreshContextModel: RefreshContextModel;
+    /** Child TabContainerModel. For nested TabContainers only. */
+    childContainerModel: TabContainerModel;
+    private _renderMode;
+    private _refreshMode;
     get isTabModel(): boolean;
-    constructor({ id, containerModel, title, icon, tooltip, disabled, excludeFromSwitcher, showRemoveAction, content, refreshMode, renderMode, xhImpl }: TabConfig);
+    constructor({ id, title, icon, tooltip, disabled, excludeFromSwitcher, showRemoveAction, content, refreshMode, renderMode, xhImpl }: TabConfig, containerModel: TabContainerModel);
     activate(): void;
     get renderMode(): RenderMode;
     get refreshMode(): RefreshMode;
     get isActive(): boolean;
     setDisabled(disabled: boolean): void;
+    private parseContent;
 }

package/cmp/grid/GridModel.ts

@@ -1066,7 +1066,7 @@ export class GridModel extends HoistModel {
         const {maxDepth, levelLabels} = this,
             ret = executeIfFunction(levelLabels);
         if (ret && ret.length < maxDepth + 1) {
-            this.logError('Value produced by `GridModel.levelLabels` has insufficient length.');
+            this.logDebug('Value produced by `GridModel.levelLabels` has insufficient length.');
             return null;
         }
         return ret ? take(ret, maxDepth + 1) : null;

package/cmp/tab/TabContainerModel.ts

@@ -27,7 +27,7 @@ import {TabSwitcherProps} from './TabSwitcherProps';
 
 export interface TabContainerConfig {
     /** Tabs to be displayed. */
-    tabs?: TabConfig[];
+    tabs: TabConfig[];
 
     /**
      * ID of Tab to be shown initially if routing does not specify otherwise. If not set,
@@ -157,13 +157,14 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
 
             this.forwardRouterToTab(this.activeTabId);
         } else if (persistWith) {
-            PersistenceProvider.create({
-                persistOptions: {
-                    path: 'tabContainer',
-                    ...persistWith
-                },
-                target: this
-            });
+            ((this.persistWith = {
+                path: 'tabContainer',
+                ...persistWith
+            }),
+                PersistenceProvider.create({
+                    persistOptions: this.persistWith,
+                    target: this
+                }));
         }
 
         if (track) {
@@ -202,13 +203,7 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
             this.activeTabId = this.calculateActiveTabId(tabs);
         }
         this.tabs = tabs.map(t =>
-            t instanceof TabModel
-                ? t
-                : new TabModel({
-                      ...t,
-                      containerModel: this,
-                      xhImpl: this.xhImpl
-                  })
+            t instanceof TabModel ? t : new TabModel({...t, xhImpl: this.xhImpl}, this)
         );
 
         if (oldTabs) {
@@ -228,7 +223,10 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         return this.findTab(tab.id);
     }
 
-    /** Remove a single tab from the container. */
+    /**
+     * Remove a single tab from the container.
+     * Supported for tabs that are immediate children of this container.
+     **/
     @action
     removeTab(tab: TabModel | string) {
         const {tabs, activeTab} = this,
@@ -250,16 +248,19 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.setTabs(without(tabs, toRemove));
     }
 
-    /** Update the title of an existing tab. Logs failures quietly on debug if not found.  */
+    /**
+     * Update the title of an existing tab.
+     * Supported for tabs that are immediate children of this container.
+     * Logs failures quietly on debug if not found.
+     * */
     setTabTitle(tabId: string, title: ReactNode) {
         const tab = this.findTab(tabId);
         if (tab) {
             tab.title = title;
-        } else {
-            this.logDebug(`Failed to setTabTitle`, `Tab ${tabId} not found`);
         }
     }
 
+    /** Find a tab that is an immediate child of this container. */
     findTab(id: string): TabModel {
         return find(this.tabs, {id});
     }
@@ -284,9 +285,11 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
      * Set the currently active Tab.
      *
      * If using routing, this method will navigate to the new tab via the router and the active Tab
-     * will only be updated once the router state changes. Otherwise the active Tab will be updated
+     * will only be updated once the router state changes. Otherwise, the active Tab will be updated
      * immediately.
      *
+     * Supported for tabs that are immediate children of this container.
+     *
      * @param tab - TabModel or id of TabModel to be activated.
      */
     activateTab(tab: TabModel | string) {

package/cmp/tab/TabModel.ts

@@ -17,20 +17,14 @@ import {
 } from '@xh/hoist/core';
 import {action, computed, observable, makeObservable, bindable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {startCase} from 'lodash';
-import {TabContainerModel} from '@xh/hoist/cmp/tab/TabContainerModel';
+import {isArray, isUndefined, startCase} from 'lodash';
+import {TabContainerConfig, TabContainerModel, tabContainer} from '@xh/hoist/cmp/tab';
 import {ReactElement, ReactNode} from 'react';
 
 export interface TabConfig {
     /** Unique ID, used by container for locating tabs and generating routes. */
     id: string;
 
-    /**
-     *  Parent TabContainerModel. Provided by the container when constructing these models -
-     *  no need for application to specify directly.
-     */
-    containerModel?: TabContainerModel;
-
     /** Display title for the Tab in the container's TabSwitcher. */
     title?: ReactNode;
 
@@ -52,8 +46,10 @@ export interface TabConfig {
     /** Display an affordance to allow the user to remove this tab from its container.*/
     showRemoveAction?: boolean;
 
-    /** Item to be rendered by this tab.*/
-    content?: Content;
+    /**
+     * Item to be rendered by this tab, or specification for a child tab container for this tab.
+     */
+    content?: Content | TabConfig[] | TabContainerConfig;
 
     /**
      * Strategy for rendering this tab. If null, will default to its container's mode. See enum
@@ -91,30 +87,35 @@ export class TabModel extends HoistModel {
     showRemoveAction: boolean;
     content: Content;
 
-    private _renderMode: RenderMode;
-    private _refreshMode: RefreshMode;
-
     containerModel: TabContainerModel;
     @managed refreshContextModel: RefreshContextModel;
 
+    /** Child TabContainerModel. For nested TabContainers only. */
+    @managed childContainerModel: TabContainerModel;
+
+    private _renderMode: RenderMode;
+    private _refreshMode: RefreshMode;
+
     get isTabModel() {
         return true;
     }
 
-    constructor({
-        id,
-        containerModel,
-        title = startCase(id),
-        icon = null,
-        tooltip = null,
-        disabled = false,
-        excludeFromSwitcher = false,
-        showRemoveAction = false,
-        content,
-        refreshMode,
-        renderMode,
-        xhImpl = false
-    }: TabConfig) {
+    constructor(
+        {
+            id,
+            title = startCase(id),
+            icon = null,
+            tooltip = null,
+            disabled = false,
+            excludeFromSwitcher = false,
+            showRemoveAction = false,
+            content,
+            refreshMode,
+            renderMode,
+            xhImpl = false
+        }: TabConfig,
+        containerModel: TabContainerModel
+    ) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
@@ -125,20 +126,18 @@ export class TabModel extends HoistModel {
         );
 
         this.id = id.toString();
-        this.containerModel = containerModel;
         this.title = title;
         this.icon = icon;
         this.tooltip = tooltip;
         this.disabled = !!disabled;
         this.excludeFromSwitcher = excludeFromSwitcher;
         this.showRemoveAction = showRemoveAction;
-        this.content = content;
-
+        this.containerModel = containerModel;
         this._renderMode = renderMode;
         this._refreshMode = refreshMode;
-
         this.refreshContextModel = new ManagedRefreshContextModel(this);
         this.refreshContextModel.xhImpl = true;
+        this.content = this.parseContent(content);
     }
 
     activate() {
@@ -170,4 +169,47 @@ export class TabModel extends HoistModel {
 
         this.disabled = disabled;
     }
+
+    //------------------
+    // Implementation
+    //------------------
+    private parseContent(content: Content | TabContainerConfig | TabConfig[]): Content {
+        // Recognize if content is a child container spec.
+        let childConfig: TabContainerConfig = null;
+        if (isArray(content)) {
+            childConfig = {tabs: content};
+        } else if ('tabs' in content) {
+            childConfig = content;
+        } else {
+            // ...otherwise just pass through
+            return content;
+        }
+
+        // It's a child container, create model and return
+        throwIf(XH.isMobileApp, 'Child Tabs not supported for Mobile TabContainer');
+        const {id} = this,
+            parent = this.containerModel;
+
+        childConfig = {
+            renderMode: parent.renderMode,
+            refreshMode: parent.refreshMode,
+            emptyText: parent.emptyText,
+            switcher: parent.switcher,
+            track: parent.track,
+            ...childConfig
+        };
+
+        // Trampoline nested routing OR persistence (TCM supports one or the other)
+        if (parent.route && !childConfig.route) {
+            childConfig.route = `${parent.route}.${id}`;
+        } else if (parent.persistWith && isUndefined(childConfig.persistWith)) {
+            childConfig.persistWith = {
+                ...parent.persistWith,
+                path: `${parent.persistWith.path}.${id}`
+            };
+        }
+
+        this.childContainerModel = new TabContainerModel(childConfig);
+        return tabContainer({model: this.childContainerModel});
+    }
 }

package/desktop/cmp/tab/impl/Tab.ts

@@ -27,7 +27,7 @@ export const tab = hoistCmp.factory({
     model: uses(TabModel, {publishMode: 'limited'}),
 
     render({model, className, testId}) {
-        let {content, isActive, renderMode, refreshContextModel} = model,
+        const {content, isActive, renderMode, refreshContextModel} = model,
             wasActivated = useRef(false);
 
         if (!wasActivated.current && isActive) wasActivated.current = true;

package/package.json

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