@xh/hoist 59.0.2 → 59.1.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 59.1.0 - 2023-09-20
+
+### 🎁 New Features
+
+* Introduced new `ErrorBoundary` component for finer-grained application handling of React Errors.
+    * Hoist now wraps `Tab`, `DashCanvasView`, `DashContainerView`, `DockView`, and `Page` in an
+      `ErrorBoundary`. This provides better isolation of application content, minimizing the chance
+      that any individual component can crash the entire app.
+    * A new `PanelModel.errorBoundary` prop allows developers to opt-in to an `ErrorBoundary`
+      wrapper around the contents of any panel.
+    * `ErrorMessage` component now provides an ability to show additional exception details.
+* Added new `Markdown` component for rendering Markdown formatted strings as markup. This includes
+  bundling `react-markdown` in Hoist.
+    * If your app already uses `react-markdown` or similar, we recommend updating to use the
+      new `Markdown` component exported by Hoist to benefit from future upgrades.
+    * Admin-managed alert banners leverage the new markdown component to support bold, italics and
+      links within alert messages.
+* Improved and fixed up `Panel` headers, including:
+    * Added new `Panel.headerClassName` prop for easier CSS manipulation of panel's header.
+    * Improved `Panel.collapsedTitle` prop and added `Panel.collapsedIcon` prop. These two props now
+      fully govern header display when collapsed.
+* Improved styling for disabled `checkbox` inputs.
+
+### ⚙️ Technical
+* `XH.showException` has been deprecated.  Use similar methods on `XH.exceptionHandler` instead.
+
+### 📚 Libraries
+
+* numbro `2.3 -> 2.4`
+* react-markdown `added @ 8.0`
+* remark-breaks `added @ 3.0`
+
+## 59.0.3 - 2023-08-25
+
+### ⚙️ Technical
+
+* New `XH.flags` property to govern experimental, hotfix, or otherwise provisional features.
+
+* Provide temporary workaround to chromium bug effecting BigNumber. Enabled via flag
+  `applyBigNumberWorkaround`. See https://github.com/MikeMcl/bignumber.js/issues/354.
+
 ## 59.0.2 - 2023-08-24
 
 ### 🐞 Bug Fixes

package/admin/AdminUtils.ts

