@onehat/ui 0.3.272 → 0.3.274

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.272",
+	"version": "0.3.274",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Editor/Editor.js

@@ -18,7 +18,9 @@ function Editor(props) {
 			onEditMode,
 			verifyCanEdit,
 			_viewer = {},
-			_form = {},
+			_form = {
+				containerProps: {}
+			},
 
 			// withComponent
 			self,
@@ -46,7 +48,6 @@ function Editor(props) {
 			return null;
 		}
 		return <Viewer
-					{...testProps(self)}
 					{...propsToPass}
 					{..._viewer}
 					record={record}
@@ -59,7 +60,6 @@ function Editor(props) {
 	}
 
 	return <Form
-				{...testProps(self)}
 				{...propsToPass}
 				{..._form}
 				record={selection}

package/src/Components/Form/Field/Combo/Combo.js

@@ -58,6 +58,7 @@ export function ComboComponent(props) {
 			onGridSave, // to hook into when menu saves (ComboEditor only)
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			newEntityDisplayProperty,
+			testID,
 
 			// withComponent
 			self,
@@ -361,7 +362,7 @@ export function ComboComponent(props) {
 					menuRef.current === relatedTarget || 
 					menuRef.current?.contains(relatedTarget);
 		},
-		getFilterName = () => {
+		getFilterName = (isId) => {
 			// Only used for remote repositories
 			// Gets the filter name of the query, which becomes the condition sent to server 
 			let filterName = FILTER_NAME;
@@ -372,7 +373,10 @@ export function ComboComponent(props) {
 					displayFieldDef = schema.getPropertyDefinition(displayFieldName);
 	
 				// Verify displayField is a real field
-				if (!displayFieldDef.isVirtual) {
+				if (isId) {
+					const idFieldName = schema.model.idProperty;
+					filterName = idFieldName;
+				} else if (!displayFieldDef.isVirtual) {
 					filterName = displayFieldName + ' LIKE';
 				}
 			}
@@ -418,10 +422,13 @@ export function ComboComponent(props) {
 				}
 
 				// Set filter
-				const filterName = getFilterName();
+				const
+					idRegex = /^id:(.*)$/,
+					isId = _.isString(value) && !!value.match(idRegex),
+					filterName = getFilterName(isId);
 				if (Repository.isRemote) {
 					// remote
-					const filterValue = _.isEmpty(value) ? null : value + '%';
+					const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
 					await Repository.filter(filterName, filterValue);
 					if (!Repository.isAutoLoad) {
 						await Repository.reload();
@@ -958,7 +965,7 @@ export function ComboComponent(props) {
 	if (isRendered && additionalButtons?.length && containerWidth < 500) {
 		// be responsive for small screen sizes and bump additionalButtons to the next line
 		assembledComponents = 
-			<Column>
+			<Column testID={testID}>
 				<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
 					{xButton}
 					{eyeButton}
@@ -971,7 +978,7 @@ export function ComboComponent(props) {
 			</Column>;
 	} else {
 		assembledComponents = 
-			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
+			<Row testID={testID} {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}

package/src/Components/Form/Form.js

@@ -899,7 +899,7 @@ function Form(props) {
 									>Back</Button>}
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
 									<Button
-										{...testProps('viewBtn')}
+										{...testProps('toViewBtn')}
 										key="viewBtn"
 										onPress={onViewMode}
 										leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
@@ -968,7 +968,7 @@ function Form(props) {
 		}
 	}
 	
-	return <Column {...sizeProps} {...containerProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
+	return <Column {...testProps(self)} {...sizeProps} {...containerProps} onLayout={onLayoutDecorated} ref={formRef}>
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<Row

package/src/Components/Grid/Grid.js

@@ -506,6 +506,7 @@ function GridComponent(props) {
 									fields={fields}
 									rowProps={rowProps}
 									hideNavColumn={hideNavColumn}
+									isSelected={isSelected}
 									bg={bg}
 									item={item}
 									isInlineEditorShown={isInlineEditorShown}

package/src/Components/Grid/GridRow.js

@@ -24,6 +24,7 @@ function GridRow(props) {
 			fields,
 			rowProps,
 			hideNavColumn,
+			isSelected,
 			bg,
 			item,
 			isInlineEditorShown,
@@ -126,7 +127,7 @@ function GridRow(props) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
 									return <Element
-												{...testProps('fieldname-' + config.fieldName)}
+												{...testProps('cell-' + config.fieldName)}
 												value={value}
 												key={key}
 												overflow="hidden"
@@ -167,7 +168,7 @@ function GridRow(props) {
 						elementProps.textOverflow = 'ellipsis';
 					}
 					return <Text
-								{...testProps('fieldname-' + config.fieldName)}
+								{...testProps('cell-' + config.fieldName)}
 								key={key}
 								overflow="hidden"
 								alignSelf="center"
@@ -219,6 +220,7 @@ function GridRow(props) {
 		}
 
 		return <Row
+					{...testProps('row' + (isSelected ? '-selected' : ''))}
 					alignItems="center"
 					flexGrow={1}
 					{...rowProps}

package/src/Components/Hoc/withAlert.js

@@ -124,6 +124,7 @@ export default function withAlert(WrappedComponent) {
 		let buttons = [];
 		if (includeCancel) {
 			buttons.push(<Button
+								{...testProps('cancelBtn')}
 								key="cancelBtn"
 								onPress={onCancel}
 								color="#fff"
@@ -136,6 +137,7 @@ export default function withAlert(WrappedComponent) {
 			case ALERT_MODE_OK:
 			case ALERT_MODE_INFO:
 				buttons.push(<Button
+								{...testProps('okBtn')}
 								key="okBtn"
 								ref={autoFocusRef}
 								onPress={onOk}
@@ -144,6 +146,7 @@ export default function withAlert(WrappedComponent) {
 				break;
 			case ALERT_MODE_YES:
 				buttons.push(<Button
+								{...testProps('yesBtn')}
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
@@ -154,6 +157,7 @@ export default function withAlert(WrappedComponent) {
 			case ALERT_MODE_YES_NO:
 				// TODO: need to create a new colorScheme so this can be black with blank background
 				buttons.push(<Button
+								{...testProps('noBtn')}
 								key="noBtn"
 								onPress={onNo}
 								color="trueGray.800"
@@ -162,6 +166,7 @@ export default function withAlert(WrappedComponent) {
 								mr={2}
 							>No</Button>);
 				buttons.push(<Button
+								{...testProps('yesBtn')}
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
@@ -191,11 +196,13 @@ export default function withAlert(WrappedComponent) {
 						isOpen={isAlertShown}
 						onClose={() => setIsAlertShown(false)}
 					>
-						<AlertDialog.Content>
+						<AlertDialog.Content
+							{...testProps('AlertDialog')}
+						>
 							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
-								<Row alignItems="center" {...testProps('AlertDialog')}>
+								<Row alignItems="center">
 									<Column w="40px" p={0} mr={5}>
 										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
 									</Column>

package/src/Components/Viewer/Viewer.js

@@ -249,14 +249,14 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
-	return <Column flex={flex} {...props} onLayout={onLayout}>
+	return <Column flex={flex} {...testProps(self)} {...props} onLayout={onLayout}>
 				{containerWidth && <>
 
 					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
 						{canEdit && onEditMode &&
 							<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								<Button
-									{...testProps('editBtn')}
+									{...testProps('toEditBtn')}
 									key="editBtn"
 									onPress={onEditMode}
 									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	

package/src/Functions/testProps.js

@@ -7,11 +7,15 @@ export default function testProps(id) {
 	if (typeof __DEV__ === 'undefined' || !__DEV__) {
 		return {}; // don't add test props in production
 	}
-	if (id?.reference) {
-		// id is actually 'self' object
+	if (id?.path) { // id is actually 'self' object
+		id = id.path;
+	} else if (id?.reference) { // id is actually 'self' object
 		id = id.reference;
 	}
-	if (id?.match(/\s/g)) {
+	if (!id) {
+		return {};
+	}
+	if (id.match(/\s/g)) {
 		id = id.replace(/\s/g, '_'); // convert any spaces to underscores
 	}
 	if (!window && Platform.OS === 'android') {