@xh/hoist 68.0.0-SNAPSHOT.1726615045723 → 68.0.0-SNAPSHOT.1726671325631

package/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 * Requires `hoist-core >= 21.1` for consolidated polling of Alert Banner updates (see below).
 
+### 🎁 New Features
+
+* Added expand/collapse affordance in the left column header of ZoneGrids in tree mode.
+
 ### ⚙️ Technical
 
 * Updated Admin Console's Cluster tab to refresh more frequently.

package/admin/AppComponent.ts

@@ -27,22 +27,24 @@ export const AppComponent = hoistCmp({
     }
 });
 
-const tbar = hoistCmp.factory<AppModel>(({model}) =>
-    appBar({
+const tbar = hoistCmp.factory<AppModel>(({model}) => {
+    const primaryApp = model.getPrimaryAppCode();
+    return appBar({
         icon: Icon.gears({size: '2x', prefix: 'fal'}),
         leftItems: [tabSwitcher({testId: 'tab-switcher', enableOverflow: true})],
         rightItems: [
             button({
                 icon: Icon.openExternal(),
-                title: 'Open app...',
-                onClick: () => window.open('/')
+                tooltip: `Open ${primaryApp}...`,
+                omit: !primaryApp,
+                onClick: () => model.openPrimaryApp()
             }),
-            appBarSeparator()
+            appBarSeparator({omit: !primaryApp})
         ],
         appMenuButtonProps: {
             hideAdminItem: true,
             hideFeedbackItem: true,
             extraItems: model.getAppMenuButtonExtraItems()
         }
-    })
-);
+    });
+});

package/admin/AppModel.ts

@@ -4,15 +4,16 @@
  *
  * Copyright © 2024 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 {HoistAppModel, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
+import {without} from 'lodash';
 import {Route} from 'router5';
 import {activityTab} from './tabs/activity/ActivityTab';
 import {generalTab} from './tabs/general/GeneralTab';
 import {monitorTab} from './tabs/monitor/MonitorTab';
-import {clusterTab} from '@xh/hoist/admin/tabs/cluster/ClusterTab';
 import {userDataTab} from './tabs/userData/UserDataTab';
 
 export class AppModel extends HoistAppModel {
@@ -136,4 +137,14 @@ export class AppModel extends HoistAppModel {
             }
         ];
     }
+
+    /** Open the primary business-facing application, typically 'app'. */
+    openPrimaryApp() {
+        window.open(`/${this.getPrimaryAppCode()}`);
+    }
+
+    getPrimaryAppCode() {
+        const appCodes = without(XH.clientApps, XH.clientAppCode, 'mobile');
+        return appCodes.find(it => it === 'app') ?? appCodes[0];
+    }
 }

package/admin/columns/Tracking.ts

@@ -5,10 +5,13 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {RangeAggregator} from '@xh/hoist/admin/tabs/activity/aggregators/RangeAggregator';
+import {badge} from '@xh/hoist/cmp/badge';
+import {XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
+import copy from 'clipboard-copy';
 
 export const appEnvironment: ColumnSpec = {
     field: {
@@ -113,6 +116,7 @@ export const correlationId: ColumnSpec = {
         type: 'string',
         displayName: 'Correlation ID'
     },
+    renderer: badgeRenderer,
     width: 100
 };
 
@@ -121,8 +125,8 @@ export const error: ColumnSpec = {
         name: 'error',
         type: 'string'
     },
-    flex: true,
-    minWidth: 150,
+    width: 250,
+    autosizeMaxWidth: 400,
     renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
 };
 
@@ -134,9 +138,8 @@ export const msg: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
-    minWidth: 120,
-    autosizeMaxWidth: 400,
-    flex: true
+    width: 250,
+    autosizeMaxWidth: 400
 };
 
 export const url: ColumnSpec = {
@@ -156,6 +159,7 @@ export const instance: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    renderer: badgeRenderer,
     width: 100
 };
 
@@ -230,3 +234,20 @@ function dayRangeComparator(rangeA, rangeB, sortDir, abs, {defaultComparator}) {
 
     return defaultComparator(maxA, maxB);
 }
+
+function badgeRenderer(v) {
+    return v
+        ? badge({
+              item: v,
+              className: 'xh-font-family-mono xh-title-tip',
+              title: 'Double-click to copy',
+              onDoubleClick: () => {
+                  copy(v);
+                  XH.toast({
+                      icon: Icon.copy(),
+                      message: `Copied ${v}`
+                  });
+              }
+          })
+        : '-';
+}

package/admin/tabs/activity/clienterrors/ClientErrorDetail.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {correlationId, instance} from '@xh/hoist/admin/columns';
 import {form} from '@xh/hoist/cmp/form';
 import {a, div, h3, hframe, span, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp} from '@xh/hoist/core';
