@onehat/ui 0.4.24 → 0.4.26

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -1,5 +1,6 @@
 import {
 	EDITOR_MODE__VIEW,
+	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import withComponent from '../Hoc/withComponent.js';
 import withPdfButtons from '../Hoc/withPdfButtons.js';
@@ -34,7 +35,10 @@ function Editor(props) {
 		return null; // hide the editor when no selection
 	}
 
-	const propsToPass = _.omit(props, ['self', 'reference', 'parent']);
+	const propsToPass = _.omit(props, ['self', 'reference', 'parent', 'style']);
+	if (propsToPass.editorType === EDITOR_TYPE__SIDE) {
+		propsToPass.style = props.style; // side editor needs the style prop, but a windowed editor can get messed up if it's present (and withModal is used)!
+	}
 
 	let canEdit = true;
 	if (canRecordBeEdited && !canRecordBeEdited(selection)) {

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

@@ -180,7 +180,7 @@ export function ComboComponent(props) {
 					displayValue = _.each(value, (id) => {
 						const entity = Repository.getById(id);
 						if (entity) {
-							displayValue.push(entity.displayValue)
+							displayValue.push(entity.displayValue);
 						}
 					});
 				} else {
@@ -202,6 +202,9 @@ export function ComboComponent(props) {
 							await Repository.waitUntilDoneLoading();
 						}
 						entity = Repository.getById(value);
+						if (!entity) {
+							entity = await Repository.getSingleEntityFromServer(value);
+						}
 					}
 					displayValue = entity?.displayValue || '';
 				} else {
@@ -243,10 +246,12 @@ export function ComboComponent(props) {
 					}
 
 					let id = null;
-					if (gridSelection.length && gridSelection[0].id) {
-						id = gridSelection[0].id;
+					if (gridSelection.length) {
+						id = Repository ? gridSelection[0].id : gridSelection[0][idIx];
+					}
+					if (id !== value) {
+						setValue(id);
 					}
-					setValue(id);
 					hideMenu();
 					break;
 				case 'ArrowDown':
@@ -449,7 +454,7 @@ export function ComboComponent(props) {
 				}
 			} else {
 				// Search through data
-				const regex = new RegExp('^' + value);
+				const regex = new RegExp('^' + value, 'i'); // case-insensitive
 				found = _.filter(data, (item) => {
 					if (_.isString(item[displayIx]) && _.isString(value)) {
 						return item[displayIx].match(regex);

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

@@ -77,7 +77,6 @@ function TagComponent(props) {
 			showModal({
 				body: <Editor
 							editorType={EDITOR_TYPE__WINDOWED}
-							{...propsToPass}
 							parent={self}
 							reference="viewer"
 							isEditorViewOnly={true}
@@ -234,6 +233,7 @@ function TagComponent(props) {
 						onView={() => onView(val)}
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						showEye={showEye}
+						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
@@ -297,7 +297,7 @@ function TagComponent(props) {
 			valueBoxesClassName += ' min-h-[25px] h-full overflow-auto flex-1';
 		} else {
 			// shrink both down
-			valueBoxesClassName += ' h-auto min-h-[25px] max-h-[25px] overflow-auto flex-1';
+			valueBoxesClassName += ' Scott h-auto min-h-[25px] max-h-[35px] overflow-auto flex-1';
 			comboClassName += ' h-auto min-h-0 max-h-[25px] flex-1';
 		}
 	}

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -15,6 +15,7 @@ export default function ValueBox(props) {
 			onView,
 			onDelete,
 			showEye,
+			minimizeForRow = false,
 		} = props,
 		styles = UiGlobals.styles;
 	return <HStackNative
@@ -31,20 +32,22 @@ export default function ValueBox(props) {
 					${!onDelete && 'pr-4'}
 				`}
 			>
-				{showEye && <IconButton
-								{...testProps('eyeBtn')}
-								icon={Eye}
-								_icon={{
-									size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
-									className: 'text-grey-600',
-								}}
-								onPress={onView}
-								className={`
-									ValueBox-eyeBtn
-									h-full
-									${styles.FORM_TAG_BTN_CLASSNAME}
-								`}
-							/>}
+				{showEye &&
+					<IconButton
+						{...testProps('eyeBtn')}
+						icon={Eye}
+						_icon={{
+							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+							className: 'text-grey-600',
+						}}
+						onPress={onView}
+						className={`
+							ValueBox-eyeBtn
+							h-full
+							${minimizeForRow ? 'py-0' : ''}
+							${styles.FORM_TAG_BTN_CLASSNAME}
+						`}
+					/>}
 				<Text
 					className={`
 						ValueBox-Text
@@ -52,6 +55,7 @@ export default function ValueBox(props) {
 						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
 						${showEye ? 'ml-0' : 'ml-1'}
 						${onDelete ? 'mr-0' : 'mr-1'}
+						${minimizeForRow ? 'py-0' : ''}
 					`}
 				>{text}</Text>
 				{onDelete &&
@@ -66,6 +70,7 @@ export default function ValueBox(props) {
 						className={`
 							ValueBox-xBtn
 							h-full
+							${minimizeForRow ? 'py-0' : ''}
 							${styles.FORM_TAG_BTN_CLASSNAME}
 						`}
 					/>}

package/src/Components/Grid/Grid.js

@@ -153,6 +153,7 @@ function GridComponent(props) {
 			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
+			getRowTestId,
 			
 			// The selectorSelected mechanism allows us to filter results of the primary model, (e.g. WorkOrders)
 			//   by the selection on the secondary model (e.g. Equipment). It's used on Grids, Trees, Forms, etc.
@@ -390,7 +391,7 @@ function GridComponent(props) {
 
 			let rowComponent =
 				<Pressable
-					{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id)}
+					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
@@ -597,6 +598,7 @@ function GridComponent(props) {
 										`}
 									>
 										<ExpandButton
+											{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-expandBtn-' + item?.id)}
 											isExpanded={isExpanded}
 											onToggle={() => setIsExpanded(index, !isExpanded)}
 											_icon={{
@@ -1272,7 +1274,8 @@ function GridComponent(props) {
 			</VStackNative>
 
 	if (isDropTarget) {
-		grid = <Box
+		grid = <VStackNative
+					{...testProps(self, '-dropTarget')}
 					ref={dropTargetRef}
 					className={`
 						Grid-dropTarget
@@ -1281,7 +1284,7 @@ function GridComponent(props) {
 						border-[#0ff]
 						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}
 					`}
-				>{grid}</Box>
+				>{grid}</VStackNative>
 	}
 	return grid;
 }

package/src/Components/Messages/ErrorMessage.js

@@ -1,11 +1,14 @@
 import {
 	Box,
-	ButtonText,
+	HStack,
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
-import Button from '../Buttons/Button';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import Button from '../Buttons/Button.js';
+import Panel from '../Panel/Panel.js';
+import Footer from '../Layout/Footer.js';
 import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
@@ -14,33 +17,75 @@ export default function ErrorMessage(props) {
 			text = 'Error',
 			color = 'red-500',
 			onOk,
-		} = props;
+		} = props,
+		[width, height] = useAdjustedWindowSize(500, 250);
 
 	return <Modal isOpen={true} {...props} {...testProps('ErrorMessage')}>
 				<ModalBackdrop />
-				<ModalContent>
-					<ModalHeader>Alert</ModalHeader>
-					<ModalBody
-						className={`
-							flex-row
-							align-center
+
+				<Panel
+					title="Alert"
+					isCollapsible={false}
+					className="bg-white overflow-auto"
+					h={height}
+					w={width}
+					isWindow={true}
+					disableAutoFlex={true}
+					onClose={onOk}
+					footer={<Footer
+								className={`
+									justify-end
+									py-2
+									px-4
+									bg-grey-100
+								`}
+							>
+								<Button
+									{...testProps('okBtn')}
+									key="okBtn"
+									onPress={onOk}
+									text="OK"
+									className="text-white"
+								/>
+							</Footer>}
+				>
+					<HStack className="ErrorMessage-HStack flex-1 w-full p-4">
+						<Box className={`
+							ErrorMessage-Box1
+							h-full
+							w-[100px]
+							flex
+							items-center
+							justify-center 
+							pr-3
+						`}>
+							<Icon as={TriangleExclamation} className={`
+								ErrorMessage-Icon
+								h-[40px]
+								w-[40px]
+								text-${color}
+							`} />
+						</Box>
+						<Box className={`
+							ErrorMessage-Box2
+							h-full
+							flex
+							flex-1
+							items-start
 							justify-center
-							p-3
-							bg-white
-							border-t-0
-							rounded-md
-						`}
-					>
-						<Box className="w-[50px] mx-1">
-							<Icon as={TriangleExclamation} size="10" className="text-red-500" />
+							overflow-hidden
+						`}>
+							<Text className={`
+								ErrorMessage-Text
+								text-${color}
+								text-[18px]
+								break-words
+								whitespace-normal
+								w-full
+								overflow-auto
+							`}>{text}</Text>
 						</Box>
-						<Text className={` text-${color} flex-1 text-[18px] `}>{text}</Text>
-					</ModalBody>
-					<ModalFooter className="py-2 pr-4">
-						<Button onPress={onOk} className="text-primary-800">
-							<ButtonText>OK</ButtonText>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
+					</HStack>
+				</Panel>
 			</Modal>;
 }

package/src/Components/Toolbar/PaginationToolbar.js

@@ -47,8 +47,9 @@ export default function PaginationToolbar(props) {
 					minimize={minimize}
 					disablePageSize={disablePageSize}
 				/>
-				{toolbarItems.length &&
+				{toolbarItems.length ?
 					<HStack className={`
+						PaginationToolbar-HStack
 						flex-1
 						space-x-1
 						border-l
@@ -56,6 +57,6 @@ export default function PaginationToolbar(props) {
 						ml-3
 						pl-3
 					`}
-					>{toolbarItems}</HStack>}
+					>{toolbarItems}</HStack> : null}
 			</Toolbar>;
 };

package/src/Functions/Cypress/button_functions.js

@@ -85,11 +85,11 @@ export function clickToViewButtonIfExists(parentSelectors) {
 }
 export function toFullMode(parentSelectors) {
 	cy.log('toFullMode');
-	return clickButton(parentSelectors, 'fullModeBtn');
+	return clickButtonIfEnabled(parentSelectors, 'fullModeBtn');
 }
 export function toSideMode(parentSelectors) {
 	cy.log('toSideMode');
-	return clickButton(parentSelectors, 'sideModeBtn');
+	return clickButtonIfEnabled(parentSelectors, 'sideModeBtn');
 }
 export function clickButton(parentSelectors, name) { // requires the button to be enabled
 	if (_.isString(parentSelectors)) {

package/src/Functions/Cypress/crud_functions.js

@@ -1,6 +1,7 @@
 import {
 	fixInflector,
 	getLastPartOfPath,
+	bootstrapRouteWaiters,
 } from './utilities.js';
 import {
 	login,
@@ -208,9 +209,6 @@ export function addGridRecord(gridSelector, fieldValues, schema, ancillaryData,
 		formSelector = editorSelector + '/form',
 		isRemotePhantomMode = schema.repository.isRemotePhantomMode;
 
-	if (isRemotePhantomMode) {
-		cy.intercept('POST', '**/add**').as('addWaiter');
-	}
 	clickAddButton(gridSelector);
 	if (isRemotePhantomMode) {
 		cy.wait('@addWaiter');
@@ -225,7 +223,6 @@ export function addGridRecord(gridSelector, fieldValues, schema, ancillaryData,
 	if (isRemotePhantomMode) {
 		method = 'edit';
 	}
-	cy.intercept('POST', '**/' + method + '**').as(method + 'Waiter');
 	clickSaveButton(formSelector); // it's labeled 'Add' in the form, but is really the save button
 	cy.wait('@' + method + 'Waiter');
 
@@ -278,7 +275,7 @@ export function addInlineGridRecord(gridSelector, fieldValues, schema, ancillary
 
 	cy.log('addInlineGridRecord ' + gridSelector);
 
-	addGridRecord(gridSelector, fieldValues, schema, ancillaryData, level);
+	addGridRecord(gridSelector, fieldValues, schema, [], level); // NOTE: ancillaryData is not passed to addGridRecord because can't edit ancillary data in an inline editor
 
 	cy.log('addWindowedGridRecord: close window ' + gridSelector);
 	const formSelector = gridSelector + '/editor/form';
@@ -310,10 +307,7 @@ export function editGridRecord(gridSelector, fieldValues, schema, id, level = 0,
 	fillForm(formSelector, fieldValues, schema, level +1);
 	cy.wait(500); // allow validator to enable save button
 	// TODO: Change this to wait until save button is enabled
-	const existingEditWaiter = Cypress.state('aliases')['editWaiter'];
-	if (!existingEditWaiter) {
-		cy.intercept('POST', '**/edit**').as('editWaiter');
-	}
+	
 	clickSaveButton(formSelector);
 	cy.wait('@editWaiter');
 
@@ -353,7 +347,6 @@ export function deleteGridRecord(gridSelector, id) {
 	cy.wait(500); // allow confirmation box to appear
 	
 	// Click OK on confirmation box
-	cy.intercept('POST', '**/delete**').as('deleteWaiter');
 	clickYesButton('ConfirmModal');
 	cy.wait('@deleteWaiter');
 
@@ -472,7 +465,6 @@ export function addTreeRecord(treeSelector, fieldValues, schema, ancillaryData,
 	if (schema.repository.isRemotePhantomMode) {
 		method = 'edit';
 	}
-	cy.intercept('POST', '**/' + method + '**').as(method + 'Waiter');
 	clickSaveButton(formSelector); // it's labeled 'Add' in the form, but is really the save button
 	cy.wait('@' + method + 'Waiter');
 
@@ -545,10 +537,6 @@ export function editTreeRecord(treeSelector, fieldValues, schema, id, level = 0,
 	cy.wait(500); // allow validator to enable save button
 	// TODO: Change this to wait until save button is enabled
 
-	const existingEditWaiter = Cypress.state('aliases')['editWaiter'];
-	if (!existingEditWaiter) {
-		cy.intercept('POST', '**/edit**').as('editWaiter');
-	}
 	clickSaveButton(formSelector);
 	cy.wait('@editWaiter');
 
@@ -577,7 +565,6 @@ export function deleteTreeRecord(treeSelector, id) {
 	cy.wait(500); // allow confirmation box to appear
 	
 	// Click OK on confirmation box
-	cy.intercept('POST', '**/delete**').as('deleteWaiter');
 	clickYesButton('ConfirmModal');
 	cy.wait('@deleteWaiter');
 
@@ -596,6 +583,7 @@ export function runClosureTreeControlledManagerScreenCrudTests(model, schema, ne
 	describe(Models + 'Manager', () => {
 
 		beforeEach(function () {
+			bootstrapRouteWaiters();
 			login();
 			cy.restoreLocalStorage();
 			cy.url().then((currentUrl) => {
@@ -692,6 +680,7 @@ export function runClosureTreeManagerScreenCrudTests(args) {
 	describe(Models + 'Manager', () => {
 
 		beforeEach(function () {
+			bootstrapRouteWaiters();
 			login();
 			cy.restoreLocalStorage();
 			cy.url().then((currentUrl) => {
@@ -756,6 +745,7 @@ export function runManagerScreenCrudTests(args) {
 	describe(Models + 'Manager', () => {
 
 		beforeEach(function () {
+			bootstrapRouteWaiters();
 			login();
 			cy.restoreLocalStorage();
 			cy.url().then((currentUrl) => {
@@ -814,6 +804,7 @@ export function runReportsManagerTests(reportData) {
 	describe('ReportsManager', () => {
 
 		beforeEach(function () {
+			bootstrapRouteWaiters();
 			login();
 			cy.url().then((currentUrl) => {
 				if (!currentUrl.endsWith(url)) {
@@ -836,7 +827,6 @@ export function runReportsManagerTests(reportData) {
 
 
 				// Press Excel button
-				cy.intercept('GET', '**/getReport**').as('getWaiter');
 				clickButton(selector, 'excelBtn');
 				cy.wait('@getWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
@@ -844,7 +834,6 @@ export function runReportsManagerTests(reportData) {
 
 
 				// Press PDF button
-				cy.intercept('POST', '**/getReport**').as('getReportWaiter');
 				clickButton(selector, 'pdfBtn');
 				cy.wait('@getReportWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('pdf');

package/src/Functions/Cypress/dom_functions.js

@@ -37,6 +37,12 @@ export function getTestIdSelectors(selectors, isGetFirst = false) {
 		if (selector.match(/=/)) { // selector is something like [role="switch"], so don't use data-testid
 			return selector;
 		}
+		if (selector.match(/^\./)) { // selector is something like .my-class, so don't use data-testid
+			return selector;
+		}
+		if (selector.match(/^#/)) { // selector is something like #my-id, so don't use data-testid
+			return selector;
+		}
 		return '[data-testid="' + selector + '"]' + (isGetFirst ? ':first' : '');
 	});
 	return selectorParts.join(' ');

package/src/Functions/Cypress/form_functions.js

@@ -139,11 +139,6 @@ export function setComboValue(selectors, value) {
 		// cy.get(field).clear({ force: true });
 		clickXButtonIfEnabled(selectors); // clear current value
 		if (value) {
-			const existingGetWaiter = Cypress.state('aliases')['getWaiter'];
-			if (!existingGetWaiter) {
-				cy.intercept('GET', '**/get**').as('getWaiter'); // set up waiter
-			}
-
 			cy.get(field)
 				.type(value, { delay: 40, force: true }) // slow it down a bit, so React has time to re-render
 				.wait('@getWaiter'); // allow dropdown to load
@@ -186,10 +181,6 @@ export function setTagValue(selectors, value) {
 		if (!_.isEmpty(values)) {
 			_.each(values, (value) => {
 				const id = value.id;
-				const existingGetWaiter = Cypress.state('aliases')['getWaiter'];
-				if (!existingGetWaiter) {
-					cy.intercept('GET', '**/get**').as('getWaiter'); // set up waiter
-				}
 				cy.get(field)
 					.type('id:' + id, { delay: 40, force: true }) // slow it down a bit, so React has time to re-render
 					.wait('@getWaiter'); // allow dropdown to load

package/src/Functions/Cypress/utilities.js

@@ -6,7 +6,14 @@ import moment from 'moment';
 // / /_/ / /_/ / / / /_/ /  __(__  )
 // \____/\__/_/_/_/\__/_/\___/____/
 
-
+export function bootstrapRouteWaiters() {
+	cy.log('bootstrapRouteWaiters');
+	cy.intercept('GET', '**/get**').as('getWaiter');
+	cy.intercept('POST', '**/add**').as('addWaiter');
+	cy.intercept('POST', '**/edit**').as('editWaiter');
+	cy.intercept('POST', '**/delete**').as('deleteWaiter');
+	cy.intercept('POST', '**/getReport**').as('getReportWaiter');
+}
 export function fixInflector(str) {
 	// inflector-js doesn't handle pluralization of 'equipment' correctly
 	str = str.replace(/quipments/, 'quipment');

package/src/Functions/testProps.js

@@ -4,7 +4,7 @@ import UiGlobals from '../UiGlobals.js';
 // This adds a data-testid attribute to the DOM node,
 // which can be quried in Cypress by: document.querySelector(`[data-testid='MyTestId']`);
 
-export default function testProps(id) {
+export default function testProps(id, suffix) {
 	if (!UiGlobals.debugMode) {
 		return {};
 	}
@@ -19,6 +19,9 @@ export default function testProps(id) {
 	if (id.match(/\s/g)) {
 		id = id.replace(/\s/g, '_'); // convert any spaces to underscores
 	}
+	if (suffix) {
+		id += suffix; // this is used in conjunction with 'self' object
+	}
 	if (!window && Platform.OS === 'android') {
 		return {
 			accessibilityLabel: id,

package/src/Styles/Global.css

@@ -1,6 +1,6 @@
 html, body {
-	-webkit-user-select: none;
-	user-select: none;
+	/* -webkit-user-select: none;
+	user-select: none; */
 }
 
 /* to fix the inline editor */

package/src/Components/Window/Editor.js

@@ -1,14 +0,0 @@
-import Container from '../Container/Container.js';
-import emptyFn from '../../Functions/emptyFn.js';
-import _ from 'lodash';
-
-export default function EditorWindow(props) {
-	const {
-			title,
-			isOpen = false,
-			onClose = emptyFn,
-			...propsToPass
-		} = props;
-	
-	
-}