@xh/hoist 59.3.2 → 59.4.0

package/cmp/grid/helpers/GridCountLabel.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {GridModel} from '../GridModel';
 import {box} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, useContextModel} from '@xh/hoist/core';
 import {fmtNumber} from '@xh/hoist/format';
-import {pluralize, singularize, withDefault} from '@xh/hoist/utils/js';
+import {logError, pluralize, singularize, withDefault} from '@xh/hoist/utils/js';
+import {GridModel} from '../GridModel';
 
 export interface GridCountLabelProps extends HoistProps, BoxProps {
     /** GridModel to which this component should bind. */
@@ -49,8 +49,9 @@ export const [GridCountLabel, gridCountLabel] = hoistCmp.withFactory<GridCountLa
         gridModel = withDefault(gridModel, useContextModel(GridModel));
 
         if (!gridModel) {
-            console.error(
-                "No GridModel available to GridCountLabel.  Provide via a 'gridModel' prop, or context."
+            logError(
+                `GridModel not found - provide via 'gridModel' prop or context.`,
+                GridCountLabel
             );
             return '';
         }

package/cmp/grid/impl/ColumnWidthCalculator.ts

@@ -9,7 +9,7 @@ import {GridAutosizeOptions} from '@xh/hoist/cmp/grid/GridAutosizeOptions';
 import {XH} from '@xh/hoist/core';
 import {CompoundFilter, FieldFilter, Filter, StoreRecord} from '@xh/hoist/data';
 import {forEachAsync} from '@xh/hoist/utils/async';
-import {stripTags} from '@xh/hoist/utils/js';
+import {logWarn, stripTags} from '@xh/hoist/utils/js';
 import {
     forOwn,
     groupBy,
@@ -74,7 +74,7 @@ export class ColumnWidthCalculator {
         try {
             return this.getHeaderWidth(gridModel, column, autosizeIncludeHeaderIcons, bufferPx);
         } catch (e) {
-            console.warn(`Error calculating max header width for column "${column.colId}".`, e);
+            logWarn([`Error calculating max header width for colId '${column.colId}'.`, e], this);
         } finally {
             this.resetHeaderClassNames();
         }
@@ -104,7 +104,7 @@ export class ColumnWidthCalculator {
                 return await this.calcLevelWidthAsync(gridModel, records, column, options);
             }
         } catch (e) {
-            console.warn(`Error calculating max data width for column "${column.colId}".`, e);
+            logWarn([`Error calculating max data width for colId '${column.colId}'.`, e], this);
         } finally {
             this.resetClassNames();
         }

package/cmp/grid/impl/GridPersistenceModel.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistModel, managed, PersistenceProvider, PlainObject, XH} from '@xh/hoist/core';
+import {GridSorterLike} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, PersistenceProvider, Some, XH} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isUndefined} from 'lodash';
 import {GridModel} from '../GridModel';
-import {GridModelPersistOptions} from '../Types';
+import {ColumnState, GridModelPersistOptions} from '../Types';
 
 /**
  * Model to manage persisting state from GridModel.
@@ -22,7 +23,13 @@ export class GridPersistenceModel extends HoistModel {
     gridModel: GridModel;
 
     @observable.ref
-    state: PlainObject;
+    state: {
+        columns?: Partial<ColumnState>[];
+        sortBy?: Some<GridSorterLike>;
+        groupBy?: Some<string>;
+        version?: number;
+        autosize?: any;
+    };
 
     @managed
     provider: PersistenceProvider;
@@ -51,7 +58,7 @@ export class GridPersistenceModel extends HoistModel {
                 run: state => this.provider.write(state)
             });
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             this.state = {version: this.VERSION};
         }
 

package/cmp/grid/renderers/MultiFieldRenderer.ts

@@ -6,8 +6,8 @@
  */
 import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {div, span} from '@xh/hoist/cmp/layout';