@@ -49,10 +50,6 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
                                 return span(username, impSpan);
                             }
                         }),
-                        formField({
-                            field: 'dateCreated',
-                            readonlyRenderer: v => fmtDateTimeSec(v)
-                        }),
                         formField({
                             field: 'appVersion',
                             readonlyRenderer: appVersion => {
@@ -65,12 +62,22 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
                             field: 'userAlerted',
                             label: 'User Alerted?'
                         }),
-                        formField({field: 'id'}),
-                        formField({field: 'correlationId'}),
                         formField({
                             field: 'url',
                             readonlyRenderer: hyperlinkVal
                         }),
+                        formField({
+                            field: 'instance',
+                            readonlyRenderer: v => instance.renderer(v, null)
+                        }),
+                        formField({
+                            field: 'correlationId',
+                            readonlyRenderer: v => correlationId.renderer(v, null)
+                        }),
+                        formField({
+                            field: 'dateCreated',
+                            readonlyRenderer: v => fmtDateTimeSec(v)
+                        }),
                         h3(Icon.desktop(), 'Device / Browser'),
                         formField({field: 'device'}),
                         formField({field: 'browser'}),
@@ -115,4 +122,4 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
 
 const valOrNa = v => (!isNil(v) ? v.toString() : naSpan());
 const naSpan = () => span({item: 'N/A', className: 'xh-text-color-muted'});
-const hyperlinkVal = v => a({href: v, item: v, target: '_blank'});
+const hyperlinkVal = v => (v ? a({href: v, item: v, target: '_blank'}) : '-');

package/admin/tabs/activity/clienterrors/ClientErrorsModel.ts

@@ -52,9 +52,10 @@ export class ClientErrorsModel extends HoistModel {
             columns: [
                 {...Col.userMessageFlag},
                 {...Col.userAlertedFlag},
-                {...Col.entryId, hidden},
                 {...Col.impersonatingFlag},
+                {...Col.entryId, hidden},
                 {...Col.username},
+                {...Col.impersonating, hidden},
                 {...Col.browser},
                 {...Col.device},
                 {...Col.userAgent, hidden},
@@ -63,11 +64,10 @@ export class ClientErrorsModel extends HoistModel {
                 {...Col.msg, displayName: 'User Message', hidden},
                 {...Col.error, hidden},
                 {...Col.url},
+                {...Col.correlationId},
                 {...Col.instance, hidden},
                 {...Col.day},
-                {...Col.dateCreatedWithSec, displayName: 'Timestamp'},
-                {...Col.impersonating, hidden},
-                {...Col.correlationId}
+                {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
             ]
         });
 

package/admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -49,17 +49,17 @@ export class ActivityDetailModel extends HoistModel {
                 {...Col.impersonating, hidden},
                 {...Col.category},
                 {...Col.msg},
-                {...Col.url},
-                {...Col.instance, hidden},
+                {...Col.browser},
+                {...Col.device},
+                {...Col.userAgent, hidden},
                 {...Col.appVersion},
                 {...Col.appEnvironment, hidden},
                 {...Col.data, hidden},
-                {...Col.device},
-                {...Col.browser},
-                {...Col.userAgent, hidden},
+                {...Col.url},
+                {...Col.correlationId},
+                {...Col.instance, hidden},
                 {...Col.elapsed},
-                {...Col.dateCreatedWithSec, displayName: 'Timestamp'},
-                {...Col.correlationId}
+                {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
             ]
         });
 

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {correlationId, instance} from '@xh/hoist/admin/columns';
 import {form} from '@xh/hoist/cmp/form';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {a, div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
@@ -81,6 +82,7 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                               }
                           }),
                           formField({field: 'category'}),
+                          formField({field: 'msg'}),
                           formField({
                               field: 'appVersion',
                               readonlyRenderer: appVersion => {
@@ -89,10 +91,17 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                                   return `${appVersion} (${appEnvironment})`;
                               }
                           }),
-                          formField({field: 'msg'}),
                           formField({
-                              field: 'dateCreated',
-                              readonlyRenderer: dateTimeSecRenderer({})
+                              field: 'url',
+                              readonlyRenderer: hyperlinkVal
+                          }),
+                          formField({
+                              field: 'instance',
+                              readonlyRenderer: v => instance.renderer(v, null)
+                          }),
+                          formField({
+                              field: 'correlationId',
+                              readonlyRenderer: v => correlationId.renderer(v, null)
                           }),
                           formField({
                               field: 'elapsed',
@@ -102,11 +111,9 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                                   formatConfig: {thousandSeparated: false, mantissa: 0}
                               })
                           }),
