@xh/hoist 59.1.0 → 59.3.0

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -7,10 +7,19 @@
 import {ContextMenu} from '@blueprintjs/core';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {elementFactory, hoistCmp, HoistProps, refreshContextView, uses, XH} from '@xh/hoist/core';
+import {
+    elementFactory,
+    hoistCmp,
+    HoistProps,
+    refreshContextView,
+    TestSupportProps,
+    uses,
+    XH
+} from '@xh/hoist/core';
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {TEST_ID} from '@xh/hoist/utils/js';
 import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
@@ -20,7 +29,7 @@ import {DashCanvasModel} from './DashCanvasModel';
 import {dashCanvasContextMenu} from './impl/DashCanvasContextMenu';
 import {dashCanvasView} from './impl/DashCanvasView';
 
-export type DashCanvasProps = HoistProps<DashCanvasModel>;
+export type DashCanvasProps = HoistProps<DashCanvasModel> & TestSupportProps;
 
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.
@@ -38,7 +47,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     className: 'xh-dash-canvas',
     model: uses(DashCanvasModel),
 
-    render({className, model}, ref) {
+    render({className, model, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked;
 
@@ -85,7 +94,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         )
                     }),
                     emptyContainerOverlay()
-                ]
+                ],
+                [TEST_ID]: testId
             })
         });
     }

package/desktop/cmp/dash/container/DashContainer.ts

@@ -6,7 +6,14 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {div, frame, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses, ModelLookupContext, HoistProps, refreshContextView} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistProps,
+    ModelLookupContext,
+    refreshContextView,
+    TestSupportProps,
+    uses
+} from '@xh/hoist/core';
 import {mask} from '@xh/hoist/desktop/cmp/mask';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {useOnMount, useOnResize} from '@xh/hoist/utils/react';
@@ -15,7 +22,7 @@ import './DashContainer.scss';
 import {DashContainerModel} from './DashContainerModel';
 import {dashContainerAddViewButton} from './impl/DashContainerContextMenu';
 
-export type DashContainerProps = HoistProps<DashContainerModel>;
+export type DashContainerProps = HoistProps<DashContainerModel> & TestSupportProps;
 
 /**
  * Display a set of child components in accordance with a DashContainerModel.
@@ -25,7 +32,7 @@ export const [DashContainer, dashContainer] = hoistCmp.withFactory<DashContainer
     model: uses(DashContainerModel),
     className: 'xh-dash-container',
 
-    render({model, className}, ref) {
+    render({model, className, testId}, ref) {
         // Store current ModelLookupContext in model, to be applied in views later
         const context = useContext(ModelLookupContext);
         useOnMount(() => (model.modelLookupContext = context));
@@ -39,7 +46,7 @@ export const [DashContainer, dashContainer] = hoistCmp.withFactory<DashContainer
         return refreshContextView({
             model: model.refreshContextModel,
             item: frame(
-                frame({className, ref}),
+                frame({className, ref, testId}),
                 mask({spinner: true, bind: model.loadingStateTask}),
                 emptyContainerOverlay()
             )

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -22,7 +22,7 @@ import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {debounced, ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {cloneDeep, defaultsDeep, find, isFinite, isNil, reject, startCase} from 'lodash';
+import {cloneDeep, defaultsDeep, find, isFinite, isNil, last, reject, startCase} from 'lodash';
 import {createRoot} from 'react-dom/client';
 import {DashConfig, DashModel} from '../';
 import {DashViewModel, DashViewState} from '../DashViewModel';
@@ -290,7 +290,8 @@ export class DashContainerModel extends DashModel<
 
         if (!isFinite(index)) index = container.contentItems.length;
         container.addChild(goldenLayoutConfig(viewSpec), index);
-        wait(1).then(() => this.onStackActiveItemChange(container));
+        const stack = container.isStack ? container : last(container.contentItems);
+        wait(1).then(() => this.onStackActiveItemChange(stack));
     }
 
     /**

package/desktop/cmp/dash/container/impl/DashContainerUtils.ts

@@ -46,8 +46,8 @@ function convertGLToStateInner(configItems = [], contentItems = [], dashContaine
 
             ret.push(view);
         } else {
-            const {type, width, height, activeItemIndex, content} = configItem,
-                container = {type} as PlainObject;
+            const {type, width, height, activeItemIndex, content, isClosable} = configItem,
+                container = {type, allowRemove: isClosable} as PlainObject;
 
             if (isFinite(width)) container.width = round(width, 2);
             if (isFinite(height)) container.height = round(height, 2);
@@ -138,12 +138,12 @@ function convertStateToGLInner(items = [], viewSpecs = [], containerSize, contai
             const content = convertStateToGLInner(item.content, viewSpecs, itemSize, item).filter(
                 it => !isNil(it)
             );
-            if (!content.length) return null;
+            if (!content.length && item.allowRemove) return null;
 
             // Below is a workaround for issue https://github.com/golden-layout/golden-layout/issues/418
             // GoldenLayouts can sometimes export its state with an out-of-bounds `activeItemIndex`.
             // If we encounter this, we overwrite `activeItemIndex` to point to the last item.
-            const ret = {...item, content};
+            const ret = {...item, content, isClosable: item.allowRemove};
             if (
                 type === 'stack' &&
                 isFinite(ret.activeItemIndex) &&

package/desktop/cmp/dock/DockViewModel.ts

@@ -13,7 +13,7 @@ import {
     RefreshContextModel,
     RefreshMode,
     RenderMode,
-    XH
+    Awaitable
 } from '@xh/hoist/core';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport/ModalSupportModel';
 import '@xh/hoist/desktop/register';
@@ -53,6 +53,8 @@ export interface DockViewConfig {
     allowClose?: boolean;
     /** true (default) to allow popping out of the dock and displaying in a modal Dialog. */
     allowDialog?: boolean;