@@ -0,0 +1,23 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+import {XH} from '@xh/hoist/core';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+
+/**
+ * Generate a standardized filename for an Admin module grid export, without datestamp.
+ */
+export function exportFilename(moduleName: string): string {
+    return `${XH.appCode}-${moduleName}`;
+}
+
+/**
+ * Generate a standardized filename for an Admin module grid export, with current datestamp.
+ * Returned as a closure to ensure current date is evaluated at export time.
+ */
+export function exportFilenameWithDate(moduleName: string): () => string {
+    return () => `${XH.appCode}-${moduleName}-${LocalDate.today()}`;
+}

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

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilename} from '@xh/hoist/admin/AdminUtils';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel} from '@xh/hoist/cmp/grid';
@@ -43,7 +44,7 @@ export class ClientErrorsModel extends HoistModel {
             colChooserModel: true,
             enableExport: true,
             exportOptions: {
-                filename: `${XH.appCode}-client-errors`,
+                filename: exportFilename('client-errors'),
                 columns: 'ALL'
             },
             emptyText: 'No errors reported...',

package/admin/tabs/activity/feedback/FeedbackPanel.ts

@@ -4,13 +4,13 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
-import {hoistCmp, XH} from '@xh/hoist/core';
+import {hoistCmp} from '@xh/hoist/core';
 import {FieldSpec} from '@xh/hoist/data';
 import {textArea} from '@xh/hoist/desktop/cmp/input';
 import {deleteAction, restGrid, RestGridConfig} from '@xh/hoist/desktop/cmp/rest';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 
 export const feedbackPanel = hoistCmp.factory(() =>
     restGrid({modelConfig: {...modelSpec, readonly: AppModel.readonly}})
@@ -20,7 +20,7 @@ const modelSpec: RestGridConfig = {
     persistWith: {localStorageKey: 'xhAdminFeedbackState'},
     colChooserModel: true,
     enableExport: true,
-    exportOptions: {filename: `${XH.appCode}-feedback-${LocalDate.today()}`},
+    exportOptions: {filename: exportFilenameWithDate('feedback')},
     emptyText: 'No feedback reported...',
     store: {
         url: 'rest/feedbackAdmin',

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilename} from '@xh/hoist/admin/AdminUtils';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
@@ -159,7 +160,7 @@ export class ActivityTrackingModel extends HoistModel {
             },
             colChooserModel: true,
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-activity-summary`},
+            exportOptions: {filename: exportFilename('activity-summary')},
             emptyText: 'No activity reported...',
             sortBy: ['cubeLabel'],
             columns: [

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

@@ -4,9 +4,10 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilename} from '@xh/hoist/admin/AdminUtils';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel} from '@xh/hoist/cmp/grid';
-import {managed, HoistModel, XH, lookup} from '@xh/hoist/core';
+import {managed, HoistModel, lookup} from '@xh/hoist/core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
 import {fmtJson} from '@xh/hoist/format';
 import * as Col from '@xh/hoist/admin/columns';
@@ -34,7 +35,7 @@ export class ActivityDetailModel extends HoistModel {
             filterModel: true,
             exportOptions: {
                 columns: 'ALL',
-                filename: `${XH.appCode}-activity-detail`
+                filename: exportFilename('activity-detail')
             },
             emptyText: 'Select a group on the left to see detailed tracking logs.',
             columns: [

package/admin/tabs/general/config/ConfigPanelModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
@@ -18,7 +19,6 @@ import {
     RestStore
 } from '@xh/hoist/desktop/cmp/rest';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {isNil, truncate} from 'lodash';
 import {DifferModel} from '../../../differ/DifferModel';
 import {RegroupDialogModel} from '../../../regroup/RegroupDialogModel';
@@ -49,7 +49,7 @@ export class ConfigPanelModel extends HoistModel {
             persistWith: this.persistWith,
             colChooserModel: true,
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-configs-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('configs')},
             selModel: 'multiple',
             store: new RestStore({
                 url: 'rest/configAdmin',

package/admin/tabs/general/users/UserModel.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {bindable, makeObservable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {keyBy, keys} from 'lodash';
 
 export class UserModel extends HoistModel {
@@ -28,7 +28,7 @@ export class UserModel extends HoistModel {
             persistWith: this.persistWith,
             colChooserModel: true,
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-users-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('users')},
             store: {idSpec: 'username'},
             sortBy: 'username',
             columns: [

package/admin/tabs/monitor/MonitorResultsModel.ts

@@ -5,18 +5,17 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
+import {Icon} from '@xh/hoist/icon';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
-import {isDisplayed} from '@xh/hoist/utils/js';
-import {createObservableRef} from '@xh/hoist/utils/react';
-import {min, sortBy} from 'lodash';
+import {pluralize} from '@xh/hoist/utils/js';
+import {isEqual, min, sortBy} from 'lodash';
 
 export class MonitorResultsModel extends HoistModel {
     @observable.ref results = [];
     @observable lastRun = null;
     @managed timer = null;
-    viewRef = createObservableRef<HTMLElement>();
 
     @computed
     get passed(): number {
@@ -38,6 +37,18 @@ export class MonitorResultsModel extends HoistModel {
         return this.results.filter(monitor => monitor.status === 'INACTIVE').length;
     }
 
+    get countsByStatus() {
+        const {passed, warned, failed, inactive} = this;
+        return {OK: passed, WARN: warned, FAIL: failed, INACTIVE: inactive};
+    }
+
+    get worstStatus() {
+        if (this.failed) return 'FAIL';
+        if (this.warned) return 'WARN';
+        if (this.passed) return 'OK';
+        return 'INACTIVE';
+    }
+
     constructor() {
         super();
         makeObservable(this);
@@ -50,7 +61,7 @@ export class MonitorResultsModel extends HoistModel {
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        if (!isDisplayed(this.viewRef.current)) return;
+        if (!XH.pageIsVisible) return;
 
         return XH.fetchJson({url: 'monitorAdmin/results', loadSpec})
             .then(rows => {
@@ -76,16 +87,42 @@ export class MonitorResultsModel extends HoistModel {
     //-------------------
     @action
     private completeLoad(vals) {
+        const prevCounts = this.countsByStatus;
         this.results = sortBy(Object.values(vals), 'sortOrder');
-        this.getLastRun();
-    }
 
-    @action
-    private getLastRun() {
+        const counts = this.countsByStatus,
+            worst = this.worstStatus;
+
+        let intent = null,
+            icon = null;
+        switch (worst) {
+            case 'FAIL':
+                intent = 'danger';
+                icon = Icon.error();
+                break;
+            case 'WARN':
+                intent = 'warning';
+                icon = Icon.warning();
+                break;
+            case 'OK':
+                intent = 'success';
+                icon = Icon.checkCircle();
+        }
+
+        // This is imperfect, in that e.g. two monitors could swap their status and we would not
+        // alert, but this approach is easy and seemed reasonable enough for this low-stakes toast.
+        if (!isEqual(prevCounts, counts) && worst !== 'INACTIVE') {
+            XH.toast({
+                message: `Status update: ${pluralize('monitor', counts[worst], true)} @ ${worst}`,
+                timeout: 6000,
+                icon,
+                intent
+            });
+        }
+
         const lastRun = min(
             this.results.filter(monitor => monitor.status !== 'UNKNOWN').map(it => it.date)
         );
-
         this.lastRun = lastRun ? new Date(lastRun) : null;
     }
 }

package/admin/tabs/monitor/MonitorResultsPanel.ts

@@ -4,27 +4,37 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {AppModel} from '@xh/hoist/admin/AppModel';
+import {filler, hbox, label, placeholder, tileFrame} from '@xh/hoist/cmp/layout';
+import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {placeholder, tileFrame} from '@xh/hoist/cmp/layout';
+import {button, modalToggleButton} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
 import {isEmpty} from 'lodash';
-
-import './MonitorResultsPanel.scss';
+import {errorMessage} from '../../../desktop/cmp/error';
 import {MonitorResultsModel} from './MonitorResultsModel';
-import {monitorResultsToolbar} from './MonitorResultsToolbar';
+import './MonitorResultsPanel.scss';
 import {tile} from './Tile';
-import {errorMessage} from '../../../desktop/cmp/error';
 
 export const monitorResultsPanel = hoistCmp.factory({
     model: creates(MonitorResultsModel),
 
     render({model}) {
         return panel({
-            ref: model.viewRef,
             mask: 'onLoad',
             className: 'xh-monitor-results-panel',
-            tbar: monitorResultsToolbar(),
-            item: body()
+            tbar: tbar(),
+            item: body(),
+            modelConfig: {
+                modalSupport: {
+                    width: '100vw',
+                    height: '100vh'
+                },
+                collapsible: false,
+                resizable: false
+            }
         });
     }
 });
@@ -48,3 +58,56 @@ const body = hoistCmp.factory<MonitorResultsModel>(({model}) => {
         items: results.map(check => tile({check}))
     });
 });
+
+const tbar = hoistCmp.factory<MonitorResultsModel>(({model}) => {
+    const {passed, warned, failed, inactive, results} = model,
+        getClassName = hide => {
+            return `xh-monitor-result-count ${hide ? 'xh-monitor-result-count--hidden' : ''}`;
+        };
+
+    return toolbar(
+        button({
+            icon: Icon.refresh(),
+            text: 'Run all now',
+            disabled: isEmpty(results),
+            omit: AppModel.readonly,
+            onClick: () => model.forceRunAllMonitorsAsync()
+        }),
+        hbox({
+            className: getClassName(!failed),
+            items: [
+                toolbarSep(),
+                Icon.error({prefix: 'fas', className: 'xh-red'}),
+                label(`${failed} failed`)
+            ]
+        }),
+        hbox({
+            className: getClassName(!warned),
+            items: [
+                toolbarSep(),
+                Icon.warning({prefix: 'fas', className: 'xh-orange'}),
+                label(`${warned} warned`)
+            ]
+        }),
+        hbox({
+            className: getClassName(!passed),
+            items: [
+                toolbarSep(),
+                Icon.checkCircle({prefix: 'fas', className: 'xh-green'}),
+                label(`${passed} passed`)
+            ]
+        }),
+        hbox({
+            className: getClassName(!inactive),
+            items: [
+                toolbarSep(),
+                Icon.disabled({prefix: 'fas', className: 'xh-gray'}),
+                label(`${inactive} inactive`)
+            ]
+        }),
+        filler(),
+        relativeTimestamp({bind: 'lastRun'}),
+        '-',
+        modalToggleButton()
+    );
+});

package/admin/tabs/server/connectionpool/ConnPoolMonitorModel.ts

@@ -4,12 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {fmtTime} from '@xh/hoist/format';
 import {bindable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {forOwn, sortBy} from 'lodash';
 import * as MCol from '../../monitor/MonitorColumns';
 
@@ -35,7 +35,7 @@ export class ConnPoolMonitorModel extends HoistModel {
 
         this.gridModel = new GridModel({
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-conn-pool-monitor-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('conn-pool-monitor')},
             filterModel: true,
             sortBy: 'timestamp|desc',
             store: {idSpec: 'timestamp'},

package/admin/tabs/server/ehcache/EhCacheModel.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {UrlStore} from '@xh/hoist/data';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {trimEnd} from 'lodash';
 
 export class EhCacheModel extends HoistModel {
@@ -19,7 +19,7 @@ export class EhCacheModel extends HoistModel {
         persistWith: this.persistWith,
         colChooserModel: true,
         enableExport: true,
-        exportOptions: {filename: `${XH.appCode}-eh-caches-${LocalDate.today()}`},
+        exportOptions: {filename: exportFilenameWithDate('eh-caches')},
         store: new UrlStore({
             url: 'ehCacheAdmin/listCaches',
             fields: [

package/admin/tabs/server/environment/ServerEnvModel.ts

@@ -4,9 +4,9 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {forOwn} from 'lodash';
 
 /**
@@ -23,8 +23,8 @@ export class ServerEnvModel extends HoistModel {
             groupBy: 'type',
             sortBy: 'name',
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-env-${LocalDate.today()}`},
-            store: {idSpec: XH.genId},
+            exportOptions: {filename: exportFilenameWithDate('env')},
+            store: {idSpec: data => `${data.type}-${data.name}`},
             columns: [
                 {
                     field: {name: 'type', type: 'string'},

package/admin/tabs/server/logLevel/LogLevelPanel.ts

@@ -4,12 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
-import {hoistCmp, XH} from '@xh/hoist/core';
+import {hoistCmp} from '@xh/hoist/core';
 import {FieldSpec} from '@xh/hoist/data';
 import {restGrid, RestGridConfig} from '@xh/hoist/desktop/cmp/rest';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import * as LogLevelCol from './LogLevelColumns';
 
 export const logLevelPanel = hoistCmp.factory(() =>
@@ -20,7 +20,7 @@ const modelSpec: RestGridConfig = {
     persistWith: {localStorageKey: 'xhAdminLogLevelState'},
     colChooserModel: true,
     enableExport: true,
-    exportOptions: {filename: `${XH.appCode}-log-levels-${LocalDate.today()}`},
+    exportOptions: {filename: exportFilenameWithDate('log-levels')},
     store: {
         url: 'rest/logLevelAdmin',
         fieldDefaults: {disableXssProtection: true},

package/admin/tabs/server/logViewer/LogViewerModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
@@ -11,7 +12,6 @@ import {RecordActionSpec} from '@xh/hoist/data';
 import {compactDateRenderer, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {makeObservable, observable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import download from 'downloadjs';
 import {createRef} from 'react';
 import {LogDisplayModel} from './LogDisplayModel';
@@ -149,7 +149,7 @@ export class LogViewerModel extends HoistModel {
     private createGridModel() {
         return new GridModel({
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-logs-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('logs')},
             selModel: 'multiple',
             store: {
                 idSpec: 'filename',

package/admin/tabs/server/memory/MemoryMonitorModel.ts

@@ -4,13 +4,13 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {lengthIs, required} from '@xh/hoist/data';
 import {fmtTime} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {forOwn, sortBy} from 'lodash';
 import * as MCol from '../../monitor/MonitorColumns';
 
@@ -31,7 +31,7 @@ export class MemoryMonitorModel extends HoistModel {
 
         this.gridModel = new GridModel({
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-memory-monitor-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('memory-monitor')},
             filterModel: true,
             sortBy: 'timestamp|desc',
             store: {idSpec: 'timestamp'},

package/admin/tabs/server/services/ServiceModel.ts

@@ -4,21 +4,21 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {UrlStore} from '@xh/hoist/data';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {isEmpty, lowerFirst} from 'lodash';
 
 export class ServiceModel extends HoistModel {
     @managed
     gridModel: GridModel = new GridModel({
         enableExport: true,
-        exportOptions: {filename: `${XH.appCode}-services-${LocalDate.today()}`},
+        exportOptions: {filename: exportFilenameWithDate('services')},
         hideHeaders: true,
         store: new UrlStore({
             url: 'serviceAdmin/listServices',
-            idSpec: XH.genId,
+            idSpec: data => `${data.provider}-${data.name}`,
             processRawData: this.processRawData,
             fields: [
                 {name: 'provider', type: 'string'},

package/admin/tabs/server/websocket/WebSocketModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {div, p} from '@xh/hoist/cmp/layout';
@@ -12,7 +13,7 @@ import {textInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
-import {LocalDate, SECONDS} from '@xh/hoist/utils/datetime';
+import {SECONDS} from '@xh/hoist/utils/datetime';
 import {isDisplayed} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
 import {createRef} from 'react';
@@ -37,7 +38,7 @@ export class WebSocketModel extends HoistModel {
         this.gridModel = new GridModel({
             emptyText: 'No clients connected.',
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-ws-connections-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('ws-connections')},
             selModel: 'multiple',
             store: {
                 idSpec: 'key',

package/admin/tabs/userData/jsonblob/JsonBlobModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
@@ -18,7 +19,6 @@ import {
 } from '@xh/hoist/desktop/cmp/rest';
 import {fmtDateTime} from '@xh/hoist/format';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {isDate} from 'lodash';
 import {DifferModel} from '../../../differ/DifferModel';
 import * as JBCol from './JsonBlobColumns';
@@ -46,7 +46,7 @@ export class JsonBlobModel extends HoistModel {
             persistWith: this.persistWith,
             colChooserModel: true,
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-json-blobs-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('json-blobs')},
             selModel: 'multiple',
             store: {
                 url: 'rest/jsonBlobAdmin',

package/admin/tabs/userData/prefs/PreferenceModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
@@ -11,7 +12,6 @@ import {FieldSpec} from '@xh/hoist/data';
 import {textArea} from '@xh/hoist/desktop/cmp/input';
 import {addAction, deleteAction, editAction, RestGridModel} from '@xh/hoist/desktop/cmp/rest';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {DifferModel} from '../../../differ/DifferModel';
 import {RegroupDialogModel} from '../../../regroup/RegroupDialogModel';
 
@@ -41,7 +41,7 @@ export class PreferenceModel extends HoistModel {
             persistWith: this.persistWith,
             colChooserModel: true,
             enableExport: true,
-            exportOptions: {filename: `${XH.appCode}-prefs-${LocalDate.today()}`},
+            exportOptions: {filename: exportFilenameWithDate('prefs')},
             selModel: 'multiple',
             store: {
                 url: 'rest/preferenceAdmin',