@xh/hoist 87.1.1 → 87.3.0

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

@@ -11,21 +11,12 @@ import {
     ActivityTrackingDataFieldSpec,
     DataFieldsEditorModel
 } from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel';
+import {DateRangePickerModel} from '@xh/hoist/cmp/daterange';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {
-    HoistModel,
-    LoadSpec,
-    LocalDateUnit,
-    managed,
-    PersistableState,
-    PersistenceProvider,
-    persistOptions,
-    PlainObject,
-    XH
-} from '@xh/hoist/core';
+import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec, getCubeLeaves, ViewRowData} from '@xh/hoist/data';
 import {dateRenderer, dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
@@ -34,29 +25,15 @@ import {compact, get, isEmpty, isEqual, round} from 'lodash';
 import moment from 'moment';
 import {ActivityDetailProvider} from './detail/ActivityDetailModel';
 
-/**
- * A relative time interval (e.g. 7 days) ending on the current app day. Drives the quick-select
- * buttons and the persisted time period, which rolls forward to end on today on restore.
- */
-export interface ActivityInterval {
-    value: number;
-    unit: LocalDateUnit;
-}
-
-/** Quick-select intervals offered in the toolbar - labels are derived as `${value}${unit[0]}`. */
-export const INTERVALS: ActivityInterval[] = [
-    {value: 6, unit: 'months'},
-    {value: 1, unit: 'months'},
-    {value: 7, unit: 'days'},
-    {value: 1, unit: 'days'}
-];
-
 export class ActivityTrackingModel extends HoistModel implements ActivityDetailProvider {
     override telemetryPrefix = 'xh.client.admin.tracking';
 
     /** FormModel for server-side querying controls. */
     @managed formModel: FormModel;
 
+    /** Period to query, resolved against the current app day. */
+    @managed dateRangePickerModel: DateRangePickerModel;
+
     /** Models for data-handling components - can be rebuilt due to change in dataFields. */
     @managed @observable.ref groupingChooserModel: GroupingChooserModel;
     @managed @observable.ref cube: Cube;
@@ -92,10 +69,6 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         return this.groupingChooserModel.value;
     }
 
-    get endDay(): LocalDate {
-        return this.formModel.values.endDay;
-    }
-
     @computed
     get hasFilter(): boolean {
         return !!this.filterChooserModel.value;
@@ -142,7 +115,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         this.markPersist('showFilterChooser');
 
         this.formModel = this.createQueryFormModel();
-        this.setupPeriodPersistence();
+        this.dateRangePickerModel = this.createDateRangePickerModel();
 
         this.dataFieldsEditorModel = new DataFieldsEditorModel(this);
         this.markPersist('dataFields');
@@ -211,39 +184,6 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         this.showFilterChooser = !this.showFilterChooser;
     }
 
-    adjustDates(dir: 'add' | 'subtract') {
-        const {startDay, endDay} = this.formModel.fields,
-            appDay = LocalDate.currentAppDay(),
-            start: LocalDate = startDay.value,
-            end: LocalDate = endDay.value,
-            diff = end.diff(start),
-            incr = diff + 1;
-
-        let newStart = start[dir](incr),
-            newEnd = end[dir](incr);
-
-        if (newEnd > appDay) {
-            newStart = appDay.subtract(Math.abs(diff));
-            newEnd = appDay;
-        }
-
-        startDay.setValue(newStart);
-        endDay.setValue(newEnd);
-    }
-
-    // Set the start date by taking the end date and pushing back the interval - then pushing
-    // forward one day as the day range query is inclusive.
-    adjustStartDate(interval: ActivityInterval) {
-        this.formModel.setValues({
-            startDay: this.endDay.subtract(interval.value, interval.unit).nextDay()
-        });
-    }
-
-    isInterval(interval: ActivityInterval) {
-        const {startDay, endDay} = this.formModel.values;
-        return startDay === endDay.subtract(interval.value, interval.unit).nextDay();
-    }
-
     getDisplayName(fieldName: string) {
         return fieldName ? (this.cube.store.getField(fieldName)?.displayName ?? fieldName) : null;
     }
@@ -254,33 +194,26 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
     private createQueryFormModel(): FormModel {
         return new FormModel({
             persistWith: {...this.persistWith, path: 'queryFormValues', includeFields: ['maxRows']},
-            fields: [
-                {name: 'startDay', initialValue: () => LocalDate.currentAppDay()},
-                {name: 'endDay', initialValue: () => LocalDate.currentAppDay()},
-                {name: 'maxRows', initialValue: XH.trackService.conf.maxRows?.default}
-            ]
+            fields: [{name: 'maxRows', initialValue: XH.trackService.conf.maxRows?.default}]
         });
     }
 
-    // Persist the selected time period as part of the active view, if endDay is currentDay
-    private setupPeriodPersistence() {
-        PersistenceProvider.create<ActivityInterval>({
-            persistOptions: persistOptions({path: 'queryPeriod'}, this.persistWith),
-            owner: this,
-            target: {
-                getPersistableState: () => {
-                    const currDay = this.endDay === LocalDate.currentAppDay(),
-                        interval = currDay ? INTERVALS.find(it => this.isInterval(it)) : null;
-                    return new PersistableState(interval ?? null);
-                },
-                setPersistableState: ({value}) => {
-                    if (value) {
-                        const endDay = LocalDate.currentAppDay();
-                        this.formModel.setValues({endDay});
-                        this.adjustStartDate(value);
-                    }
-                }
-            }
+    private createDateRangePickerModel(): DateRangePickerModel {
+        return new DateRangePickerModel({
+            persistWith: this.persistWith,
+            presets: [
+                'anchorDay',
+                'prevDay',
+                'prev7Days',
+                'prev30Days',
+                'prev90Days',
+                'mtd',
+                'prevMonth',
+                'ytd'
+            ],
+            initialValue: 'anchorDay',
+            // Track logs are stamped in the app time zone - follow its day, across midnight too.
+            anchorDay: 'appDay'
         });
     }
 
@@ -324,11 +257,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
 
     @computed
     private get query() {
-        const {values} = this.formModel;
+        const {start, end} = this.dateRangePickerModel.currentRange;
         return {
-            startDay: values.startDay,
-            endDay: values.endDay,
-            maxRows: values.maxRows,
+            startDay: start,
+            endDay: end,
+            maxRows: this.formModel.values.maxRows,
             filters: this.filterChooserModel.value
         };
     }

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

@@ -10,17 +10,17 @@ import {form} from '@xh/hoist/cmp/form';
 import {grid} from '@xh/hoist/cmp/grid';
 import {div, filler, hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {button, buttonGroup, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
+import {button, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
+import {dateRangePicker} from '@xh/hoist/desktop/cmp/daterange';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';
-import {dateInput, DateInputProps, select} from '@xh/hoist/desktop/cmp/input';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {viewManager} from '@xh/hoist/desktop/cmp/viewmanager';
 import {Icon} from '@xh/hoist/icon';
-import {LocalDate} from '@xh/hoist/utils/datetime';
-import {INTERVALS, ActivityTrackingModel} from './ActivityTrackingModel';
+import {ActivityTrackingModel} from './ActivityTrackingModel';
 import {aggChartPanel} from '@xh/hoist/admin/tabs/activity/tracking/chart/AggChartPanel';
 import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
@@ -45,64 +45,33 @@ export const activityTrackingPanel = hoistCmp.factory({
     }
 });
 
-const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
-    const dateBtn = {outlined: true, width: 40} as const;
-    return toolbar(
+const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) =>
+    toolbar(
         viewManager({
             model: model.viewManagerModel,
             showSaveButton: 'always'
         }),
         '-',
+        dateRangePicker({showStepButtons: true, testId: 'activity-period'}),
+        toolbarSep(),
+        filterChooserToggleButton(),
+        toolbarSep(),
+        dataFieldsEditor(),
+        filler(),
         form({
-            fieldDefaults: {label: null},
-            items: [
-                button({
-                    icon: Icon.angleLeft(),
-                    onClick: () => model.adjustDates('subtract')
-                }),
-                formField({
-                    field: 'startDay',
-                    item: dateInput({...dateInputProps})
-                }),
-                Icon.caretRight(),
-                formField({
-                    field: 'endDay',
-                    item: dateInput({...dateInputProps})
-                }),
-                button({
-                    icon: Icon.angleRight(),
-                    onClick: () => model.adjustDates('add'),
-                    disabled: model.endDay >= LocalDate.currentAppDay()
-                }),
-                buttonGroup({
-                    items: INTERVALS.map(interval =>
-                        button({
-                            text: `${interval.value}${interval.unit[0]}`,
-                            onClick: () => model.adjustStartDate(interval),
-                            active: model.isInterval(interval),
-                            ...dateBtn
-                        })
-                    )
-                }),
-                toolbarSep(),
-                filterChooserToggleButton(),
-                toolbarSep(),
-                dataFieldsEditor(),
-                filler(),
-                formField({
-                    field: 'maxRows',
-                    label: 'Max rows',
-                    width: 140,
-                    item: select({
-                        enableFilter: false,
-                        hideDropdownIndicator: true,
-                        options: model.maxRowOptions
-                    })
+            item: formField({
+                field: 'maxRows',
+                label: 'Max rows',
+                width: 140,
+                item: select({
+                    enableFilter: false,
+                    hideDropdownIndicator: true,
+                    options: model.maxRowOptions
                 })
-            ]
+            })
         })
-    );
-});
+    )
+);
 
 const filterChooserToggleButton = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
     const {hasFilter, showFilterChooser} = model;
@@ -161,9 +130,3 @@ const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
         ]
     });
 });