+    /** Awaitable callback invoked on close. Return false to prevent close. */
+    onClose?: () => Awaitable<boolean | void>;
 }
 
 /**
@@ -75,6 +77,7 @@ export class DockViewModel extends HoistModel {
     collapsedWidth: number;
     allowClose: boolean;
     allowDialog: boolean;
+    onClose?: () => Awaitable<boolean | void>;
 
     containerModel: DockContainerModel;
     @managed refreshContextModel: RefreshContextModel;
@@ -109,7 +112,8 @@ export class DockViewModel extends HoistModel {
         docked = true,
         collapsed = false,
         allowClose = true,
-        allowDialog = true
+        allowDialog = true,
+        onClose
     }: DockViewConfig) {
         super();
         makeObservable(this);
@@ -128,6 +132,7 @@ export class DockViewModel extends HoistModel {
         this.collapsed = collapsed;
         this.allowClose = allowClose;
         this.allowDialog = allowDialog;
+        this.onClose = onClose;
 
         this._renderMode = renderMode;
         this._refreshMode = refreshMode;
@@ -195,11 +200,8 @@ export class DockViewModel extends HoistModel {
     // Actions
     //-----------------------
     close() {
-        this.containerModel.removeView(this.id);
-    }
-
-    override destroy() {
-        XH.safeDestroy(this.content);
-        super.destroy();
+        Promise.resolve(this.onClose?.()).then(v => {
+            if (v !== false) this.containerModel.removeView(this.id);
+        });
     }
 }

package/desktop/cmp/dock/impl/DockContainer.ts

@@ -25,6 +25,7 @@ export function dockContainerImpl(
         className: classNames(className, `xh-dock-container--${model.direction}`),
         items: model.views.map(viewModel => {
             return dockView({
+                key: viewModel.xhId,
                 model: viewModel,
                 compactHeaders
             });

package/desktop/cmp/error/ErrorMessage.ts

@@ -5,16 +5,15 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {isNil, isString} from 'lodash';
 import {isValidElement, ReactNode} from 'react';
-
 import './ErrorMessage.scss';
 import {Icon} from '@xh/hoist/icon';
 
-export interface ErrorMessageProps extends HoistProps {
+export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
      * If provided, will render a "Retry" button that calls this function.
      * Use `actionButtonProps` for further control over this button.
@@ -69,7 +68,8 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
             actionFn,
             actionButtonProps,
             detailsFn,
-            detailsButtonProps
+            detailsButtonProps,
+            ...rest
         } = props;
 
         if (isNil(error)) return null;
@@ -77,17 +77,17 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
         if (!message) {
             if (isString(error)) {
                 message = error;
-            } else if (error.message) {
-                message = error.message;
+            } else {
+                message = error.message || error.name || 'Unknown Error';
             }
         }
 
         if (actionFn) {
-            actionButtonProps = {...actionButtonProps, onClick: error => actionFn(error)};
+            actionButtonProps = {...actionButtonProps, onClick: () => actionFn(error)};
         }
 
         if (detailsFn) {
-            detailsButtonProps = {...detailsButtonProps, onClick: error => detailsFn(error)};
+            detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
         }
 
         let buttons = [],
@@ -103,6 +103,7 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
         return frame({
             ref,
             className,
+            ...rest,
             item: div({
                 className: 'xh-error-message__inner',
                 items: [titleCmp({title}), messageCmp({message, error}), buttonBar]

package/desktop/cmp/form/FormField.ts

@@ -4,22 +4,23 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {PopoverPosition, PopperBoundary} from '@blueprintjs/core';
 import composeRefs from '@seznam/compose-react-refs/composeRefs';
-import {FieldModel, FormContext, FormContextType, BaseFormFieldProps} from '@xh/hoist/cmp/form';
+import {BaseFormFieldProps, FieldModel, FormContext, FormContextType} from '@xh/hoist/cmp/form';
 import {box, div, label as labelEl, li, span, ul} from '@xh/hoist/cmp/layout';
 import {DefaultHoistProps, hoistCmp, HSide, uses, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
+import {instanceManager} from '@xh/hoist/core/impl/InstanceManager';
 import {fmtDate, fmtDateTime, fmtJson, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {tooltip} from '@xh/hoist/kit/blueprint';
 import {isLocalDate} from '@xh/hoist/utils/datetime';
-import {errorIf, throwIf, withDefault} from '@xh/hoist/utils/js';
-import {getLayoutProps, getReactElementName} from '@xh/hoist/utils/react';
+import {errorIf, getTestId, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {getLayoutProps, getReactElementName, useOnMount, useOnUnmount} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isBoolean, isDate, isEmpty, isFinite, isNil, isUndefined, kebabCase} from 'lodash';
 import {Children, cloneElement, ReactElement, ReactNode, useContext, useState} from 'react';
 import './FormField.scss';
-import {PopoverPosition, PopperBoundary} from '@blueprintjs/core';
 
 export interface FormFieldProps extends BaseFormFieldProps {
     /**
@@ -162,10 +163,18 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         if (disabled) classes.push('xh-form-field-disabled');
         if (displayNotValid) classes.push('xh-form-field-invalid');
 
+        const testId = getFormFieldTestId(props, formContext, model.name);
+        useOnMount(() => instanceManager.registerModelWithTestId(testId, model));
+        useOnUnmount(() => instanceManager.unregisterModelWithTestId(testId));
+
         // generate actual element child to render
         let childEl: ReactElement =
             !child || readonly
-                ? readonlyChild({model, readonlyRenderer})
+                ? readonlyChild({
+                      model,
+                      readonlyRenderer,
+                      testId: getTestId(testId, 'readonly-display')
+                  })
                 : editableChild({
                       model,
                       child,
@@ -174,7 +183,8 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
                       disabled,
                       displayNotValid,
                       leftErrorIcon,
-                      commitOnChange
+                      commitOnChange,
+                      testId: getTestId(testId, 'input')
                   });
 
         if (minimal) {
@@ -195,6 +205,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
             key: model?.xhId,
             className: classNames(className, classes),
             ...getLayoutProps(props),
+            testId,
             items: [
                 labelEl({
                     omit: !label,
@@ -236,9 +247,13 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
 const readonlyChild = hoistCmp.factory({
     model: false,
 
-    render({model, readonlyRenderer}) {
+    render({model, readonlyRenderer, testId}) {
         const value = model ? model['value'] : null;
-        return div({className: 'xh-form-field-readonly-display', item: readonlyRenderer(value)});
+        return div({
+            className: 'xh-form-field-readonly-display',
+            [TEST_ID]: testId,
+            item: readonlyRenderer(value)
+        });
     }
 });
 
@@ -253,7 +268,8 @@ const editableChild = hoistCmp.factory<FieldModel>({
         disabled,
         displayNotValid,
         leftErrorIcon,
-        commitOnChange
+        commitOnChange,
+        testId
     }) {
         const {props} = child;
 
@@ -263,7 +279,8 @@ const editableChild = hoistCmp.factory<FieldModel>({
             bind: 'value',
             id: childId,
             disabled: props.disabled || disabled,
-            ref: composeRefs(model?.boundInputRef, child.ref)
+            ref: composeRefs(model?.boundInputRef, child.ref),
+            testId: props.testId ?? testId
         };
 
         // If a sizeable child input doesn't specify its own dimensions,
@@ -347,3 +364,10 @@ function defaultProp(
     const fieldDefault = formContext.fieldDefaults ? formContext.fieldDefaults[name] : null;
     return withDefault(props[name], fieldDefault, defaultVal);
 }
+function getFormFieldTestId(
+    props: Partial<FormFieldProps>,
+    formContext: FormContextType,
+    fieldName: string
+): string {
+    return props.testId ?? (formContext.testId ? `${formContext.testId}-${fieldName}` : undefined);
+}

package/desktop/cmp/grid/columns/Actions.ts

@@ -8,7 +8,7 @@ import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {RecordAction} from '@xh/hoist/data';
 import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
-import {throwIf} from '@xh/hoist/utils/js';
+import {getTestId, throwIf} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {isEmpty} from 'lodash';
 
@@ -64,6 +64,7 @@ export const actionCol: ColumnSpec = {
             if (hidden) return null;
 
             return button({
+                testId: getTestId(action.testId, `${record.id}`),
                 icon,
                 disabled,
                 tooltip,

package/desktop/cmp/grid/impl/colchooser/ColChooser.ts

@@ -43,7 +43,7 @@ export const colChooser = hoistCmp.factory<ColChooserProps>({
                     filler(),
                     button({
                         omit: !showRestoreDefaults,
-                        text: 'Restore Grid Defaults',
+                        text: 'Restore Defaults',
                         icon: Icon.undo({className: 'xh-red'}),
                         onClick: () => model.restoreDefaultsAsync()
                     }),
@@ -57,7 +57,8 @@ export const colChooser = hoistCmp.factory<ColChooserProps>({
                     button({
                         omit: commitOnChange,
                         text: 'Save',
-                        icon: Icon.check({className: 'xh-green'}),
+                        icon: Icon.check(),
+                        intent: 'success',
                         onClick: () => {
                             model.commit();
                             model.close();

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -8,12 +8,13 @@ import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {box, div, filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
-import {select, MENU_PORTAL_ID} from '@xh/hoist/desktop/cmp/input';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
+import {elemWithin, getTestId, TEST_ID} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {compact, isEmpty, sortBy} from 'lodash';
@@ -58,6 +59,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             popoverTitle = 'Group By',
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
+            testId,
             ...rest
         },
         ref
@@ -65,7 +67,10 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
         const {editorIsOpen, favoritesIsOpen, persistFavorites, value, allowEmpty} = model,
             isOpen = editorIsOpen || favoritesIsOpen,
             label = isEmpty(value) && allowEmpty ? emptyText : model.getValueLabel(value),
-            [layoutProps, buttonProps] = splitLayoutProps(rest);
+            [layoutProps, buttonProps] = splitLayoutProps(rest),
+            favoritesMenuTestId = getTestId(testId, 'favorites-menu'),
+            favoritesIconTestId = getTestId(testId, 'favorites-icon'),
+            editorTestId = getTestId(testId, 'editor');
 
         return box({
             ref,
@@ -91,21 +96,28 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         ),
                         minimal: styleButtonAsInput,
                         ...buttonProps,
-                        onClick: () => model.toggleEditor()
+                        onClick: () => model.toggleEditor(),
+                        testId
                     }),
-                    favoritesIcon()
+                    favoritesIcon({testId: favoritesIconTestId})
                 ),
                 content: favoritesIsOpen
-                    ? favoritesMenu()
+                    ? favoritesMenu({testId: favoritesMenuTestId})
                     : editorIsOpen
-                    ? editor({popoverWidth, popoverMinHeight, popoverTitle, emptyText})
+                    ? editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      })
                     : null,
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&
                         nextOpenState === false &&
                         e?.target &&
-                        !targetIsControlButtonOrPortal(e.target)
+                        !elemWithin(e.target, 'xh-grouping-chooser-button--with-favorites')
                     ) {
                         model.commitPendingValueAndClose();
                     }
@@ -119,7 +131,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
 // Editor
 //------------------
 const editor = hoistCmp.factory<GroupingChooserModel>({
-    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText}) {
+    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
         return panel({
             width: popoverWidth,
             minHeight: popoverMinHeight,
@@ -128,7 +140,8 @@ const editor = hoistCmp.factory<GroupingChooserModel>({
                 dimensionList({emptyText}),
                 addDimensionControl(),
                 filler()
-            ]
+            ],
+            testId
         });
     }
 });
@@ -292,32 +305,16 @@ function getDimOptions(dims, model) {
     return sortBy(ret, 'label');
 }
 
-function targetIsControlButtonOrPortal(target) {
-    const selectPortal = document.getElementById(MENU_PORTAL_ID)?.contains(target),
-        selectClick = targetWithin(target, 'xh-select__single-value'),
-        editorClick = targetWithin(target, 'xh-grouping-chooser-button--with-favorites');
-    return selectPortal || selectClick || editorClick;
-}
-
-/**
- * Determines whether any of the target's parents have a specific class name
- */
-function targetWithin(target, className): boolean {
-    for (let elem = target; elem; elem = elem.parentElement) {
-        if (elem.classList.contains(className)) return true;
-    }
-    return false;
-}
-
 //------------------
 // Favorites
 //------------------
 const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
