@xh/hoist 73.0.0-SNAPSHOT.1745973083869 → 73.0.0-SNAPSHOT.1746025071597

package/CHANGELOG.md

@@ -4,12 +4,18 @@
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
 
-Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab.
+Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab
+and new properties on `TrackLog`.
 
 ### 🎁 New Features
 
 * Added a new "Clients" Admin Console tab- a consolidated view of all websocket-connected clients
   across all instances in the cluster.
+* Updated `FormModel` to support `persistWith` for storing and recalling its values, including
+  developer options to persist all or a provided subset of fields.
+* Enhanced all activity tracking messages with new `tabId` and `loadId` properties, to disambiguate
+  tracking activity for users with multiple browser tabs and multiple full refreshes/restarts of a
+  client app within the same tab.
 
 ### 🐞 Bug Fixes
 

package/admin/AdminUtils.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {AppModel} from '@xh/hoist/admin/AppModel';
 import {XH} from '@xh/hoist/core';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 
@@ -22,7 +21,3 @@ export function exportFilename(moduleName: string): string {
 export function exportFilenameWithDate(moduleName: string): () => string {
     return () => `${XH.appCode}-${moduleName}-${LocalDate.today()}`;
 }
-
-export function getAppModel<T extends AppModel>() {
-    return XH.appModel as T;
-}

package/admin/App.scss

@@ -25,6 +25,12 @@
     height: 80vh;
     width: 80vw;
   }