-import {throwIf, warnIf} from '@xh/hoist/utils/js';
-import {isString, partition} from 'lodash';
+import {throwIf, warnIf, intersperse} from '@xh/hoist/utils/js';
+import {isNil, isString, partition, pull} from 'lodash';
 import {ReactNode} from 'react';
 
 /**
@@ -30,24 +30,24 @@ export function multiFieldRenderer(value, context): ReactNode {
     );
 
     const {mainRenderer, delimiter, subFields = []} = multiFieldConfig,
-        [topFields, bottomFields] = partition(subFields, it => it.position === 'top'),
-        topRowItems = [],
-        bottomRowItems = [];
+        [topFields, bottomFields] = partition(subFields, it => it.position === 'top');
 
-    // Render main field to top row
-    topRowItems.push(renderMainField(value, mainRenderer, context));
+    // Render main field and subfields to top row
+    let topRowItems: ReactNode[] = [
+        renderMainField(value, mainRenderer, context),
+        ...topFields.map(it => renderSubField(it, context))
+    ];
+    pull(topRowItems, null);
 
-    // Render SubFields to top row
-    topFields.forEach(it => {
-        if (delimiter) topRowItems.push(renderDelimiter(delimiter));
-        topRowItems.push(renderSubField(it, context));
-    });
+    // Render subfield to bottom row
+    let bottomRowItems: ReactNode[] = bottomFields.map(it => renderSubField(it, context));
+    pull(bottomRowItems, null);
 
-    // Render SubFields to bottom row
-    bottomFields.forEach((it, idx) => {
-        if (delimiter && idx > 0) bottomRowItems.push(renderDelimiter(delimiter));
-        bottomRowItems.push(renderSubField(it, context));
-    });
+    // Insert delimiter if applicable
+    if (delimiter) {
+        topRowItems = intersperse(topRowItems, renderDelimiter(delimiter));
+        bottomRowItems = intersperse(bottomRowItems, renderDelimiter(delimiter));
+    }
 
     return div({
         className: 'xh-multifield-renderer',
@@ -107,14 +107,20 @@ function renderSubField({colId, label}, context) {
 
     if (label && !isString(label)) label = headerName;
 
-    return div({
-        className: 'xh-multifield-renderer-field',
-        items: [label ? `${label}: ` : null, renderValue(value, renderer, column, context)]
-    });
+    const renderedVal = renderValue(value, renderer, column, context),
+        renderedValIsEmpty = renderedVal === '' || isNil(renderedVal);
+
+    return renderedValIsEmpty
+        ? null
+        : div({
+              className: 'xh-multifield-renderer-field',
+              items: [label ? `${label}: ` : null, renderedVal]
+          });
 }
 
 function renderValue(value, renderer, column, context) {
-    return renderer ? renderer(value, {...context, column}) : value;
+    const ret = renderer ? renderer(value, {...context, column}) : value;
+    return isNil(ret) ? null : ret;
 }
 
 function renderDelimiter(delimiter) {

package/cmp/grouping/GroupingChooserModel.ts

@@ -170,7 +170,7 @@ export class GroupingChooserModel extends HoistModel {
                     run: state => this.provider.write(state)
                 });
             } catch (e) {
-                console.error(e);
+                this.logError(e);
                 XH.safeDestroy(this.provider);
                 this.provider = null;
             }
@@ -190,7 +190,7 @@ export class GroupingChooserModel extends HoistModel {
     @action
     setValue(value: string[]) {
         if (!this.validateValue(value)) {
-            console.warn('Attempted to set GroupingChooser to invalid value: ', value);
+            this.logWarn('Attempted to set invalid value', value);
             return;
         }
         this.value = value;

package/cmp/tab/TabContainerModel.ts

@@ -144,7 +144,7 @@ export class TabContainerModel extends HoistModel {
 
         if (route) {
             if (XH.isMobileApp) {
-                console.warn('Tab container routing is not supported for mobile applications.');
+                this.logWarn('TabContainer routing is not supported for mobile applications.');
                 return;
             }
 
@@ -384,7 +384,7 @@ export class TabContainerModel extends HoistModel {
             this.provider = PersistenceProvider.create({path: 'tabContainer', ...persistWith});
             state = this.provider.read() || null;
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             XH.safeDestroy(this.provider);
             this.provider = null;
         }

package/cmp/zoneGrid/impl/ZoneGridPersistenceModel.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistModel, managed, PersistenceProvider, PlainObject} from '@xh/hoist/core';
+import {GridSorterLike} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, PersistenceProvider, Some} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isUndefined} from 'lodash';
 import {ZoneGridModel} from '../ZoneGridModel';
-import {ZoneGridModelPersistOptions} from '../Types';
+import {Zone, ZoneGridModelPersistOptions, ZoneMapping} from '../Types';
 
 /**
  * Model to manage persisting state from ZoneGridModel.
@@ -22,7 +23,12 @@ export class ZoneGridPersistenceModel extends HoistModel {
     zoneGridModel: ZoneGridModel;
 
     @observable.ref
-    state: PlainObject;
+    state: {
+        sortBy?: GridSorterLike;
+        groupBy?: Some<string>;
+        version?: number;
+        mappings?: Record<Zone, Some<string | ZoneMapping>>;
+    };
 
     @managed
     provider: PersistenceProvider;
@@ -51,7 +57,7 @@ export class ZoneGridPersistenceModel extends HoistModel {
                 run: state => this.provider.write(state)
             });
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             this.state = {version: this.VERSION};
         }
 

package/core/HoistBase.ts

@@ -4,8 +4,17 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {XH, PersistenceProvider, PersistOptions, DebounceSpec} from './';
-import {throwIf, getOrCreate} from '@xh/hoist/utils/js';
+import {XH, PersistenceProvider, PersistOptions, DebounceSpec, Some} from './';
+import {
+    throwIf,
+    getOrCreate,
+    logInfo,
+    logDebug,
+    logError,
+    logWarn,
+    withDebug,
+    withInfo
+} from '@xh/hoist/utils/js';
 import {
     cloneDeep,
     debounce as lodashDebounce,
@@ -26,7 +35,7 @@ import {
     when as mobxWhen
 } from '@xh/hoist/mobx';
 import {IAutorunOptions, IReactionOptions} from 'mobx/dist/api/autorun';
-import {IReactionDisposer} from 'mobx/dist/internal';
+import {IReactionDisposer, IEqualsComparer} from 'mobx/dist/internal';
 
 export interface HoistBaseClass {
     new (...args: any[]): HoistBase;
@@ -69,6 +78,33 @@ export abstract class HoistBase {
     /** Default persistence options for this object. */
     persistWith: PersistOptions = null;
 