-    render({model}) {
+    render({model, testId}) {
         if (!model.persistFavorites) return null;
         return div({
             item: Icon.favorite(),
             className: 'xh-grouping-chooser__favorite-icon',
+            [TEST_ID]: testId,
             onClick: e => {
                 model.toggleFavoritesMenu();
                 e.stopPropagation();
@@ -327,7 +324,7 @@ const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
 });
 
 const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
-    render({model}) {
+    render({model, testId}) {
         const options = model.favoritesOptions,
             isFavorite = model.isFavorite(model.value),
             omitAdd = isEmpty(model.value) || isFavorite,
@@ -349,7 +346,10 @@ const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
             })
         );
 
-        return vbox(div({className: 'xh-popup__title', item: 'Favorites'}), menu({items}));
+        return vbox({
+            testId,
+            items: [div({className: 'xh-popup__title', item: 'Favorites'}), menu({items})]
+        });
     }
 });
 

package/desktop/cmp/input/ButtonGroupInput.ts

@@ -10,7 +10,7 @@ import {Button, buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/butto
 import '@xh/hoist/desktop/register';
 import {throwIf, warnIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
-import {isEmpty, filter, without, castArray} from 'lodash';
+import {castArray, filter, isEmpty, without} from 'lodash';
 import {Children, cloneElement, isValidElement} from 'react';
 
 export interface ButtonGroupInputProps

package/desktop/cmp/input/Checkbox.ts

@@ -5,10 +5,10 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, StyleProps, HoistProps, HSide} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, HSide, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {checkbox as bpCheckbox} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
 import {ReactNode} from 'react';
 
@@ -73,8 +73,8 @@ const cmp = hoistCmp.factory<CheckboxInputModel>(({model, className, ...props},
         inline: withDefault(props.inline, true),
         label: props.label,
         tabIndex: props.tabIndex,
-
         id: props.id,
+        [TEST_ID]: props.testId,
         className,
         style: props.style,
 

package/desktop/cmp/input/CodeInput.ts

@@ -35,8 +35,8 @@ import 'codemirror/addon/selection/mark-selection.js';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/dracula.css';
 import {compact, defaultsDeep, isEqual, isFunction} from 'lodash';
-import {findDOMNode} from 'react-dom';
 import {ReactElement} from 'react';
+import {findDOMNode} from 'react-dom';
 import './CodeInput.scss';
 
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
@@ -455,6 +455,7 @@ const cmp = hoistCmp.factory<CodeInputModel>(({model, className, ...props}, ref)
         item: modalSupport({
             model: model.modalSupportModel,
             item: inputCmp({
+                testId: props.testId,
                 width: '100%',
                 height: '100%',
                 className,