@xh/hoist 59.2.0 → 59.3.1

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,