@xh/hoist 46.0.0 → 46.1.0

package/CHANGELOG.md

@@ -1,10 +1,38 @@
 # Changelog
 
+## v46.1.0 - 2022-02-07
+
+###  Technical
+* This release modifies our workaround to handle the ag-Grid v26 changes to cast all of their node
+ids to strings.  The initial approach in v46.0.0 -- matching the ag-Grid behavior by casting all
+`StoreRecord` ids to strings -- was deemed too problematic for applications and has been reverted.
+Numerical ids in Store are once again fully supported.
+
+In order to accommodate the ag-Grid changes, applications that are using ag-Grid APIs
+(e.g. `agApi.getNode()` ) with `StoreRecord` should be sure to use the new property `StoreRecord.agId`
+to locate and compare records.  We expect such usages to be rare in application code.
+
+### 🎁 New Features
+
+* `XH.showFeedbackDialog()` now takes an optional message to pre-populate within the dialog.
+* Admins can now force suspension of individual client apps from the Server > WebSockets tab.
+  Intended to e.g. force an app to stop refreshing an expensive query or polling an endpoint removed
+  in a new release. Requires websockets to be enabled on both server and client.
+* `FormField`s no longer need to specify a child input, and will simply render their readonly version
+   if no child is specified.  This simplifies the common use-case of fields/forms that are always
+   readonly.
+
+### 🐞 Bug Fixes
+* `FormField` would previously throw if given a child that did not have `propTypes`.  This has
+   been fixed.
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v46.0.0...v46.1.0)
+
 ## v46.0.0 - 2022-01-25
 
 ### 🎁 New Features
 
-* `ExceptionHandler` provides a collection of overwritable static properties, allowing you to set
+* `ExceptionHandler` provides a collection of overridable static properties, allowing you to set
   app-wide default behaviour for exception handling.
 * `XH.handleException()` takes new `alertType` option to render error alerts via the familiar
   `dialog` or new `toast` UI.

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

@@ -8,7 +8,7 @@ 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';
 import {formField} from '@xh/hoist/desktop/cmp/form';
-import {jsonInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
+import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {fmtDateTimeSec} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
@@ -35,46 +35,25 @@ export const clientErrorDetail = hoistCmp.factory(
                         style: {width: '400px'},
                         items: [
                             h3(Icon.info(), 'Error Info'),
-                            formField({
-                                field: 'username',
-                                item: textInput()
-                            }),
+                            formField({field: 'username'}),
                             formField({
                                 field: 'dateCreated',
-                                item: textInput(),
                                 readonlyRenderer: fmtDateTimeSec
                             }),
-                            formField({
-                                field: 'appVersion',
-                                item: textInput()
-                            }),
+                            formField({field: 'appVersion'}),
                             formField({
                                 field: 'userAlerted',
-                                label: 'User Alerted?',
-                                item: switchInput()
-                            }),
-                            formField({
-                                field: 'id',
-                                item: textInput()
+                                label: 'User Alerted?'
                             }),
+                            formField({field: 'id'}),
                             formField({
                                 field: 'url',
-                                item: textInput(),
                                 readonlyRenderer: hyperlinkVal
                             }),
                             h3(Icon.desktop(), 'Device / Browser'),
-                            formField({
-                                field: 'device',
-                                item: textInput()
-                            }),
-                            formField({
-                                field: 'browser',
-                                item: textInput()
-                            }),
-                            formField({
-                                field: 'userAgent',
-                                item: textInput()
-                            })
+                            formField({field: 'device'}),
+                            formField({field: 'browser'}),
+                            formField({field: 'userAgent'})
                         ]
                     }),
                     vbox({

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

@@ -5,7 +5,7 @@ import {storeFilterField} from '@xh/hoist/cmp/store';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
-import {jsonInput, textArea, textInput} from '@xh/hoist/desktop/cmp/input';
+import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
@@ -63,7 +63,6 @@ const detailRecForm = hoistCmp.factory(
                             h3(Icon.info(), 'Activity'),
                             formField({
                                 field: 'username',
-                                item: textInput(),
                                 readonlyRenderer: (username) => {
                                     if (!username) return naSpan();
                                     const {impersonating} = formModel.values,
@@ -71,22 +70,14 @@ const detailRecForm = hoistCmp.factory(
                                     return span(username, impSpan);
                                 }
                             }),
-                            formField({
-                                field: 'category',
-                                item: textInput()
-                            }),
-                            formField({
-                                field: 'msg',
-                                item: textArea()
-                            }),
+                            formField({field: 'category'}),
+                            formField({field: 'msg'}),
                             formField({
                                 field: 'dateCreated',
-                                item: textInput(),
                                 readonlyRenderer: dateTimeSecRenderer({})
                             }),
                             formField({
                                 field: 'elapsed',
-                                item: textInput(),
                                 readonlyRenderer: numberRenderer({
                                     label: 'ms',
                                     nullDisplay: '-',
@@ -94,23 +85,11 @@ const detailRecForm = hoistCmp.factory(
                                     formatConfig: {thousandSeparated: false, mantissa: 0}
                                 })
                             }),
-                            formField({
-                                field: 'id',
-                                item: textInput()
-                            }),
+                            formField({field: 'id'}),
                             h3(Icon.desktop(), 'Device / Browser'),
-                            formField({
-                                field: 'device',
-                                item: textInput()
-                            }),
-                            formField({
-                                field: 'browser',
-                                item: textInput()
-                            }),
-                            formField({
-                                field: 'userAgent',
-                                item: textInput()
-                            })
+                            formField({field: 'device'}),
+                            formField({field: 'browser'}),
+                            formField({field: 'userAgent'})
                         ]
                     }),
                     panel({

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

@@ -15,8 +15,7 @@ import {
     buttonGroupInput,
     dateInput,
     switchInput,
-    textArea,
-    textInput
+    textArea
 } from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {dateTimeRenderer} from '@xh/hoist/format';
@@ -137,14 +136,12 @@ const formPanel = hoistCmp.factory(
                                 omit: !formModel.values.updated,
                                 field: 'updated',
                                 className: 'xh-alert-banner-panel__form-panel__fields--ro',
-                                item: textInput(),
                                 readonlyRenderer: dateTimeRenderer({})
                             }),
                             formField({
                                 omit: !formModel.values.updatedBy,
                                 field: 'updatedBy',
-                                className: 'xh-alert-banner-panel__form-panel__fields--ro',
-                                item: textInput()
+                                className: 'xh-alert-banner-panel__form-panel__fields--ro'
                             })
                         ]
                     })

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