+    //--------------------------------------------------
+    // Logging Delegates
+    //--------------------------------------------------
+    logInfo(...messages: unknown[]) {
+        logInfo(messages, this);
+    }
+
+    logWarn(...messages: unknown[]) {
+        logWarn(messages, this);
+    }
+
+    logError(...messages: unknown[]) {
+        logError(messages, this);
+    }
+
+    logDebug(...messages: unknown[]) {
+        logDebug(messages, this);
+    }
+
+    withInfo<T>(messages: Some<unknown>, fn: () => T): T {
+        return withInfo<T>(messages, fn, this);
+    }
+
+    withDebug<T>(messages: Some<unknown>, fn: () => T): T {
+        return withDebug<T>(messages, fn, this);
+    }
+
     /**
      * Add and start one or more managed reactions.
      *
@@ -257,7 +293,7 @@ export abstract class HoistBase {
 /**
  * Object containing options accepted by MobX 'reaction' API as well as arguments below.
  */
-export interface ReactionSpec<T = any> extends IReactionOptions<T, any> {
+export type ReactionSpec<T = any> = IReactionOptions<T, any> & {
     /**
      * Function returning data to observe - first arg to the underlying reaction() call.
      * Specify this or `when`.
@@ -275,7 +311,10 @@ export interface ReactionSpec<T = any> extends IReactionOptions<T, any> {
 
     /** Specify to debounce run function */
     debounce?: DebounceSpec;
-}
+
+    /** Specify a default from {@link comparer} or a custom comparer function. */
+    equals?: keyof typeof comparer | IEqualsComparer<T>;
+};
 
 /**
  * Object containing options accepted by MobX 'autorun' API as well as arguments below.

package/core/elem.ts

@@ -14,7 +14,7 @@ import {
     ReactElement,
     ReactNode
 } from 'react';
-import {PlainObject, Some, Thunkable} from './types/Types';
+import {Some, Thunkable} from './types/Types';
 
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
@@ -39,7 +39,7 @@ import {PlainObject, Some, Thunkable} from './types/Types';
  * with this API.  The '$' will be stripped from the prop name before passing it along to the
  * underlying component.
  */