-                          formField({field: 'id'}),
-                          formField({field: 'correlationId'}),
                           formField({
-                              field: 'url',
-                              readonlyRenderer: hyperlinkVal
+                              field: 'dateCreated',
+                              readonlyRenderer: dateTimeSecRenderer({})
                           }),
                           h3(Icon.desktop(), 'Device / Browser'),
                           formField({field: 'device'}),
@@ -136,4 +143,4 @@ const additionalDataJsonInput = hoistCmp.factory<ActivityDetailModel>(({model})
 
 const valOrNa = v => (v != null ? v : naSpan());
 const naSpan = () => span({item: 'N/A', className: 'xh-text-color-muted'});
-const hyperlinkVal = v => a({href: v, item: v, target: '_blank'});
+const hyperlinkVal = v => (v ? a({href: v, item: v, target: '_blank'}) : '-');

package/build/types/admin/AppModel.d.ts

@@ -10,4 +10,7 @@ export declare class AppModel extends HoistAppModel {
     getAppMenuButtonExtraItems(): any[];
     getTabRoutes(): Route[];
     createTabs(): TabConfig[];
+    /** Open the primary business-facing application, typically 'app'. */
+    openPrimaryApp(): void;
+    getPrimaryAppCode(): string;
 }

package/cmp/grid/GridModel.ts

@@ -51,6 +51,7 @@ import {
 } from '@xh/hoist/data';
 import {ColChooserModel as DesktopColChooserModel} from '@xh/hoist/dynamics/desktop';
 import {ColChooserModel as MobileColChooserModel} from '@xh/hoist/dynamics/mobile';
+import {Icon} from '@xh/hoist/icon';
 import {action, bindable, makeObservable, observable, when} from '@xh/hoist/mobx';
 import {wait, waitFor} from '@xh/hoist/promise';
 import {ExportOptions} from '@xh/hoist/svc/GridExportService';
@@ -635,6 +636,7 @@ export class GridModel extends HoistModel {
                 message: this.restoreDefaultsWarning,
                 confirmProps: {
                     text: 'Yes, restore defaults',
+                    icon: Icon.reset(),
                     intent: 'primary'
                 }
             });

package/cmp/grid/columns/Column.ts

@@ -1103,6 +1103,6 @@ export class Column {
 
         return isFunction(sortValue)
             ? sortValue(v, {record, column: this, gridModel})
-            : record?.data[sortValue] ?? v;
+            : (record?.data[sortValue] ?? v);
     }
 }

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -386,6 +386,7 @@ export class ZoneGridModel extends HoistModel {
                 message: this.restoreDefaultsWarning,
                 confirmProps: {
                     text: 'Yes, restore defaults',
+                    icon: Icon.reset(),
                     intent: 'primary'
                 }
             });
@@ -583,7 +584,7 @@ export class ZoneGridModel extends HoistModel {
             const colId = it.field;
             subFields.push({
                 colId,
-                label: it.showLabel ? labelRenderers[colId] ?? true : false,
+                label: it.showLabel ? (labelRenderers[colId] ?? true) : false,
                 position: 'top'
             });
         });
@@ -591,7 +592,7 @@ export class ZoneGridModel extends HoistModel {
             const colId = it.field;
             subFields.push({
                 colId,
-                label: it.showLabel ? labelRenderers[colId] ?? true : false,
+                label: it.showLabel ? (labelRenderers[colId] ?? true) : false,
                 position: 'bottom'
             });
         });
@@ -608,6 +609,7 @@ export class ZoneGridModel extends HoistModel {
             // Controlled properties
             field: isLeft ? 'left_column' : 'right_column',
             align: isLeft ? 'left' : 'right',
+            isTreeColumn: gridModel?.treeMode && isLeft,
             flex: overrideSpec.width ? null : isLeft ? 2 : 1,
             renderer: (value, context) => zoneGridRenderer(value, context, isLeft),
             rendererIsComplex: true,

package/desktop/cmp/button/RestoreDefaultsButton.ts

@@ -51,6 +51,7 @@ export const [RestoreDefaultsButton, restoreDefaultsButton] =
                     onConfirm: () => XH.restoreDefaultsAsync(),
                     confirmProps: {
                         text: 'Yes, restore defaults',
+                        icon: Icon.reset(),
                         intent: 'primary'
                     }
                 });

package/mobile/cmp/button/RestoreDefaultsButton.ts

@@ -49,6 +49,7 @@ export const [RestoreDefaultsButton, restoreDefaultsButton] =
                     onConfirm: () => XH.restoreDefaultsAsync(),
                     confirmProps: {
                         text: 'Yes, restore defaults',
+                        icon: Icon.reset(),
                         intent: 'primary'
                     }
                 });

package/package.json

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