@onehat/ui 0.4.32 → 0.4.34

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -15,7 +15,7 @@ function Editor(props) {
 			onEditorSave: onSave,
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
-			editorMode,
+			getEditorMode,
 			onEditMode,
 			canRecordBeEdited,
 			_viewer = {},
@@ -46,7 +46,7 @@ function Editor(props) {
 	}
 	
 	// Repository?.isRemotePhantomMode && selection.length === 1 && 
-	if (editorMode === EDITOR_MODE__VIEW || isEditorViewOnly || !canEdit) {
+	if (getEditorMode() === EDITOR_MODE__VIEW || isEditorViewOnly || !canEdit) {
 		const record = selection[0];
 		if (record.isDestroyed) {
 			return null;

package/src/Components/Form/FieldSet.js

@@ -81,6 +81,8 @@ export default function FieldSet(props) {
 		mb-4
 		mx-0
 		p-1
+		pb-2
+		gap-2
 		border
 		border-grey-400
 		${styles.FORM_FIELDSET_BG}

package/src/Components/Form/Form.js

@@ -114,7 +114,7 @@ function Form(props) {
 			// withEditor
 			isEditorViewOnly = false,
 			isSaving = false,
-			editorMode,
+			getEditorMode,
 			onCancel,
 			onSave,
 			onClose,
@@ -782,7 +782,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-VStack4 flex-1 pt-1">
+							element = <VStack className="Form-VStack4 flex-1">
 											{element}
 											{message}
 										</VStack>;
@@ -790,7 +790,7 @@ function Form(props) {
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="Form-HStack5 flex-1 flex-wrap">
+									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center">
 													{element}
 													{buttons}
 												</HStack>;
@@ -883,7 +883,6 @@ function Form(props) {
 											min-h-[50px]
 											w-full
 											flex-none
-											pb-2
 											${error ? 'bg-[#fdd]' : ''}
 										`}
 									>
@@ -1116,7 +1115,7 @@ function Form(props) {
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);
 
 			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
-				isSingle && editorMode === EDITOR_MODE__EDIT && 
+				isSingle && getEditorMode() === EDITOR_MODE__EDIT && 
 				(onBack || (onViewMode && !disableView))) {
 				modeHeader = <Toolbar>
 								<HStack className="flex-1 items-center">
@@ -1152,7 +1151,7 @@ function Form(props) {
 									/>}
 							</Toolbar>;
 			}
-			if (editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
+			if (getEditorMode() === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
 				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap">
 									{additionalButtons}
 								</Toolbar>)
@@ -1169,7 +1168,7 @@ function Form(props) {
 		if (_.isEmpty(formState.dirtyFields) && !isPhantom) {
 			isSaveDisabled = true;
 		}
-		if (onDelete && editorMode === EDITOR_MODE__EDIT && isSingle) {
+		if (onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle) {
 			showDeleteBtn = true;
 		}
 		if (!isEditorViewOnly && !hideResetButton) {
@@ -1207,7 +1206,7 @@ function Form(props) {
 		}
 		footerButtons =
 			<>
-				{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+				{onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle &&
 
 					<HStack className="flex-1 justify-start">
 						<Button
@@ -1259,7 +1258,7 @@ function Form(props) {
 						onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 						isDisabled={isSaveDisabled}
 						className="text-white"
-						text={editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}
+						text={getEditorMode() === EDITOR_MODE__ADD ? 'Add' : 'Save'}
 					/>}
 				
 				{showSubmitBtn && 

package/src/Components/Hoc/withEditor.js

@@ -24,7 +24,6 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
-		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
@@ -69,6 +68,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// withSelection
 				selection,
+				getSelection,
 				setSelection,
 
 				// withAlert
@@ -79,13 +79,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			newEntityDisplayValueRef = useRef(),
+			editorModeRef = useRef(EDITOR_MODE__VIEW),
+			isIgnoreNextSelectionChangeRef = useRef(false),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
 			[isEditorShown, setIsEditorShownRaw] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(canEditorViewOnly), // current state of whether editor is in view-only mode
-			[isIgnoreNextSelectionChange, setIsIgnoreNextSelectionChange] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
+			setIsIgnoreNextSelectionChange = (bool) => {
+				isIgnoreNextSelectionChangeRef.current = bool;
+			},
+			getIsIgnoreNextSelectionChange = () => {
+				return isIgnoreNextSelectionChangeRef.current;
+			},
 			setIsEditorShown = (bool) => {
 				setIsEditorShownRaw(bool);
 				if (!bool && onEditorClose) {
@@ -96,8 +103,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				function doIt() {
 					setSelection(newSelection);
 				}
-				const formState = editorStateRef.current;
-				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && editorMode === EDITOR_MODE__EDIT) {
+				const
+					formState = editorStateRef.current,
+					selection = getSelection();
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && getEditorMode() === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
 				} else if (selection && selection[0] && !selection[0].isDestroyed && (selection[0]?.isPhantom || selection[0]?.isRemotePhantom)) {
 					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
@@ -115,6 +124,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				listeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
 			},
+			getEditorMode = () => {
+				return editorModeRef.current;
+			},
+			setEditorMode = (mode) => {
+				editorModeRef.current = mode;
+			},
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
@@ -124,6 +139,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
+				const selection = getSelection();
 				let addValues = values;
 
 				if (Repository?.isLoading) {
@@ -221,6 +237,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT);
 					return;
 				}
+				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -243,6 +260,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (_.isFunction(args)) {
 					cb = args;
 				}
+				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -301,6 +319,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE);
 					return;
 				}
+				const selection = getSelection();
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(selection);
 					if (listenerResult === false) {
@@ -341,6 +360,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for view
 
+				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
@@ -363,7 +383,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for duplicate
 
-
+				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
@@ -384,6 +404,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			},
 			onRemoteDuplicate = async () => {
 				const
+					selection = getSelection(),
 					entity = selection[0],
 					duplicateEntity = await Repository.remoteDuplicate(entity);
 
@@ -392,14 +413,16 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				doEdit();
 			},
 			doEditorSave = async (data, e) => {
-				let mode = editorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				let mode = getEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
 				if (canUser && !canUser(mode)) {
 					showPermissionsError(mode);
 					return;
 				}
 
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
-				const isSingle = selection.length === 1;
+				const
+					selection = getSelection(),
+					isSingle = selection.length === 1;
 				let useStaged = false;
 				if (isSingle) {
 					// just update this one entity
@@ -446,7 +469,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (onChange) {
 						onChange(selection);
 					}
-					if (editorMode === EDITOR_MODE__ADD) {
+					if (getEditorMode() === EDITOR_MODE__ADD) {
 						if (onAdd) {
 							await onAdd(selection);
 						}
@@ -459,7 +482,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						} else {
 							setEditorMode(EDITOR_MODE__VIEW);
 						}
-					} else if (editorMode === EDITOR_MODE__EDIT) {
+					} else if (getEditorMode() === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(selection);
 						}
@@ -475,6 +498,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			doEditorCancel =  () => {
 				async function doIt() {
 					const
+						selection = getSelection(),
 						isSingle = selection.length === 1,
 						isPhantom = selection[0] && !selection[0]?.isDestroyed && selection[0].isPhantom;
 					if (isSingle && isPhantom) {
@@ -513,9 +537,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setIsEditorShown(false);
 				});
 			},
-			calculateEditorMode = (isIgnoreNextSelectionChange = false) => {
+			calculateEditorMode = () => {
 
-				let doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
+				let isIgnoreNextSelectionChange = getIsIgnoreNextSelectionChange(),
+					doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
 				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
 					// allow global override to for this property
 					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
@@ -525,13 +550,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				// calculateEditorMode gets called only on selection changes
+				const selection = getSelection();
 				let mode;
 				if (editorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
 					// special case: side editor is always edit mode
 					mode = EDITOR_MODE__EDIT;
 				} else {
 					if (isIgnoreNextSelectionChange) {
-						mode = editorMode;
+						mode = getEditorMode();
 						if (!canEditorViewOnly && userCanEdit) {
 							if (selection.length > 1) {
 								if (!disableEdit) {
@@ -577,7 +603,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			setEditorMode(calculateEditorMode(isIgnoreNextSelectionChange));
+			setEditorMode(calculateEditorMode());
 
 			setIsIgnoreNextSelectionChange(false);
 			setLastSelection(selection);
@@ -598,7 +624,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			// NOTE: If I don't calculate this on the fly for selection changes,
 			// we see a flash of the previous state, since useEffect hasn't yet run.
 			// (basically redo what's in the useEffect, above)
-			editorMode = calculateEditorMode(isIgnoreNextSelectionChange);
+			setEditorMode(calculateEditorMode());
 		}
 
 		return <WrappedComponent
@@ -611,11 +637,13 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditorViewOnly={isEditorViewOnly}
 					isAdding={isAdding}
 					isSaving={isSaving}
-					editorMode={editorMode}
+					editorMode={getEditorMode()}
+					getEditorMode={getEditorMode}
 					onEditMode={setEditMode}
 					onViewMode={setViewMode}
 					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
+					setIsIgnoreNextSelectionChange={setIsIgnoreNextSelectionChange}
 					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : doEdit}
 					onDelete={(!userCanEdit || disableDelete) ? null : doDelete}

package/src/Components/Hoc/withPdfButtons.js

@@ -11,6 +11,7 @@ import Form from '../Form/Form.js';
 import Pdf from '../Icons/Pdf.js';
 import UiGlobals from '../../UiGlobals.js';
 import inArray from '../../Functions/inArray.js';
+import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 export default function withPdfButtons(WrappedComponent) {
@@ -206,6 +207,8 @@ export default function withPdfButtons(WrappedComponent) {
 					h: 800,
 					w: styles.FORM_STACK_ROW_THRESHOLD + 10,
 					body: <Form
+								parent={self}
+								reference="chooseFieldsForm"
 								editorType={EDITOR_TYPE__PLAIN}
 								alert={alert}
 								columnDefaults={{
@@ -244,6 +247,8 @@ export default function withPdfButtons(WrappedComponent) {
 					w: 510, // 510 so it's over the stack threshold
 					h: 500,
 					body: <Form
+								parent={self}
+								reference="chooseEmailAddressForm"
 								submitBtnLabel='Email PDF'
 								onSubmit={(values)=> {
 									hideModal();

package/src/Components/Hoc/withSelection.js

@@ -48,14 +48,14 @@ export default function withSelection(WrappedComponent) {
 			usesWithValue = !!setValue,
 			initialSelection = selection || defaultSelection || [],
 			forceUpdate = useForceUpdate(),
-			localSelection = useRef(initialSelection),
+			selectionRef = useRef(initialSelection),
 			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
 			setSelection = (selection) => {
-				if (_.isEqual(selection, localSelection.current)) {
+				if (_.isEqual(selection, getSelection())) {
 					return;
 				}
 
-				localSelection.current = selection;
+				selectionRef.current = selection;
 				if (onChangeSelection) {
 					onChangeSelection(selection);
 				}
@@ -64,6 +64,9 @@ export default function withSelection(WrappedComponent) {
 				}
 				forceUpdate();
 			},
+			getSelection = () => {
+				return selectionRef.current;
+			}
 			selectPrev = () => {
 				selectDirection(SELECT_UP);
 			},
@@ -103,16 +106,16 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			addToSelection = (item) => {
-				const newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				setSelection(newSelection);
 			},
 			removeFromSelection = (item) => {
 				let newSelection = [];
 				if (Repository) {
-					newSelection = _.remove(localSelection.current, (sel) => sel !== item);
+					newSelection = _.remove(getSelection(), (sel) => sel !== item);
 				} else {
-					newSelection = _.remove(localSelection.current, (sel) => sel[idIx] !== item[idIx]);
+					newSelection = _.remove(getSelection(), (sel) => sel[idIx] !== item[idIx]);
 				}
 				setSelection(newSelection);
 			},
@@ -126,7 +129,7 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(localSelection.current, (item) => item.id);
+					ids = _.map(getSelection(), (item) => item.id);
 				_.each(ids, (id) => {
 					const found = Repository.getById(id);
 					if (found) {
@@ -160,9 +163,9 @@ export default function withSelection(WrappedComponent) {
 			selectRangeTo = (item) => {
 				// Select above max or below min to this one
 				const
-					currentSelectionLength = localSelection.current.length,
+					currentSelectionLength = getSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
+				let newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();
@@ -189,10 +192,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			isInSelection = (item) => {
 				if (Repository) {
-					return inArray(item, localSelection.current);
+					return inArray(item, getSelection());
 				}
 
-				const found = _.find(localSelection.current, (selectedItem) => {
+				const found = _.find(getSelection(), (selectedItem) => {
 						return selectedItem[idIx] === item[idIx];
 					});
 				return !!found;
@@ -214,10 +217,10 @@ export default function withSelection(WrappedComponent) {
 				return found;
 			},
 			getIdsFromLocalSelection = () => {
-				if (!localSelection.current[0]) {
+				if (!getSelection()[0]) {
 					return null;
 				}
-				const values = _.map(localSelection.current, (item) => {
+				const values = _.map(getSelection(), (item) => {
 					if (Repository) {
 						return item.id;
 					}
@@ -301,7 +304,7 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 
-				if (!_.isEqual(newSelection, localSelection.current)) {
+				if (!_.isEqual(newSelection, getSelection())) {
 					setSelection(newSelection);
 				}
 			};
@@ -352,7 +355,7 @@ export default function withSelection(WrappedComponent) {
 		}, [value]);
 
 		if (self) {
-			self.selection = localSelection.current;
+			self.selection = getSelection();
 			self.setSelection = setSelection;
 			self.selectPrev = selectPrev;
 			self.selectNext = selectNext;
@@ -395,7 +398,8 @@ export default function withSelection(WrappedComponent) {
 					{...props}
 					ref={ref}
 					disableWithSelection={false}
-					selection={localSelection.current}
+					selection={getSelection()}
+					getSelection={getSelection}
 					setSelection={setSelection}
 					selectionMode={selectionMode}
 					selectPrev={selectPrev}

package/src/Constants/Dates.js

@@ -14,3 +14,4 @@ export const ONE_YEAR_AGO = moment().add(-1, 'years');
 export const MOMENT_DATE_FORMAT_1 = 'YYYY-MM-DD HH:mm:ss';
 export const MOMENT_DATE_FORMAT_2 = 'MMMM Do YYYY, h:mm:ss a';
 export const MOMENT_DATE_FORMAT_3 = 'h:mm A';
+export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';

package/src/Functions/Cypress/button_functions.js

@@ -61,7 +61,7 @@ export function clickXButton(parentSelectors) {
 }
 export function clickXButtonIfEnabled(parentSelectors) {
 	cy.log('clickXButtonIfEnabled');
-	return clickButtonIfEnabled(parentSelectors, 'xBtn', true);
+	return clickButtonIfEnabled(parentSelectors, 'xBtn');
 }
 export function clickTrigger(parentSelectors) {
 	cy.log('clickTrigger');
@@ -91,29 +91,29 @@ export function toSideMode(parentSelectors) {
 	cy.log('toSideMode');
 	return clickButtonIfEnabled(parentSelectors, 'sideModeBtn');
 }
-export function clickButton(parentSelectors, name) { // requires the button to be enabled
+export function clickButton(parentSelectors, name, options) { // requires the button to be enabled
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
 	cy.log('clickButton ' + name);
-	return getDomNode([...parentSelectors, name])
+	return getDomNode([...parentSelectors, name], options)
 				.should('not.have.attr', 'data-disabled', 'true') // Check that the element is not disabled
 				.click({ force: true });
 }
-export function clickButtonIfEnabled(parentSelectors, name) { // allows button to be disabled
+export function clickButtonIfEnabled(parentSelectors, name, options) { // allows button to be disabled
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
-	return getDomNode([...parentSelectors, name])
+	return getDomNode([...parentSelectors, name], options)
 				.click({ force: true });
 }
-export function clickButtonIfExists(parentSelectors, name) {
+export function clickButtonIfExists(parentSelectors, name, options) {
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
-	return getDomNode([...parentSelectors, name]).if().then((node) => { // NOTE if() is a cypress-if function
+	return getDomNode([...parentSelectors, name], options).if().then((node) => { // NOTE if() is a cypress-if function
 		if (node) {
-			node.click();
+			cy.get(node).click();
 		}
 	});
 }

package/src/Functions/Cypress/crud_functions.js

@@ -2,6 +2,7 @@ import {
 	fixInflector,
 	getLastPartOfPath,
 	bootstrapRouteWaiters,
+	stubWindowOpen,
 } from './utilities.js';
 import {
 	login,
@@ -11,6 +12,7 @@ import {
 import {
 	getDomNode,
 	getDomNodes,
+	ifExists,
 } from './dom_functions.js';
 import {
 	hasRowWithFieldValue,
@@ -116,6 +118,39 @@ export function crudJson(selector, newData, editData, schema, ancillaryData, lev
 	// do nothing for now
 }
 
+// Editor
+export function viewPdf(editorSelector, formSelector) {
+	ifExists(formSelector, 'viewPdfBtn', (btn) => {
+		clickButton(formSelector, 'viewPdfBtn');
+
+		cy.wait(1000); // allow time for modal to render
+		const modalSelector = editorSelector + '/chooseFieldsForm';
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait(1000); // allow time for pdf to download
+		cy.get('@windowOpen').should('be.calledWithMatch', /viewModelPdf/);
+	});
+}
+export function emailPdf(editorSelector, formSelector) {
+	ifExists(formSelector, 'emailPdfBtn', (btn) => {
+		clickButton(formSelector, 'emailPdfBtn');
+	
+		cy.wait(1000); // allow time for modal to render
+		const modalSelector = editorSelector + '/chooseFieldsForm';
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait(1000); // allow time for new modal to render
+	
+		// UI now shows the email modal
+		fillForm(modalSelector, { email: 'scott@onehat.com', message: 'Sample message', }, { email: 'Input', message: 'TextArea', });
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait('@emailModelPdf');
+
+		getDomNode('InfoModal')
+			.should('exist')
+			.should('contain', 'Email sent successfully.');
+		clickButton('InfoModal', 'okBtn');
+	});
+}
+
 
 // Grid
 export function crudWindowedGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
@@ -313,7 +348,11 @@ export function editGridRecord(gridSelector, fieldValues, schema, id, level = 0,
 
 	verifyNoErrorBox();
 	// cy.wait(1000);
-	
+
+	if (whichEditor !== INLINE) {
+		viewPdf(editorSelector, formSelector);
+		emailPdf(editorSelector, formSelector);
+	}
 }
 export function editWindowedGridRecord(gridSelector, fieldValues, schema, id, level = 0) {
 	// edits the record as normal, then closes the editor window
@@ -542,6 +581,11 @@ export function editTreeRecord(treeSelector, fieldValues, schema, id, level = 0,
 
 	verifyNoErrorBox();
 	// cy.wait(1000);
+
+	if (whichEditor !== INLINE) {
+		viewPdf(editorSelector, formSelector);
+		emailPdf(editorSelector, formSelector);
+	}
 	
 }
 export function editWindowedTreeRecord(treeSelector, fieldValues, schema, id, level = 0) {
@@ -591,6 +635,7 @@ export function runClosureTreeControlledManagerScreenCrudTests(model, schema, ne
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		afterEach(function () {
@@ -688,6 +733,7 @@ export function runClosureTreeManagerScreenCrudTests(args) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		// afterEach(function () {
@@ -753,6 +799,7 @@ export function runManagerScreenCrudTests(args) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		// afterEach(function () {
@@ -806,11 +853,13 @@ export function runReportsManagerTests(reportData) {
 		beforeEach(function () {
 			bootstrapRouteWaiters();
 			login();
+			cy.restoreLocalStorage();
 			cy.url().then((currentUrl) => {
 				if (!currentUrl.endsWith(url)) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 
 		_.each(reportData, (report) => {
@@ -828,14 +877,14 @@ export function runReportsManagerTests(reportData) {
 
 				// Press Excel button
 				clickButton(selector, 'excelBtn');
-				cy.wait('@getWaiter', { timeout: 10000 }).then((interception) => {
+				cy.wait('@getReportWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
 				});
 
 
 				// Press PDF button
 				clickButton(selector, 'pdfBtn');
-				cy.wait('@getReportWaiter', { timeout: 10000 }).then((interception) => {
+				cy.wait('@postReportWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('pdf');
 				});
 

package/src/Functions/Cypress/dom_functions.js

@@ -8,7 +8,14 @@
  * @return Cypress chainer
  */
 export function getDomNode(selectors, options = {}) {
-	return cy.get(getTestIdSelectors(selectors, true), options);
+	let useFirst;
+	if (options?.hasOwnProperty('first')) {
+		useFirst = options.first;
+		delete options.first;
+	} else {
+		useFirst = true;
+	}
+	return cy.get(getTestIdSelectors(selectors, useFirst), options);
 }
 
 /**
@@ -22,6 +29,21 @@ export function getDomNodes(selectors, options = {}) {
 	return cy.get(getTestIdSelectors(selectors), options);
 }
 
+/**
+ * Verifies that an element with the given selectors does not exist in the DOM.
+ * @argument {string | string[]} selectors - data-testid attribute values
+ * If an array is given, these will be considered nested selectors.
+ * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ */
+export function verifyElementDoesNotExist(selectors) {
+	cy.get('body').then(($body) => {
+		const selectorString = getTestIdSelectors(selectors);
+		if ($body.find(selectorString).length > 0) {
+			throw new Error(`Element with selectors ${selectorString} exists in the DOM`);
+		}
+	});
+}
+
 /**
  * Builds selector string for data-testid attributes.
  * It leaves classname, id, and attribute selectors unchanged.
@@ -79,4 +101,15 @@ export function drag(draggableSelectors, droppableSelectors, options = {}) {
 			.then((success) => {
 				debugger;
 			});
-}
+}
+
+export function ifExists(parentSelectors, name, cb) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).if().then((node) => { // NOTE if() is a cypress-if function
+		if (node) {
+			cb(node);
+		}
+	});
+}

package/src/Functions/Cypress/form_functions.js

@@ -167,7 +167,7 @@ export function setTagValue(selectors, value) {
 				return;
 			}
 			cy.get(selector).eq(0)
-				.click()
+				.click({ force: true })
 				.then(() => {
 					clickButtonsWithRemove(selector); // Recursive call for the next element
 				});
@@ -188,7 +188,9 @@ export function setTagValue(selectors, value) {
 				cy.get(field)
 					.wait(1000) // render
 					.type('{downarrow}')
-					.wait(500); // allow time for selection
+					.wait(500) // allow time for selection
+					.type('{enter}')
+					.wait(250); // allow time to register enter key
 			});
 
 			// press trigger to hide dropdown

package/src/Functions/Cypress/utilities.js

@@ -12,7 +12,14 @@ export function bootstrapRouteWaiters() {
 	cy.intercept('POST', '**/add**').as('addWaiter');
 	cy.intercept('POST', '**/edit**').as('editWaiter');
 	cy.intercept('POST', '**/delete**').as('deleteWaiter');
-	cy.intercept('POST', '**/getReport**').as('getReportWaiter');
+	cy.intercept('GET', '**/getReport**').as('getReportWaiter');
+	cy.intercept('POST', '**/getReport**').as('postReportWaiter');
+	cy.intercept('POST', '**/emailModelPdf**').as('emailModelPdf');
+}
+export function stubWindowOpen() { // This needs to be called after the page in question has loaded. See https://docs.cypress.io/api/commands/stub#Replace-built-in-window-methods-like-prompt
+	cy.window().then((win) => {
+		cy.stub(win, 'open').as('windowOpen');
+	});
 }
 export function fixInflector(str) {
 	// inflector-js doesn't handle pluralization of 'equipment' correctly

package/src/Functions/buildAdditionalButtons.js

@@ -1,6 +1,3 @@
-import {
-	Icon,
-} from '@project-components/Gluestack';
 import Button from '../Components/Buttons/Button.js';
 import testProps from './testProps.js';
 import _ from 'lodash';
@@ -14,32 +11,28 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 				handler,
 				icon,
 				isDisabled,
+				tooltip,
 				color = '#fff',
 			} = config,
 			buttonProps = {
 				key,
+				parent: self,
 				reference: key,
+				text,
+				icon,
+				isDisabled,
 				className: 'ml-2',
+				tooltip,
+				color,
 			};
 		if (handler) {
 			buttonProps.onPress = () => handler(handlerArgs);
 		}
-		if (icon) {
-			buttonProps.leftIcon = <Icon as={icon} size="sm" className="text-[#fff]" />;
-		}
-		if (isDisabled) {
-			buttonProps.isDisabled = isDisabled;
-		}
 		
-		const button = <Button
-							{...testProps('btn-' + key)}
-							color={color}
-							parent={self}
-							reference={key}
-							text={text}
-							{...buttonProps}
-						/>;
-		additionalButtons.push(button);
+		additionalButtons.push(<Button
+			{...testProps(key)}
+			{...buttonProps}
+		/>);
 	});
 	return additionalButtons;
 }