-export type ElementSpec<P extends PlainObject> = P & {
+export type ElementSpec<P> = P & {
     //---------------------------------------------
     // Enhanced attributes to support element factory
     //---------------------------------------------

package/core/impl/InstallServices.ts

@@ -6,7 +6,7 @@
  */
 import {HoistService, HoistServiceClass, Some, XH} from '@xh/hoist/core';
 import {instanceManager} from '@xh/hoist/core/impl/InstanceManager';
-import {throwIf, withDebug} from '@xh/hoist/utils/js';
+import {throwIf} from '@xh/hoist/utils/js';
 import {camelCase, castArray} from 'lodash';
 
 /**
@@ -50,13 +50,7 @@ export async function installServicesAsync(serviceClasses: Some<HoistServiceClas
 
 async function initServicesInternalAsync(svcs: HoistService[]) {
     const promises = svcs.map(it => {
-        return withDebug(
-            `Initializing ${it.constructor.name}`,
-            () => {
-                return it.initAsync();
-            },
-            'XH'
-        );
+        return it.withDebug(`Initializing`, () => it.initAsync());
     });
 
     const results: any[] = await Promise.allSettled(promises),

package/core/load/LoadSupport.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistBase, managed, RefreshContextModel, TaskObserver} from '../';
+import {HoistBase, managed, PlainObject, RefreshContextModel, TaskObserver} from '../';
 import {LoadSpec, Loadable} from './';
 import {makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
@@ -55,11 +55,11 @@ export class LoadSupport extends HoistBase implements Loadable {
         return this.doLoadAsync(newSpec);
     }
 
-    async refreshAsync(meta?: object) {
+    async refreshAsync(meta?: PlainObject) {
         return this.loadAsync({meta, isRefresh: true});
     }
 
-    async autoRefreshAsync(meta?: object) {
+    async autoRefreshAsync(meta?: PlainObject) {
         return this.loadAsync({meta, isAutoRefresh: true});
     }
 

package/core/model/HoistModel.ts

@@ -69,7 +69,7 @@ export abstract class HoistModel extends HoistBase implements Loadable {
     @observable
     _componentProps = {};
     _modelLookup = null;
-    _created = Date.now;
+    _created = Date.now();
 
     constructor() {
         super();

package/data/Store.ts

@@ -219,7 +219,7 @@ export class Store extends HoistBase {
     _filtered: RecordSet;
 
     private _dataDefaults = null;
-    private _created = Date.now();
+    _created = Date.now();
     private _fieldMap: Map<string, Field>;
     experimental: any;
 

package/data/UrlStore.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-import {XH, managed, LoadSupport, LoadSpec, Loadable} from '@xh/hoist/core';
+import {XH, managed, LoadSupport, LoadSpec, Loadable, PlainObject} from '@xh/hoist/core';
 
 import {Store, StoreConfig} from './Store';
 
@@ -45,10 +45,10 @@ export class UrlStore extends Store implements Loadable {
     get lastLoadException() {
         return this.loadSupport.lastLoadException;
     }
-    async refreshAsync(meta?: object) {
+    async refreshAsync(meta?: PlainObject) {
         return this.loadSupport.refreshAsync(meta);
     }
-    async autoRefreshAsync(meta?: object) {
+    async autoRefreshAsync(meta?: PlainObject) {
         return this.loadSupport.autoRefreshAsync(meta);
     }
     async loadAsync(loadSpec?: LoadSpec | Partial<LoadSpec>) {

package/data/filter/CompoundFilter.ts

@@ -13,7 +13,7 @@ import {Store} from '../Store';
 import {CompoundFilterSpec, CompoundFilterOperator, FilterTestFn} from './Types';
 
 /**
- * Combines multiple filters (including other nested CompoundFilters) via an AND or OR operator.
+ * Combines multiple filters (including other nested CompoundFilters) via an `AND` or `OR` operator.
  * Immutable.
  */
 export class CompoundFilter extends Filter {
@@ -24,7 +24,8 @@ export class CompoundFilter extends Filter {
     readonly filters: Filter[];
     readonly op: CompoundFilterOperator;
 
-    get field() {
+    /** @returns the singular field this filter operates on, if consistent across all clauses. */
+    get field(): string {
         if (isEmpty(this.filters)) return null;
         const {field} = this.filters[0] as any;
         if (field && every(this.filters, {field})) return field;
@@ -32,7 +33,8 @@ export class CompoundFilter extends Filter {
     }
 
     /**
-     * Constructor - not typically called by apps - create from config via `parseFilter()` instead.
+     * Constructor - not typically called by apps - create via {@link parseFilter} instead.
+     * @internal
      */
     constructor({filters, op = 'AND'}: CompoundFilterSpec) {
         super();

package/data/filter/FieldFilter.ts

@@ -12,6 +12,7 @@ import {
     difference,
     escapeRegExp,
     isArray,
+    isEqual,
     isNil,
     isString,
     isUndefined,
@@ -27,7 +28,7 @@ import {FieldFilterOperator, FieldFilterSpec, FilterTestFn} from './Types';
  * Filters by comparing the value of a given field to one or more given candidate values using one
  * of several supported operators.
  *
- * Note that the comparison operators `[<,<=,>,>=]` always return false for null and undefined values,
+ * Note that the comparison operators `[<,<=,>,>=]` always return false for null/undefined values,
  * favoring the behavior of Excel over Javascript's implicit conversion of nullish values to 0.
  *
  * Immutable.
@@ -122,13 +123,13 @@ export class FieldFilter extends Filter {
             case '=':
                 opFn = v => {
                     if (isNil(v) || v === '') v = null;
-                    return value.includes(v);
+                    return value.some(it => isEqual(v, it));
                 };
                 break;
             case '!=':
                 opFn = v => {
                     if (isNil(v) || v === '') v = null;
-                    return !value.includes(v);
+                    return !value.some(it => isEqual(v, it));
                 };
                 break;
             case '>':

package/data/filter/Filter.ts

@@ -25,13 +25,12 @@ export abstract class Filter {
     }
 
     /**
-     * Return a function that can be used to test a record or object.
-     *
+     * @returns a function that can be used to test a record or object.
      * @param store - if provided, return will be appropriate for testing records of this store.
      *      Otherwise, return will be appropriate for testing anonymous objects.
      */
     abstract getTestFn(store?: Store): FilterTestFn;
 
-    /** True if the provided other Filter is equivalent to this instance.*/
+    /** @returns true if the provided other Filter is equivalent to this instance.*/
     abstract equals(other: Filter): boolean;
 }

package/data/filter/FunctionFilter.ts

@@ -26,7 +26,8 @@ export class FunctionFilter extends Filter {
     readonly testFn: FilterTestFn;
 
     /**
-     * Constructor - not typically called by apps - create from config via `parseFilter()` instead.
+     * Constructor - not typically called by apps - create via {@link parseFilter} instead.
+     * @internal
      */
     constructor({key, testFn}: FunctionFilterSpec) {
         super();

package/data/impl/RecordSet.ts

@@ -6,7 +6,7 @@
  */
 
 import equal from 'fast-deep-equal';
-import {throwIf, logDebug} from '@xh/hoist/utils/js';
+import {logWarn, throwIf} from '@xh/hoist/utils/js';
 import {maxBy, isNil} from 'lodash';
 import {StoreRecord, StoreRecordId} from '../StoreRecord';
 import {Store} from '../Store';
@@ -196,7 +196,7 @@ export class RecordSet {
             remove.forEach(id => {
                 if (!newRecords.has(id)) {
                     missingRemoves++;
-                    logDebug(`Attempted to remove non-existent record: ${id}`, this.store);
+                    this.store.logDebug(`Attempted to remove non-existent record: ${id}`);
                     return;
                 }
                 this.gatherDescendantIds(id, allRemoves);
@@ -211,7 +211,7 @@ export class RecordSet {
                     existing = newRecords.get(id);
                 if (!existing) {
                     missingUpdates++;
-                    logDebug(`Attempted to update non-existent record: ${id}`, this.store);
+                    this.store.logDebug(`Attempted to update non-existent record: ${id}`);
                     return;
                 }
                 newRecords.set(id, rec);
@@ -230,9 +230,9 @@ export class RecordSet {
         }
 
         if (missingRemoves > 0)
-            console.warn(`Failed to remove ${missingRemoves} records not found by id`);
+            logWarn(`Failed to remove ${missingRemoves} records not found by id`, this);
         if (missingUpdates > 0)
-            console.warn(`Failed to update ${missingUpdates} records not found by id`);
+            logWarn(`Failed to update ${missingUpdates} records not found by id`, this);
 
         return new RecordSet(this.store, newRecords);
     }

package/desktop/appcontainer/ToastSource.ts

@@ -95,7 +95,7 @@ class ToastSourceLocalModel extends HoistModel {
      */
     async getToasterAsync(position: ToasterPosition, container: HTMLElement) {
         if (container && !isElement(container)) {
-            console.warn('container for Toast must be a DOM element. Argument will be ignored.');
+            this.logWarn('Ignoring invalid containerRef for Toast - must be a DOM element');
             container = null;
         }
         const className = `xh-toast-container ${container ? 'xh-toast-container--anchored' : ''}`;

package/desktop/cmp/rest/Actions.ts

@@ -6,15 +6,17 @@
  */
 
 import '@xh/hoist/desktop/register';
+import {GridModel} from '@xh/hoist/cmp/grid';
 import {RecordActionSpec} from '@xh/hoist/data';
+import {RestGridModel} from '@xh/hoist/desktop/cmp/rest/RestGridModel';
 import {Icon} from '@xh/hoist/icon/Icon';
 
 export const addAction: RecordActionSpec = {
     text: 'Add',
     icon: Icon.add(),
     intent: 'success',
-    actionFn: ({gridModel}) => gridModel.appData.restGridModel.addRecord(),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    actionFn: ({gridModel}) => getRGM(gridModel).addRecord(),
+    displayFn: ({gridModel}) => ({hidden: getRGM(gridModel).readonly}),
     testId: 'add-action-button'
 };
 
@@ -23,8 +25,8 @@ export const editAction: RecordActionSpec = {
     icon: Icon.edit(),
     intent: 'primary',
     recordsRequired: 1,
-    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.editRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    actionFn: ({record, gridModel}) => getRGM(gridModel).editRecord(record),
+    displayFn: ({gridModel}) => ({hidden: getRGM(gridModel).readonly}),
     testId: 'edit-action-button'
 };
 
@@ -32,7 +34,7 @@ export const viewAction: RecordActionSpec = {
     text: 'View',
     icon: Icon.search(),
     recordsRequired: 1,
-    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.viewRecord(record),
+    actionFn: ({record, gridModel}) => getRGM(gridModel).viewRecord(record),
     testId: 'view-action-button'
 };
 
@@ -40,8 +42,8 @@ export const cloneAction: RecordActionSpec = {
     text: 'Clone',
     icon: Icon.copy(),
     recordsRequired: 1,
-    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.cloneRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    actionFn: ({record, gridModel}) => getRGM(gridModel).cloneRecord(record),
+    displayFn: ({gridModel}) => ({hidden: getRGM(gridModel).readonly}),
     testId: 'clone-action-button'
 };
 
@@ -51,8 +53,12 @@ export const deleteAction: RecordActionSpec = {
     intent: 'danger',
     recordsRequired: true,
     displayFn: ({gridModel, record}) => ({
-        hidden: (record && record.id === null) || gridModel.appData.restGridModel.readonly // Hide this action if we are acting on a "new" record
+        hidden: (record && record.id === null) || getRGM(gridModel).readonly // Hide this action if we are acting on a "new" record
     }),
-    actionFn: ({gridModel}) => gridModel.appData.restGridModel.confirmDeleteRecords(),
+    actionFn: ({gridModel}) => getRGM(gridModel).confirmDeleteRecords(),
     testId: 'delete-action-button'
 };
+
+function getRGM(gridModel: GridModel): RestGridModel {
+    return gridModel.appData.restGridModel as RestGridModel;
+}