+
+  .xh-badge-col {
+    --xh-badge-font-size: 0.9em;
+    background-color: var(--xh-intent-primary-darker);
+    font-family: var(--xh-font-family-mono);
+  }
 }
 
 .xh-units-label {

package/admin/AppModel.ts

@@ -7,21 +7,21 @@
 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';
-import {HoistAppModel, XH} from '@xh/hoist/core';
+import {HoistAppModel, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {without} from 'lodash';
 import {Route} from 'router5';
 import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
-import {clientTab} from './tabs/client/ClientTab';
 import {generalTab} from './tabs/general/GeneralTab';
 import {monitorTab} from './tabs/monitor/MonitorTab';
 import {userDataTab} from './tabs/userData/UserDataTab';
+import {clientTab} from './tabs/client/ClientTab';
 
 export class AppModel extends HoistAppModel {
-    tabModel: TabContainerModel;
+    static instance: AppModel;
 
-    viewManagerModels: Record<string, ViewManagerModel> = {};
+    @managed
+    tabModel: TabContainerModel;
 
     static get readonly() {
         return !XH.getUser().isHoistAdmin;
@@ -40,11 +40,6 @@ export class AppModel extends HoistAppModel {
         GridModel.DEFAULT_AUTOSIZE_MODE = 'managed';
     }
 
-    override async initAsync() {
-        await this.initViewManagerModelsAsync();
-        await super.initAsync();
-    }
-
     override getRoutes(): Route[] {
         return [
             {
@@ -166,11 +161,4 @@ export class AppModel extends HoistAppModel {
         const appCodes = without(XH.clientApps, XH.clientAppCode, 'mobile');
         return appCodes.find(it => it === 'app') ?? appCodes[0];
     }
-
-    async initViewManagerModelsAsync() {
-        this.viewManagerModels.activityTracking = await ViewManagerModel.createAsync({
-            type: 'xhAdminActivityTrackingView',
-            typeDisplayName: 'View'
-        });
-    }
 }

package/admin/{tabs/client/clients/ClientsColumns.ts → columns/Clients.ts}

@@ -4,11 +4,19 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {badgeCol} from '@xh/hoist/admin/columns';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {Icon} from '@xh/hoist/icon';
 
+export const createdTime: ColumnSpec = {
+    field: {
+        name: 'createdTime',
+        type: 'date',
+        displayName: 'Created'
+    },
+    ...Col.compactDate
+};
+
 export const isOpen: ColumnSpec = {
     field: {name: 'isOpen', type: 'bool'},
     headerName: '',
@@ -29,23 +37,14 @@ export const key: ColumnSpec = {
     width: 160
 };
 
-export const createdTime: ColumnSpec = {
+export const lastReceivedTime: ColumnSpec = {
     field: {
-        name: 'createdTime',
+        name: 'lastReceivedTime',
         type: 'date',
-        displayName: 'Created'
-    },
-    ...Col.compactDate
-};
-
-export const sentMessageCount: ColumnSpec = {
-    field: {
-        name: 'sentMessageCount',
-        type: 'int',
-        displayName: 'Sent'
+        displayName: 'Last Received'
     },
-    ...Col.number,
-    width: 90
+    ...Col.compactDate,
+    width: 140
 };
 
 export const lastSentTime: ColumnSpec = {
@@ -68,44 +67,12 @@ export const receivedMessageCount: ColumnSpec = {
     width: 90
 };
 
-export const lastReceivedTime: ColumnSpec = {
-    field: {
-        name: 'lastReceivedTime',
-        type: 'date',
-        displayName: 'Last Received'
-    },
-    ...Col.compactDate,
-    width: 140
-};
-
-export const appVersion: ColumnSpec = {
-    field: {
-        name: 'appVersion',
-        displayName: 'Version',
-        type: 'string'
-    },
-    width: 120
-};
-
-export const appBuild: ColumnSpec = {
-    field: {
-        name: 'appBuild',
-        displayName: 'Build',
-        type: 'string'
-    },
-    width: 120
-};
-export const loadId: ColumnSpec = {
-    field: {
-        name: 'loadId',
-        type: 'string'
-    },
-    ...badgeCol
-};
-export const tabId: ColumnSpec = {
+export const sentMessageCount: ColumnSpec = {
     field: {
-        name: 'tabId',
-        type: 'string'
+        name: 'sentMessageCount',
+        type: 'int',
+        displayName: 'Sent'
     },
-    ...badgeCol
+    ...Col.number,
+    width: 90
 };

package/admin/columns/Core.ts

@@ -11,15 +11,29 @@ import {dateTimeRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import copy from 'clipboard-copy';
 
-export const name: ColumnSpec = {
-    field: {name: 'name', type: 'string'},
-    width: 200
+export const badgeCol: ColumnSpec = {
+    autosizable: false,
+    width: 100,
+    renderer: badgeRenderer
 };
 
-export const type: ColumnSpec = {
-    field: {name: 'type', type: 'string'},
-    width: 100
-};
+export function badgeRenderer(v) {
+    return v
+        ? badge({
+              item: v,
+              className: 'xh-badge-col',
+              style: {cursor: 'copy'},
+              title: 'Double-click to copy',
+              onDoubleClick: () => {
+                  copy(v);
+                  XH.toast({
+                      icon: Icon.copy(),
+                      message: `Copied ${v}`
+                  });
+              }
+          })
+        : '-';
+}
 
 export const description: ColumnSpec = {
     field: {name: 'description', type: 'string'},
@@ -27,11 +41,9 @@ export const description: ColumnSpec = {
     minWidth: 200
 };
 
-export const notes: ColumnSpec = {
-    field: {name: 'notes', type: 'string'},
-    minWidth: 60,
-    flex: true,
-    tooltip: true
+export const name: ColumnSpec = {
+    field: {name: 'name', type: 'string'},
+    width: 200
 };
 
 export const note: ColumnSpec = {
@@ -45,33 +57,20 @@ export const note: ColumnSpec = {
     tooltip: true
 };
 
+export const notes: ColumnSpec = {
+    field: {name: 'notes', type: 'string'},
+    minWidth: 60,
+    flex: true,
+    tooltip: true
+};
+
 export const timestampNoYear: ColumnSpec = {
     field: {name: 'timestamp', type: 'date'},
     ...dateTimeSec,
     renderer: dateTimeRenderer({fmt: 'MMM DD HH:mm:ss.SSS'})
 };
 
-export function badgeRenderer(v) {
-    return v
-        ? badge({
-              item: v,
-              className: 'xh-font-family-mono',
-              style: {cursor: 'copy'},
-              intent: 'primary',
-              title: 'Double-click to copy',
-              onDoubleClick: () => {
-                  copy(v);
-                  XH.toast({
-                      icon: Icon.copy(),
-                      message: `Copied ${v}`
-                  });
-              }
-          })
-        : '-';
-}
-
-export const badgeCol: ColumnSpec = {
-    autosizable: false,
-    width: 90,
-    renderer: badgeRenderer
+export const type: ColumnSpec = {
+    field: {name: 'type', type: 'string'},
+    width: 100
 };

package/admin/columns/Tracking.ts

@@ -4,13 +4,22 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {badgeRenderer} from '@xh/hoist/admin/columns';
+import {badgeCol, badgeRenderer} from '@xh/hoist/admin/columns';
 import {RangeAggregator} from '@xh/hoist/admin/tabs/activity/aggregators/RangeAggregator';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 
+export const appBuild: ColumnSpec = {
+    field: {
+        name: 'appBuild',
+        displayName: 'Build',
+        type: 'string'
+    },
+    width: 120
+};
+
 export const appEnvironment: ColumnSpec = {
     field: {
         name: 'appEnvironment',
@@ -21,8 +30,12 @@ export const appEnvironment: ColumnSpec = {
 };
 
 export const appVersion: ColumnSpec = {
-    field: {name: 'appVersion', type: 'string'},
-    width: 130
+    field: {
+        name: 'appVersion',
+        displayName: 'Version',
+        type: 'string'
+    },
+    width: 120
 };
 
 export const browser: ColumnSpec = {
@@ -35,24 +48,25 @@ export const browser: ColumnSpec = {
     width: 100
 };
 
-export const severity: ColumnSpec = {
+export const category: ColumnSpec = {
     field: {
-        name: 'severity',
+        name: 'category',
         type: 'string',
         isDimension: true,
         aggregator: 'UNIQUE'
     },
-    width: 80
+    width: 100
 };
 
-export const category: ColumnSpec = {
+export const correlationId: ColumnSpec = {
     field: {
-        name: 'category',
+        name: 'correlationId',
         type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
+        displayName: 'Correlation ID'
     },
-    width: 100
+    renderer: badgeRenderer,
+    width: 180,
+    autosizeBufferPx: 20
 };
 
 export const data: ColumnSpec = {
@@ -71,6 +85,20 @@ export const day: ColumnSpec = {
     displayName: 'App Day'
 };
 
+export const dayRange: ColumnSpec = {
+    field: {
+        name: 'dayRange',
+        type: 'json',
+        aggregator: new RangeAggregator(),
+        displayName: 'App Day Range'
+    },
+    align: 'right',
+    width: 200,
+    renderer: dayRangeRenderer,
+    exportValue: dayRangeRenderer,
+    comparator: dayRangeComparator
+};
+
 export const device: ColumnSpec = {
     field: {
         name: 'device',
@@ -117,24 +145,33 @@ export const entryId: ColumnSpec = {
     align: 'right'
 };
 
-export const correlationId: ColumnSpec = {
+export const error: ColumnSpec = {
     field: {
-        name: 'correlationId',
+        name: 'error',
+        type: 'string'
+    },
+    width: 250,
+    autosizeMaxWidth: 400,
+    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+};
+
+export const instance: ColumnSpec = {
+    field: {
+        name: 'instance',
         type: 'string',
-        displayName: 'Correlation ID'
+        isDimension: true,
+        aggregator: 'UNIQUE'
     },
     renderer: badgeRenderer,
     width: 100
 };
 
-export const error: ColumnSpec = {
+export const loadId: ColumnSpec = {
     field: {
-        name: 'error',
+        name: 'loadId',
         type: 'string'
     },
-    width: 250,
-    autosizeMaxWidth: 400,
-    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+    ...badgeCol
 };
 
 export const msg: ColumnSpec = {
@@ -149,25 +186,32 @@ export const msg: ColumnSpec = {
     autosizeMaxWidth: 400
 };
 
-export const url: ColumnSpec = {
+export const severity: ColumnSpec = {
     field: {
-        name: 'url',
+        name: 'severity',
         type: 'string',
-        displayName: 'URL'
+        isDimension: true,
+        aggregator: 'UNIQUE'
     },
-    width: 250,
-    autosizeMaxWidth: 400
+    width: 80
 };
 
-export const instance: ColumnSpec = {
+export const tabId: ColumnSpec = {
     field: {
-        name: 'instance',
+        name: 'tabId',
+        type: 'string'
+    },
+    ...badgeCol
+};
+
+export const url: ColumnSpec = {
+    field: {
+        name: 'url',
         type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
+        displayName: 'URL'
     },
-    renderer: badgeRenderer,
-    width: 100
+    width: 250,
+    autosizeMaxWidth: 400
 };
 
 export const userAgent: ColumnSpec = {
@@ -207,20 +251,6 @@ export const userMessageFlag: ColumnSpec = {
     }
 };
 
-export const dayRange: ColumnSpec = {
-    field: {
-        name: 'dayRange',
-        type: 'json',
-        aggregator: new RangeAggregator(),
-        displayName: 'App Day Range'
-    },
-    align: 'right',
-    width: 200,
-    renderer: dayRangeRenderer,
-    exportValue: dayRangeRenderer,
-    comparator: dayRangeComparator
-};
-
 //-----------------------
 // Implementation
 //-----------------------

package/admin/columns/index.ts

@@ -1,3 +1,4 @@
+export * from './Clients';
 export * from './Core';
 export * from './Rest';
 export * from './Tracking';

package/admin/tabs/activity/tracking/ActivityTracking.scss

@@ -31,24 +31,6 @@
       margin-right: var(--xh-pad-half-px);
     }
   }
-
-  &__data-fields-editor {
-    width: 50vw;
-    min-width: 700px;
-    max-width: 1000px;
-    min-height: 200px;
-
-    &__row {
-      align-items: flex-start;
-      flex: none;
-      margin-left: 5px;
-      margin-right: 5px;
-
-      &:first-child {
-        margin-top: 5px;
-      }
-    }
-  }
 }
 
 .xh-admin-activity-detail {