-
-const dateInputProps: DateInputProps = {
-    popoverPosition: 'bottom',
-    valueType: 'localDate',
-    width: 120
-};

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

@@ -4,6 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {naSpan, valOrNa} from '@xh/hoist/admin/AdminUtils';
 import {badgeRenderer} from '@xh/hoist/admin/columns';
 import {form} from '@xh/hoist/cmp/form';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
@@ -205,6 +206,4 @@ const additionalDataPanel = 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 => (v ? a({href: v, item: v, target: '_blank'}) : '-');

package/admin/tabs/general/alertBanner/AlertBannerPanel.ts

@@ -28,6 +28,7 @@ import {formField} from '@xh/hoist/desktop/cmp/form';
 import {
     buttonGroupInput,
     dateInput,
+    intentInput,
     select,
     switchInput,
     textArea
@@ -112,19 +113,7 @@ const formPanel = hoistCmp.factory<AlertBannerModel>(({model}) => {
                         }),
                         formField({
                             field: 'intent',
-                            item: buttonGroupInput({
-                                items: model.intentOptions.map(intent =>
-                                    button({
-                                        intent,
-                                        minimal: false,
-                                        // Opacity solution to account for Icon.placeholder() causing label to move when primary deselected
-                                        icon: Icon.check({
-                                            opacity: formModel.values.intent === intent ? 1 : 0
-                                        }),
-                                        value: intent
-                                    })
-                                )
-                            })
+                            item: intentInput({intents: model.intentOptions})
                         }),
                         formField({
                             field: 'iconName',

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

@@ -0,0 +1,72 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {markdownRenderer, yesNoRenderer} from '@xh/hoist/admin/AdminUtils';
+import {valueTypeRenderer} from '@xh/hoist/admin/columns';
+import {restDetailPanel} from '@xh/hoist/admin/detail/RestDetailPanel';
+import {formFieldSet} from '@xh/hoist/cmp/form';
+import {hbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {Icon} from '@xh/hoist/icon';
+import {ConfigPanelModel} from './ConfigPanelModel';
+import {configValue} from './ConfigValue';
+
+/**
+ * Read-only detail view of the config selected in the grid. Shows the config's metadata and every
+ * available view of its value - resolved, instance override, database, and typedClass defaults -
+ * opening on the most-derived view.
+ */
+export const configDetailPanel = hoistCmp.factory<ConfigPanelModel>({
+    displayName: 'ConfigDetailPanel',
+    model: uses(ConfigPanelModel),
+
+    render({model}) {
+        return restDetailPanel({
+            icon: Icon.settings(),
+            emptyText: 'Select a config to view its details.',
+            persistWith: {...model.persistWith, path: 'detailPanel'},
+            renderForm: (record, formModel) => {
+                const {note, valueType} = formModel.values;
+                return [
+                    formFieldSet({
+                        title: 'Config',
+                        items: [
+                            hbox(
+                                formField({field: 'groupName', flex: 1}),
+                                formField({
+                                    field: 'valueType',
+                                    readonlyRenderer: valueTypeRenderer,
+                                    flex: 1
+                                }),
+                                formField({
+                                    field: 'clientVisible',
+                                    readonlyRenderer: yesNoRenderer,
+                                    flex: 1
+                                })
+                            ),
+                            formField({
+                                field: 'note',
+                                readonlyRenderer: markdownRenderer,
+                                omit: !note
+                            }),
+                            hbox(
+                                formField({field: 'lastUpdatedBy', label: 'Updated By', flex: 1}),
+                                formField({field: 'lastUpdated', label: 'Updated', flex: 2})
+                            )
+                        ]
+                    }),
+                    formFieldSet({
+                        title: 'Value',
+                        // JSON values stretch to fill the remaining height - scalars sit compactly.
+                        className: valueType === 'json' ? 'xh-admin-readonly-form__fill' : null,
+                        item: configValue({formModel})
+                    })
+                ];
+            }
+        });
+    }
+});

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

@@ -7,8 +7,8 @@
 import * as AdminCol from '@xh/hoist/admin/columns';
 import * as Col from '@xh/hoist/admin/columns/Rest';
 import {jsonSearchButton} from '@xh/hoist/admin/jsonsearch/JsonSearch';
-import {filler, fragment} from '@xh/hoist/cmp/layout';
-import {creates, hoistCmp, XH} from '@xh/hoist/core';
+import {filler, fragment, hframe} from '@xh/hoist/cmp/layout';
+import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
@@ -17,6 +17,7 @@ import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
 import {regroupDialog} from '../../../regroup/RegroupDialog';
+import {configDetailPanel} from './ConfigDetailPanel';
 import {ConfigPanelModel} from './ConfigPanelModel';
 
 export const configPanel = hoistCmp.factory({
@@ -24,46 +25,49 @@ export const configPanel = hoistCmp.factory({
 
     render({model}) {
         return fragment(
-            restGrid({
-                testId: 'config',
-                formBbar: configFormBbar(),
-                extraToolbarItems: () => [
-                    button({
-                        icon: Icon.diff(),
-                        text: 'Compare w/ Remote',
-                        onClick: () => model.openDiffer()
-                    }),
-                    toolbarSep(),
-                    jsonSearchButton({
-                        subjectName: 'Config',
-                        docSearchUrl: 'jsonSearch/searchConfigs',
-                        gridModelConfig: {
-                            sortBy: ['groupName', 'name'],
-                            columns: [
-                                {...AdminCol.groupName},
-                                {...AdminCol.name},
-                                {
-                                    field: {name: 'json', type: 'string'},
-                                    hidden: true
-                                },
-                                {...Col.lastUpdated}
-                            ]
-                        },
-                        groupByOptions: ['groupName']
-                    })
-                ]
-            }),
+            hframe(
+                restGrid({
+                    testId: 'config',
+                    formBbar: configFormBbar(),
+                    extraToolbarItems: () => [
+                        button({
+                            icon: Icon.diff(),
+                            text: 'Compare w/ Remote',
+                            onClick: () => model.openDiffer()
+                        }),
+                        toolbarSep(),
+                        jsonSearchButton({
+                            subjectName: 'Config',
+                            docSearchUrl: 'jsonSearch/searchConfigs',
+                            gridModelConfig: {
+                                sortBy: ['groupName', 'name'],
+                                columns: [
+                                    {...AdminCol.groupName},
+                                    {...AdminCol.name},
+                                    {
+                                        field: {name: 'json', type: 'string'},
+                                        hidden: true
+                                    },
+                                    {...Col.lastUpdated}
+                                ]
+                            },
+                            groupByOptions: ['groupName']
+                        })
+                    ]
+                }),
+                configDetailPanel()
+            ),
             differ({omit: !model.differModel}),
             regroupDialog()
         );
     }
 });
 
-// Custom toolbar supports reverting the form, and leaving it open after change
+// Custom toolbar adds a Revert button to the standard record actions and Cancel/Save. The dialog
+// is edit-only - viewing is handled by the docked detail panel.
 const configFormBbar = hoistCmp.factory<RestFormModel>(({model}) => {
     const {formModel, actions, currentRecord, gridModel} = model,
-        {isDirty, isValid, readonly} = formModel,
-        containsResolved = formModel.values.resolvedValue != null;
+        {isDirty, isValid} = formModel;
     return toolbar(
         recordActionBar({
             actions,
@@ -74,11 +78,11 @@ const configFormBbar = hoistCmp.factory<RestFormModel>(({model}) => {
             text: 'Revert',
             icon: Icon.reset(),
             onClick: () => formModel.reset(),
-            omit: readonly || !isDirty
+            omit: !isDirty
         }),
         filler(),
         button({
-            text: readonly || (containsResolved && !isDirty) ? 'Close' : 'Cancel',
+            text: 'Cancel',
             onClick: () => model.close()
         }),
         button({
@@ -87,23 +91,7 @@ const configFormBbar = hoistCmp.factory<RestFormModel>(({model}) => {
             intent: 'success',
             outlined: true,
             disabled: (!model.isAdd && !isDirty) || !isValid,
-            onClick: async () => {
-                const {isAdd} = model,
-                    {id} = model.currentRecord,
-                    reopen = !isAdd && containsResolved && formModel.getField('value')?.isDirty;
-
-                await model.validateAndSaveAsync();
-                if (reopen && !model.isOpen) {
-                    const record = model.store.getById(id);
-                    if (record) {
-                        model.parent.editRecord(record);
-                        XH.successToast(
-                            'The edit has been saved and the resolved value has been updated.'
-                        );
-                    }
-                }
-            },
-            omit: readonly
+            onClick: () => model.validateAndSaveAsync()
         })
     );
 });

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

@@ -62,6 +62,9 @@ export class ConfigPanelModel extends HoistModel {
             selModel: 'multiple',
             sortBy: 'name',
             unit: 'config',
+            onRowDoubleClicked: ({data}) => {
+                if (data && !this.gridModel.readonly) this.gridModel.editRecord(data);
+            },
             // Store + fields
             store: {
                 url: 'rest/configAdmin',

package/admin/tabs/general/config/ConfigValue.scss

@@ -77,3 +77,17 @@
     padding: 0;
   }
 }
+
+// Fill mode (no fixed `height`) - the tab set / single field stretches to its container, with
+// the nested layers passing the flex down to the JSON editor.
+.xh-config-value--fill {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  .xh-form-field__inner {
+    flex: 1;
+    min-height: 0;
+  }
+}