Support generic record types across the data + grid layer (#3691)

CHANGELOG.md

@@ -33,6 +33,11 @@
 
 ### ⚙️ Typescript API Adjustments
 
+* `Store`, `StoreRecord`, `StoreSelectionModel`, `GridModel`, `DataViewModel`, `ZoneGridModel`,
+  `RestGridModel`, and `RestStore` now accept optional generic type parameters `<TData, TId>` describing
+  a record's data shape and id type. Specify a shape (e.g. `new GridModel<MyRow>({...})`) to get
+  fully-typed `store.records`, `selectedRecord.data`, and `record.id`. Fully opt-in - untyped
+  usage is unchanged.
 * Retyped `GridModel.colChooserModel` as the new cross-platform `IColChooserModel` interface,
   replacing the bare `HoistModel` type and exposing `isOpen`, `open()`, and `close()` directly.
 

admin/tabs/cluster/objects/ClusterObjectsModel.ts

@@ -42,7 +42,7 @@ export class ClusterObjectsModel extends HoistModel {
         recordsRequired: true
     };
 
-    @managed gridModel = new GridModel({
+    @managed gridModel = new GridModel<ClusterObjectRecord>({
         selModel: 'multiple',
         treeMode: true,
         expandLevel: 2,
@@ -94,7 +94,7 @@ export class ClusterObjectsModel extends HoistModel {
         contextMenu: [this.clearHibernateCachesAction, '-', ...GridModel.defaults.contextMenu]
     });
 
-    get selectedRecord(): StoreRecord {
+    get selectedRecord(): StoreRecord<ClusterObjectRecord> {
         return this.gridModel.selectedRecord;
     }
 

admin/tabs/userData/roles/RoleModel.ts

@@ -19,6 +19,16 @@ import {compact, groupBy, mapValues} from 'lodash';
 import {RoleEditorModel} from './editor/RoleEditorModel';
 import {HoistRole, RoleModuleConfig} from './Types';
 
+/** Extends HoistRole with synthetic fields added by processRawData and processRolesForTreeGrid. */
+interface RoleGridRow extends HoistRole {
+    /** True for category group rows injected by processRolesForTreeGrid - not real role records. */
+    isGroupRow?: boolean;
+    effectiveUserNames?: string[];
+    effectiveDirectoryGroupNames?: string[];
+    effectiveRoleNames?: string[];
+    inheritedRoleNames?: string[];
+}
+
 export class RoleModel extends HoistModel {
     override telemetryPrefix = 'xh.client.admin.roles';
 
@@ -33,7 +43,7 @@ export class RoleModel extends HoistModel {
 
     override persistWith = RoleModel.PERSIST_WITH;
 
-    @managed gridModel: GridModel;
+    @managed gridModel: GridModel<RoleGridRow>;
     @managed filterChooserModel: FilterChooserModel;
     @managed readonly roleEditorModel = new RoleEditorModel(this);
     @managed recategorizeDialogModel = new RecategorizeDialogModel(this);
@@ -49,7 +59,7 @@ export class RoleModel extends HoistModel {
 
     get selectedRole(): HoistRole {
         const selected = this.gridModel.selectedRecord?.data;
-        if (selected && !selected.isGroupRow) return selected as HoistRole;
+        if (selected && !selected.isGroupRow) return selected;
         return null;
     }
 
@@ -282,8 +292,8 @@ export class RoleModel extends HoistModel {
         return root;
     }
 
-    private createGridModel(): GridModel {
-        return new GridModel({
+    private createGridModel(): GridModel<RoleGridRow> {
+        return new GridModel<RoleGridRow>({
             treeMode: true,
             treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
             autosizeOptions: {mode: 'managed', includeCollapsedChildren: true},
@@ -357,7 +367,7 @@ export class RoleModel extends HoistModel {
             contextMenu: () => this.getContextMenuItems(),
             onRowDoubleClicked: ({data: record}) => {
                 if (record && !record.data.isGroupRow) {
-                    this.editAsync(record.data as HoistRole);
+                    this.editAsync(record.data);
                 }
             }
         });

cmp/dataview/DataViewModel.ts

@@ -19,9 +19,11 @@ import {
 } from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, PlainObject, Some} from '@xh/hoist/core';
 import {
+    RecordId,
     Store,
     StoreConfig,
     StoreRecord,
+    StoreRecordId,
     StoreRecordOrId,
     StoreSelectionConfig,
     StoreSelectionModel,
@@ -38,9 +40,12 @@ import {ReactNode} from 'react';
  *
  * @see DataViewModel
  */
-export interface DataViewConfig {
+export interface DataViewConfig<
+    TData extends PlainObject = PlainObject,
+    TId extends StoreRecordId = RecordId<TData>
+> {
     /** A Store instance, or a config to create one. */
-    store?: Store | StoreConfig;
+    store?: Store<TData, TId> | StoreConfig;
 
     /** Renderer to use for each data row. */
     renderer?: ColumnRenderer;
@@ -148,12 +153,15 @@ export type ItemHeightFn = (params: {
  * @see DataView
  * @see DataViewConfig
  */
-export class DataViewModel extends HoistModel {
-    @managed gridModel: GridModel;
+export class DataViewModel<
+    TData extends PlainObject = PlainObject,
+    TId extends StoreRecordId = RecordId<TData>
+> extends HoistModel {
+    @managed gridModel: GridModel<TData, TId>;
     @bindable.ref itemHeight: number | ItemHeightFn;
     @bindable groupRowHeight: number;
 
-    constructor(config: DataViewConfig) {
+    constructor(config: DataViewConfig<TData, TId>) {
         super();
         makeObservable(this);
         const {
@@ -202,7 +210,7 @@ export class DataViewModel extends HoistModel {
             rendererIsComplex: true
         });
 
-        this.gridModel = new GridModel({
+        this.gridModel = new GridModel<TData, TId>({
             store,
             sortBy,
             selModel,
@@ -226,25 +234,25 @@ export class DataViewModel extends HoistModel {
     }
 
     // Getters and methods trampolined from GridModel.
-    get store() {
+    get store(): Store<TData, TId> {
         return this.gridModel.store;
     }
     get empty() {
         return this.gridModel.empty;
     }
-    get selModel() {
+    get selModel(): StoreSelectionModel<TData, TId> {
         return this.gridModel.selModel;
     }
     get hasSelection() {
         return this.gridModel.hasSelection;
     }
-    get selectedRecords() {
+    get selectedRecords(): StoreRecord<TData, TId>[] {
         return this.gridModel.selectedRecords;
     }
-    get selectedRecord() {
+    get selectedRecord(): StoreRecord<TData, TId> {
         return this.gridModel.selectedRecord;
     }
-    get selectedId() {
+    get selectedId(): TId {
         return this.gridModel.selectedId;
     }
     get groupBy() {

cmp/grid/GridModel.ts

@@ -40,6 +40,7 @@ import {
     Field,
     FieldSpec,
     getFieldName,
+    RecordId,
     Store,
     StoreConfig,
     StoreRecord,
@@ -130,7 +131,10 @@ import {
  * @see GridModel
  * @see ColumnSpec
  */
-export interface GridConfig {
+export interface GridConfig<
+    TData extends PlainObject = PlainObject,
+    TId extends StoreRecordId = RecordId<TData>
+> {
     /** Columns for this grid. */
     columns?: ColumnOrGroupSpec[];
 
@@ -141,7 +145,7 @@ export interface GridConfig {
      * A Store instance, or a config with which to create a Store. If not supplied,
      * store fields will be inferred from columns config.
      */
-    store?: Store | StoreConfig;
+    store?: Store<TData, TId> | StoreConfig;
 
     /** True if grid is a tree grid (default false). */
     treeMode?: boolean;
@@ -446,7 +450,10 @@ export interface GridModelDefaults {
  *
  * @mcpHint model backing all grid components
  */
-export class GridModel extends HoistModel {
+export class GridModel<
+    TData extends PlainObject = PlainObject,
+    TId extends StoreRecordId = RecordId<TData>
+> extends HoistModel {
     /** App-level defaults for GridModel. Instance config takes precedence. */
     static defaults: GridModelDefaults = {
         autosizeMode: 'onSizingModeChange',
@@ -496,8 +503,8 @@ export class GridModel extends HoistModel {
     //------------------------
     // Immutable public properties
     //------------------------
-    store: Store;
-    selModel: StoreSelectionModel;
+    store: Store<TData, TId>;
+    selModel: StoreSelectionModel<TData, TId>;
     treeMode: boolean;
     colChooserModel: IColChooserModel;
     rowClassFn: RowClassFn;
@@ -599,7 +606,7 @@ export class GridModel extends HoistModel {
     /** Tracks execution of autosize operations. */
     @managed autosizeTask = TaskObserver.trackAll();
 
-    constructor(config: GridConfig) {
+    constructor(config: GridConfig<TData, TId>) {
         super();
         makeObservable(this);
         let {
@@ -658,7 +665,7 @@ export class GridModel extends HoistModel {
             appData,
             xhImpl,
             ...rest
-        }: GridConfig = config;
+        }: GridConfig<TData, TId> = config;
 
         this.xhImpl = xhImpl;
 
@@ -991,12 +998,12 @@ export class GridModel extends HoistModel {
     }
 
     /** Currently selected records. */
-    get selectedRecords(): StoreRecord[] {
+    get selectedRecords(): StoreRecord<TData, TId>[] {
         return this.selModel.selectedRecords;
     }
 
     /** IDs of currently selected records. */
-    get selectedIds(): StoreRecordId[] {
+    get selectedIds(): TId[] {
         return this.selModel.selectedIds;
     }
 
@@ -1007,7 +1014,7 @@ export class GridModel extends HoistModel {
      * due to store loading or editing.  Applications only interested in the identity
      * of the selection should use {@link selectedId} instead.
      */
-    get selectedRecord(): StoreRecord {
+    get selectedRecord(): StoreRecord<TData, TId> {
         return this.selModel.selectedRecord;
     }
 
@@ -1018,7 +1025,7 @@ export class GridModel extends HoistModel {
      * due to store loading or editing.  Applications also interested in the contents of the
      * selection should use the {@link selectedRecord} getter instead.
      */
-    get selectedId(): StoreRecordId {
+    get selectedId(): TId {
         return this.selModel.selectedId;
     }
 
@@ -1752,7 +1759,7 @@ export class GridModel extends HoistModel {
     // in this case GridModel should work out the required Store fields from column definitions.
     private parseAndSetColumnsAndStore(
         colConfigs: ColumnOrGroupSpec[],
-        storeOrConfig: Store | StoreConfig = {}
+        storeOrConfig: Store<TData, TId> | StoreConfig = {}
     ) {
         // Enhance colConfigs with field-level metadata provided by store, if any.
         colConfigs = this.enhanceColConfigsFromStore(colConfigs, storeOrConfig);
@@ -1761,12 +1768,12 @@ export class GridModel extends HoistModel {
         this.setColumns(colConfigs);
 
         // Set or create Store as needed.
-        let store: Store;
+        let store: Store<TData, TId>;
         if (storeOrConfig instanceof Store) {
             store = storeOrConfig;
         } else {
             storeOrConfig = this.enhanceStoreConfigFromColumns(storeOrConfig);
-            store = new Store({loadTreeData: this.treeMode, ...storeOrConfig});
+            store = new Store<TData, TId>({loadTreeData: this.treeMode, ...storeOrConfig});
             store.xhImpl = this.xhImpl;
             this.markManaged(store);
         }
@@ -1950,10 +1957,12 @@ export class GridModel extends HoistModel {
         return sizingMode;
     }
 
-    private parseSelModel(selModel: GridConfig['selModel']): StoreSelectionModel {
+    private parseSelModel(
+        selModel: GridConfig<TData, TId>['selModel']
+    ): StoreSelectionModel<TData, TId> {
         // Return actual instance directly.
         if (selModel instanceof StoreSelectionModel) {
-            return selModel;
+            return selModel as StoreSelectionModel<TData, TId>;
         }
 
         // Default unspecified based on platform, treat explicit null as disabled.

cmp/grid/README.md

@@ -169,6 +169,34 @@ gridModel.selectedRecords;  // Array of records
 gridModel.hasSelection;     // Boolean
 ```
 
+### Typed Records
+
+Pass a data-shape interface as a type argument to `GridModel` to get typed access to
+`selectedRecord`, `store.records`, and `record.id`:
+
+```typescript
+interface Trade {
+    id: number;        // include `id` here to type record.id automatically
+    symbol: string;
+    quantity: number;
+}
+
+const gridModel = new GridModel<Trade>({
+    store: {fields: ['symbol', 'quantity']},
+    columns: [{field: 'symbol'}, {field: 'quantity', ...number}]
+});
+
+gridModel.selectedRecord?.data.symbol;     // string
+gridModel.selectedRecord?.id;              // number
+gridModel.store.records[0].data.quantity;  // number
+```
+
+This is fully opt-in - omitting the type argument leaves records typed exactly as before. Note that
+column renderer/editor callbacks (the `{record}` they receive) and `RecordAction` callbacks
+currently still provide an **untyped** `StoreRecord` - typed callback context is planned for a
+future release. See [Typing Records](../../data/README.md#typing-records) in the data package for
+full details, including how `record.id` is derived and the id-less interface case.
+
 ### Filtering
 
 ```typescript