@@ -4,16 +4,17 @@
  *
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
+import {div, p} from '@xh/hoist/cmp/layout';
 import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {textInput} from '@xh/hoist/desktop/cmp/input';
-import {required} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
 import {action, observable, makeObservable} 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 * as Col from '@xh/hoist/admin/columns';
+import {isEmpty} from 'lodash';
 import {createRef} from 'react';
 import * as WSCol from './WebSocketColumns';
 
@@ -37,12 +38,13 @@ export class WebSocketModel extends HoistModel {
         this.gridModel = new GridModel({
             emptyText: 'No clients connected.',
             enableExport: true,
+            selModel: 'multiple',
             store: {
                 idSpec: 'key',
                 processRawData: row => {
                     const authUser = row.authUser.username,
                         apparentUser = row.apparentUser.username,
-                        impersonating = authUser != apparentUser;
+                        impersonating = authUser !== apparentUser;
 
                     return {
                         ...row,
@@ -91,29 +93,41 @@ export class WebSocketModel extends HoistModel {
         this.lastRefresh = Date.now();
     }
 
-    async sendAlertToSelectedAsync() {
-        const {selectedRecord} = this.gridModel;
-        if (!selectedRecord) return;
+    async forceSuspendOnSelectedAsync() {
+        const {selectedRecords} = this.gridModel;
+        if (isEmpty(selectedRecords)) return;
 
         const message = await XH.prompt({
-            title: 'Send test alert',
-            icon: Icon.bullhorn(),
-            confirmProps: {text: 'Send'},
-            message: `Send an in-app alert to ${selectedRecord.data.authUser} with the text below.`,
+            title: 'Force suspend',
+            icon: Icon.stopCircle(),
+            confirmProps: {text: 'Force Suspend', icon: Icon.stopCircle(), intent: 'danger'},
+            cancelProps: {autoFocus: true},
+            message: div(
+                p(`This action will force ${selectedRecords.length} connected client(s) into suspended mode, halting all background refreshes and other activity, masking the UI, and requiring users to reload the app to continue.`),
+                p('If desired, you can enter a message below to display within the suspended app.')
+            ),
             input: {
-                item: textInput({autoFocus: true, selectOnFocus: true}),
-                initialValue: 'This is a test alert',
-                rules: [required]
+                item: textInput({placeholder: 'User-facing message (optional)'}),
+                initialValue: null
             }
         });
 
-        XH.fetchJson({
-            url: 'webSocketAdmin/pushToChannel',
-            params: {
-                channelKey: selectedRecord.data.key,
-                topic: XH.webSocketService.TEST_MSG_TOPIC,
-                message
-            }
-        });
+        if (message !== false) {
+            const tasks = selectedRecords
+                .map((rec) => XH.fetchJson({
+                    url: 'webSocketAdmin/pushToChannel',
+                    params: {
+                        channelKey: rec.data.key,
+                        topic: XH.webSocketService.FORCE_APP_SUSPEND_TOPIC,
+                        message
+                    }
+                }));
+
+            await Promise.allSettled(tasks).track({
+                category: 'Audit',
+                message: 'Suspended clients via WebSocket',
+                data: {users: selectedRecords.map(it => it.data.user).sort()}
+            });
+        }
     }
 }

package/admin/tabs/server/websocket/WebSocketPanel.js

@@ -6,28 +6,30 @@
  */
 import {WebSocketModel} from '@xh/hoist/admin/tabs/server/websocket/WebSocketModel';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {filler} from '@xh/hoist/cmp/layout';
+import {filler, box, fragment, p} from '@xh/hoist/cmp/layout';
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {creates, hoistCmp} from '@xh/hoist/core';
+import {XH, creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
+import {errorMessage} from '@xh/hoist/desktop/cmp/error';
 
 export const webSocketPanel = hoistCmp.factory({
 
     model: creates(WebSocketModel),
 
     render({model}) {
+        if (!XH.webSocketService.enabled) return notPresentMessage();
         return panel({
             tbar: [
                 button({
-                    text: 'Send test alert',
-                    icon: Icon.bullhorn(),
-                    intent: 'primary',
-                    disabled: !model.gridModel.selectedRecord,
-                    onClick: () => model.sendAlertToSelectedAsync()
+                    text: 'Force suspend',
+                    icon: Icon.stopCircle(),
+                    intent: 'danger',
+                    disabled: !model.gridModel.hasSelection,
+                    onClick: () => model.forceSuspendOnSelectedAsync()
                 }),
                 filler(),
                 relativeTimestamp({bind: 'lastRefresh'}),
@@ -43,3 +45,21 @@ export const webSocketPanel = hoistCmp.factory({
         });
     }
 });
+
+
+const notPresentMessage = hoistCmp.factory(
+    () => box({
+        height: 200,
+        width: 1000,
+        items: [
+            errorMessage({
+                error: {
+                    message: fragment(
+                        p('WebSockets are not enabled in this application.'),
+                        p('Please ensure that you have enabled web sockets in your server and client application configuration.')
+                    )
+                }
+            })
+        ]
+    })
+);

package/appcontainer/FeedbackDialogModel.js

@@ -30,8 +30,8 @@ export class FeedbackDialogModel extends HoistModel {
     }
 
     @action
-    show() {
-        this.message = null;
+    show({message = null} = {}) {
+        this.message = message;
         this.isOpen = true;
     }
 

package/cmp/ag-grid/AgGridModel.js

@@ -463,17 +463,16 @@ export class AgGridModel extends HoistModel {
         }
     }
 
-    /** @returns {(string[]|number[])} - list of selected row node ids */
+    /** @returns {(string[])} - list of selected row node ids */
     getSelectedRowNodeIds() {
         this.throwIfNotReady();
-
-        return this.agApi.getSelectedRows().map(it => it.id);
+        return this.agApi.getSelectedNodes().map(it => it.id);
     }
 
     /**
      * Sets the selected row node ids. Any rows currently selected which are not in the list will be
      * deselected.
-     * @param ids {(string[]|number[])} - row node ids to mark as selected
+     * @param ids {(string[])} - row node ids to mark as selected
      */
     setSelectedRowNodeIds(ids) {
         this.throwIfNotReady();
@@ -487,19 +486,27 @@ export class AgGridModel extends HoistModel {
     }
 
     /**
-     * @returns {number} - the id of the first row in the grid, after sorting and filtering, which
+     * @returns {string} - the id of the first row in the grid, after sorting and filtering, which
      *      has data associated with it (i.e. not a group or other synthetic row).
      */
     getFirstSelectableRowNodeId() {
+        return this.getFirstSelectableRowNode()?.id;
+    }
+
+    /**
+     * @returns {{Object}} - the first row in the grid, after sorting and filtering, which
+     *      has data associated with it (i.e. not a group or other synthetic row).
+     */
+    getFirstSelectableRowNode() {
         this.throwIfNotReady();
 
-        let id = null;
+        let ret = null;
         this.agApi.forEachNodeAfterFilterAndSort(node => {
-            if (isNil(id) && node.data) {
-                id = node.id;
+            if (!ret && node.data) {
+                ret = node;
             }
         });
-        return id;
+        return ret;
     }
 
     /**

package/cmp/grid/Grid.js

@@ -193,7 +193,7 @@ class GridLocalModel extends HoistModel {
             immutableData: true,
             rowDataChangeDetectionStrategy: 'IdentityCheck',
             suppressColumnVirtualisation: !model.useVirtualColumns,
-            getRowNodeId: (data) => data.id,
+            getRowNodeId: (record) => record.agId,
             defaultColDef: {
                 sortable: true,
                 resizable: true,
@@ -292,7 +292,7 @@ class GridLocalModel extends HoistModel {
 
     getContextMenuItems = (params) => {
         const {model, agOptions} = this,
-            {store, selModel, contextMenu} = model;
+            {selModel, contextMenu} = model;
         if (!contextMenu || XH.isMobileApp) return null;
 
         let menu = null;
@@ -303,10 +303,9 @@ class GridLocalModel extends HoistModel {
         }
         if (!menu) return null;
 
-        const recId = params.node?.id,
+        const record = params.node?.data,
             colId = params.column?.colId,
-            record = isNil(recId) ? null : store.getById(recId, true),
-            column = isNil(colId) ? null : model.getColumn(colId),
+            column = !isNil(colId) ? model.getColumn(colId) : null,
             {selectedRecords} = model;
 
 
@@ -637,7 +636,7 @@ class GridLocalModel extends HoistModel {
             // Refresh cells in columns with complex renderers
             const refreshCols = visibleCols.filter(c => c.rendererIsComplex);
             if (!isEmpty(refreshCols)) {
-                const rowNodes = compact(transaction.update.map(r => agApi.getRowNode(r.id))),
+                const rowNodes = compact(transaction.update.map(r => agApi.getRowNode(r.agId))),
                     columns = refreshCols.map(c => c.colId);
                 agApi.refreshCells({rowNodes, columns, force: true});
             }
@@ -667,8 +666,8 @@ class GridLocalModel extends HoistModel {
     }
 
     syncSelection() {
-        const {agGridModel, selModel, isReady} = this.model,
-            {selectedIds} = selModel;
+        const {agGridModel, selModel, isReady} = this.model;
+        const selectedIds = selModel.selectedRecords.map(r => r.agId);
         if (isReady && !isEqual(selectedIds, agGridModel.getSelectedRowNodeIds())) {
             agGridModel.setSelectedRowNodeIds(selectedIds);
         }
@@ -685,8 +684,8 @@ class GridLocalModel extends HoistModel {
     //------------------------
     // Event Handlers on AG Grid.
     //------------------------
-    getDataPath = (data) => {
-        return data.treePath;
+    getDataPath = (record) => {
+        return record.treePath;
     };
 
     // We debounce this handler because the implementation of `AgGridModel.setSelectedRowNodeIds()`
@@ -762,11 +761,10 @@ class GridLocalModel extends HoistModel {
     }
 
     processCellForClipboard = ({value, node, column}) => {
-        const {model} = this,
-            recId = node.id,
-            colId = column.colId,
-            record = isNil(recId) ? null : model.store.getById(recId, true),
-            xhColumn = isNil(colId) ? null : model.getColumn(colId);
+        const record = node.data,
+            {model} = this,
+            {colId} = column,
+            xhColumn = !isNil(colId) ? model.getColumn(colId) : null;
 
         if (!record || !xhColumn) return value;
 

package/cmp/grid/GridModel.js

@@ -221,7 +221,7 @@ export class GridModel extends HoistModel {
      * @param {?ReactNode} [c.restoreDefaultsWarning] - Confirmation warning to be presented to
      *      user before restoring default grid state. Set to null to skip user confirmation.
      * @param {GridModelPersistOptions} [c.persistWith] - options governing persistence.
-     * @param {?string} [c.emptyText] - text/HTML to display if grid has no records.
+     * @param {?ReactNode} [c.emptyText] - text/element to display if grid has no records.
      *      Defaults to null, in which case no empty text will be shown.
      * @param {boolean} [c.hideEmptyTextBeforeLoad] - true (default) to hide empty text until
      *      after the Store has been loaded at least once.
@@ -559,7 +559,7 @@ export class GridModel extends HoistModel {
 
         // Get first displayed row with data - i.e. backed by a record, not a full-width group row.
         const {selModel} = this,
-            id = this.agGridModel.getFirstSelectableRowNodeId();
+            id = this.agGridModel.getFirstSelectableRowNode()?.data.id;
 
         if (id != null) {
             selModel.select(id);
@@ -603,8 +603,8 @@ export class GridModel extends HoistModel {
             indices = [];
 
         // 1) Expand any selected nodes that are collapsed
-        selectedRecords.forEach(({id}) => {
-            for (let row = agApi.getRowNode(id)?.parent; row; row = row.parent) {
+        selectedRecords.forEach(({agId}) => {
+            for (let row = agApi.getRowNode(agId)?.parent; row; row = row.parent) {
                 if (!row.expanded) {
                     agApi.setRowNodeExpanded(row, true);
                 }
@@ -614,8 +614,8 @@ export class GridModel extends HoistModel {
         await wait();
 
         // 2) Scroll to all selected nodes
-        selectedRecords.forEach(({id}) => {
-            const rowIndex = agApi.getRowNode(id)?.rowIndex;
+        selectedRecords.forEach(({agId}) => {
+            const rowIndex = agApi.getRowNode(agId)?.rowIndex;
             if (!isNil(rowIndex)) indices.push(rowIndex);
         });
 
@@ -736,7 +736,7 @@ export class GridModel extends HoistModel {
 
     /**
      * Set the text displayed when the grid is empty.
-     * @param {?string} emptyText - text/HTML to display if grid has no records.
+     * @param {?ReactNode} emptyText - text/element to display if grid has no records.
      */
     @action
     setEmptyText(emptyText) {
@@ -857,7 +857,7 @@ export class GridModel extends HoistModel {
 
         // Check required as we may be receiving stale message after unmounting
         if (isReady) {
-            selModel.select(agGridModel.getSelectedRowNodeIds());
+            selModel.select(agGridModel.agApi.getSelectedRows().map(r => r.id));
         }
     }
 
@@ -1120,12 +1120,12 @@ export class GridModel extends HoistModel {
                 recToEdit = selectedRecords[0];
             } else {
                 // Or use the first record overall.
-                const firstRowId = agGridModel.getFirstSelectableRowNodeId();
+                const firstRowId = agGridModel.getFirstSelectableRowNode()?.data.id;
                 recToEdit = store.getById(firstRowId);
             }
         }
 
-        const rowIndex = agApi.getRowNode(recToEdit?.id)?.rowIndex;
+        const rowIndex = agApi.getRowNode(recToEdit?.agId)?.rowIndex;
         if (isNil(rowIndex) || rowIndex < 0) {
             console.warn(
                 'Unable to start editing - ' +

package/cmp/grid/columns/Column.js

@@ -174,7 +174,7 @@ export class Column {
     /** @member {number} */
     autosizeMaxWidth;
     /** @member {number} */
-    autosizeBufferWidth;
+    autosizeBufferPx;
 
     /** @member {boolean} */
     autoHeight;

package/core/XH.js

@@ -27,6 +27,7 @@ import {
     TrackService,
     WebSocketService
 } from '@xh/hoist/svc';
+import {Timer} from '@xh/hoist/utils/async';
 import {MINUTES} from '@xh/hoist/utils/datetime';
 import {checkMinVersion, getClientDeviceInfo, throwIf, withDebug} from '@xh/hoist/utils/js';
 import {camelCase, compact, flatten, isBoolean, isString, uniqueId} from 'lodash';
@@ -188,6 +189,7 @@ class XHClass extends HoistBase {
     //---------------------------
     // Other State
     //---------------------------
+    suspendData = null;
     accessDeniedMessage = null;
     exceptionHandler = new ExceptionHandler();
 
@@ -609,9 +611,12 @@ class XHClass extends HoistBase {
         this.acm.changelogDialogModel.show();
     }
 
-    /** Show a dialog to elicit feedback from the user. */
-    showFeedbackDialog() {
-        this.acm.feedbackDialogModel.show();
+    /**
+     * Show a dialog to elicit feedback from the user.
+     * @param {string} [message] - optional message to preset within the feedback dialog.
+     */
+    showFeedbackDialog({message} = {}) {
+        this.acm.feedbackDialogModel.show({message});
     }
 
     /** Show the impersonation bar to allow switching users. */
@@ -805,6 +810,21 @@ class XHClass extends HoistBase {
         }
     }
 
+    /**
+     * Suspend all app activity and display, including timers and web sockets.
+     *
+     * Suspension is a terminal state, requiring user to reload the app.
+     * Used for idling, forced version upgrades, and ad-hoc killing of problematic clients.
+     * @package - not intended for application use.
+     */
+    suspendApp(suspendData) {
+        if (XH.appState === AppState.SUSPENDED) return;
+        this.suspendData = suspendData;
+        XH.setAppState(AppState.SUSPENDED);
+        XH.webSocketService.shutdown();
+        Timer.cancelAll();
+    }
+
     //------------------------
     // Implementation
     //------------------------