@onehat/ui 0.3.287 → 0.3.290

package/package.json

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

package/src/Components/Buttons/ReloadButton.js

@@ -0,0 +1,38 @@
+import {
+	Icon,
+} from 'native-base';
+import testProps from '../../Functions/testProps.js';
+import IconButton from './IconButton.js';
+import Rotate from '../Icons/Rotate.js';
+
+export default function ReloadButton(props) {
+	const {
+			iconProps ={},
+			self,
+			Repository,
+			isTree = false,
+		} = props,
+		onPress = () => {
+			if (isTree) {
+				Repository.loadRootNodes(1);
+			} else {
+				Repository.reload();
+			}
+		};
+
+	if (!Repository || Repository.isLocal) {
+		return null;
+	}
+
+	return <IconButton
+				{...testProps('reloadBtn')}
+				{...props}
+				reference="reloadBtn"
+				parent={self}
+				icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+				onPress={onPress}
+				tooltip="Reload"
+				ml={2}
+			/>;
+}
+

package/src/Components/Buttons/ReloadPageButton.js

@@ -1,30 +1,6 @@
-import {
-	Icon,
-} from 'native-base';
-import testProps from '../../Functions/testProps.js';
-import IconButton from './IconButton.js';
-import Rotate from '../Icons/Rotate.js';
+import ReloadButton from './ReloadButton.js';
 
 export default function ReloadPageButton(props) {
-	const {
-			iconProps ={},
-			self,
-			Repository,
-		} = props;
-
-	if (!Repository || Repository.isLocal) {
-		return null;
-	}
-
-	return <IconButton
-				{...testProps('reloadPageBtn')}
-				{...props}
-				reference="reloadPageBtn"
-				parent={self}
-				icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
-				onPress={() => Repository.reload()}
-				tooltip="Reload"
-				ml={2}
-			/>;
+	return <ReloadButton isTree={false} {...props} />;
 }
 

package/src/Components/Buttons/ReloadTreeButton.js

@@ -0,0 +1,6 @@
+import ReloadButton from './ReloadButton.js';
+
+export default function ReloadTreeButton(props) {
+	return <ReloadButton isTree={true} {...props} />;
+}
+

package/src/Components/Form/Form.js

@@ -134,8 +134,8 @@ function Form(props) {
 	}
 	const
 		isMultiple = _.isArray(record),
-		isSingle = !isMultiple, // for convenience
-		isPhantom = !skipAll && !!record?.isPhantom, //
+		isSingle = _.isNil(record) || !_.isArray(record),
+		isPhantom = !skipAll && !!record?.isPhantom,
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
@@ -949,6 +949,9 @@ function Form(props) {
 				const formIsDirty = formState.isDirty;
 				// console.log('formIsDirty', formIsDirty);
 				// console.log('isPhantom', isPhantom);
+				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+					showCancelBtn = true;
+				}
 				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;

package/src/Components/Grid/Grid.js

@@ -976,13 +976,6 @@ function GridComponent(props) {
 									</Toolbar>;
 		}
 	}
-	
-	const sizeProps = {};
-	if (!_.isNil(h)) {
-		sizeProps.h = h;
-	} else {
-		sizeProps.flex = flex ?? 1;
-	}
 
 	let grid = <FlatList
 					{...testProps('flatlist')}
@@ -1064,6 +1057,13 @@ function GridComponent(props) {
 							/>
 						</Modal>;
 	}
+	
+	const sizeProps = {};
+	if (!_.isNil(h)) {
+		sizeProps.h = h;
+	} else {
+		sizeProps.flex = flex ?? 1;
+	}
 
 	grid = <Column
 				{...testProps(self)}

package/src/Components/Hoc/withEditor.js

@@ -142,7 +142,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (!selection[0]) {
 						throw Error('Must select a parent node.');
 					}
-					addValues.parentId = selection[0].id;
+					const parent = selection[0];
+					addValues.parentId = parent.id;
+					addValues.depth = parent.depth +1;
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = Repository.sorters[0];
@@ -173,10 +175,13 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 				setIsIgnoreNextSelectionChange(true);
 				setSelection([entity]);
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
 				if (Repository.isAutoSave) {
 					// for isAutoSave Repositories, submit the handers right away
-					if (getListeners().onAfterAdd) {
-						await getListeners().onAfterAdd(entity);
+					if (getListeners().onAfterAddSave) {
+						await getListeners().onAfterAddSave(selection);
 					}
 					if (onAdd) {
 						await onAdd(entity);
@@ -377,8 +382,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						if (onAdd) {
 							await onAdd(selection);
 						}
-						if (getListeners().onAfterAdd) {
-							await getListeners().onAfterAdd(selection);
+						if (getListeners().onAfterAddSave) {
+							await getListeners().onAfterAddSave(selection);
 						}
 						setIsAdding(false);
 						setEditorMode(EDITOR_MODE__EDIT);

package/src/Components/Hoc/withSideEditor.js

@@ -67,5 +67,5 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 							/>}
 				/>;
 	};
-	return withAdditionalProps(withEditor(SideEditor));
+	return withAdditionalProps(withEditor(SideEditor, isTree));
 }

package/src/Components/Tree/Tree.js

@@ -39,6 +39,7 @@ import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js'
 import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
+import ReloadTreeButton from '../Buttons/ReloadTreeButton.js';
 import TreeNode, { DraggableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
@@ -61,6 +62,7 @@ const DEPTH_INDENT_PX = 25;
 function TreeComponent(props) {
 	const {
 			areRootsVisible = true,
+			autoLoadRootNodes = true,
 			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
 			getNodeText = (item) => { // extracts model/data and decides what the row text should be
 				if (Repository) {
@@ -68,6 +70,9 @@ function TreeComponent(props) {
 				}
 				return item[displayIx];
 			},
+			getDisplayTextFromSearchResults = (item) => {
+				return item.id
+			},
 			getNodeIcon = (which, item) => { // decides what icon to show for this node
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
 				let icon;
@@ -232,6 +237,9 @@ function TreeComponent(props) {
 			}
 		},
 		onBeforeAdd = async () => {
+			// called during withEditor::doAdd, before the add operation is called
+			// returning false will cancel the add operation
+
 			// Load children before adding the new node
 			if (_.isEmpty(selection)) {
 				alert('Please select a parent node first.')
@@ -244,24 +252,32 @@ function TreeComponent(props) {
 			if (parent.hasChildren && !parent.areChildrenLoaded) {
 				await loadChildren(parentDatum);
 			}
+
+			// forceUpdate();
+		},
+		onAfterAdd = (entity) => {
+			// called during withEditor::doAdd, after the add operation is called
+
+			// Add the entity to the tree, show parent as hasChildren and expanded
+			const
+				parent = selection[0],
+				parentDatum = getNodeData(parent.id);
+			if (!parent.hasChildren) {
+				parent.hasChildren = true; // since we're adding a new child
+			}
 			if (!parentDatum.isExpanded) {
 				parentDatum.isExpanded = true;
 			}
+
+			buildRowToDatumMap();
 			forceUpdate();
 		},
-		onAfterAdd = async (entities) => {
-			// Expand the parent before showing the new node
-			const
-				entity = entities[0],
-				parentDatum = getNodeData(entity.parentId);
-
+		onAfterAddSave = (entities) => {
 
-			// Add the entity to the tree
-			const entityDatum = buildTreeNodeDatum(entity);
-			parentDatum.children.unshift(entityDatum);
-			forceUpdate();
+			// Update the datum with the new entity
+			return onAfterEdit(entities);
 			
-			buildRowToDatumMap();
+
 		},
 		onBeforeEditSave = (entities) => {
 			onBeforeSave(entities);
@@ -370,7 +386,7 @@ function TreeComponent(props) {
 			// Show modal so user can select which node to go to
 			const searchFormData = [];
 			_.each(found, (item) => {
-				searchFormData.push([item.id, getNodeText(item)]);
+				searchFormData.push([item.id, getDisplayTextFromSearchResults(item)]);
 			});
 			setSearchFormData(searchFormData);
 			setSearchResults(found);
@@ -686,8 +702,9 @@ function TreeComponent(props) {
 				
 				currentNode = currentDatum.item;
 				
-				// THE MAGIC!
-				currentDatum.isExpanded = true;
+				if (!currentDatum.isExpanded) {
+					await loadChildren(currentDatum, 1);
+				}
 				
 				cPath = cPathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
@@ -910,6 +927,7 @@ function TreeComponent(props) {
 										onToggle={onToggle}
 										isDragMode={isDragMode}
 										isHighlighted={highlitedDatum === datum}
+										isSelected={isSelected}
 
 										// fields={fields}
 									/>;
@@ -1102,6 +1120,10 @@ function TreeComponent(props) {
 			Repository.setBaseParams(extraParams);
 		}
 
+		if (autoLoadRootNodes) {
+			Repository.loadRootNodes(1);
+		}
+
 		async function rebuildTree() {
 			setIsReady(false);
 			await buildAndSetTreeNodeData();
@@ -1117,6 +1139,7 @@ function TreeComponent(props) {
 		Repository.on('load', setFalse);
 		Repository.on('loadRootNodes', setFalse);
 		Repository.on('loadRootNodes', rebuildTree);
+		Repository.on('add', rebuildTree);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
@@ -1125,6 +1148,7 @@ function TreeComponent(props) {
 			Repository.off('load', setFalse);
 			Repository.off('loadRootNodes', setFalse);
 			Repository.off('loadRootNodes', rebuildTree);
+			Repository.off('add', rebuildTree);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};
@@ -1147,6 +1171,7 @@ function TreeComponent(props) {
 		setWithEditListeners({ // Update withEdit's listeners on every render
 			onBeforeAdd,
 			onAfterAdd,
+			onAfterAddSave,
 			onBeforeEditSave,
 			onAfterEdit,
 			onBeforeDeleteSave,
@@ -1168,9 +1193,16 @@ function TreeComponent(props) {
 	let treeFooterComponent = null;
 	if (!disableBottomToolbar) {
 		if (Repository && bottomToolbar === 'pagination' && !disablePagination && Repository.isPaginated) {
-			treeFooterComponent = <PaginationToolbar Repository={Repository} toolbarItems={footerToolbarItemComponents} />;
+			treeFooterComponent = <PaginationToolbar
+										Repository={Repository}
+										self={self}
+										toolbarItems={footerToolbarItemComponents}
+									/>;
 		} else if (footerToolbarItemComponents.length) {
-			treeFooterComponent = <Toolbar>{footerToolbarItemComponents}</Toolbar>;
+			treeFooterComponent = <Toolbar>
+										<ReloadTreeButton Repository={Repository} self={self} />
+										{footerToolbarItemComponents}
+									</Toolbar>;
 		}
 	}
 
@@ -1207,7 +1239,7 @@ function TreeComponent(props) {
 							}
 						}}
 					>
-						<ScrollView flex={1} w="100%">
+						<ScrollView {...testProps('ScrollView')} flex={1} w="100%">
 							{!treeNodes?.length ? 
 								<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 								treeNodes}
@@ -1224,38 +1256,42 @@ function TreeComponent(props) {
 				>
 					<Column bg="#fff" w={300}>
 						<FormPanel
-							title="Choose Tree Node"
+							_panel={{ 
+								title: 'Choose Tree Node',
+							}}
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
-							flex={1}
-							items={[
-								{
-									type: 'Column',
-									flex: 1,
-									items: [
-										{
-											key: 'node_id',
-											name: 'node_id',
-											type: 'Combo',
-											label: 'Tree Node',
-											data: searchFormData,
-										}
-									],
+							_form={{ 
+								flex: 1,
+								items: [
+									{
+										type: 'Column',
+										flex: 1,
+										items: [
+											{
+												key: 'node_id',
+												name: 'node_id',
+												type: 'Combo',
+												label: 'Tree Node',
+												data: searchFormData,
+											}
+										],
+									},
+								],
+								onCancel: (e) => {
+									setHighlitedDatum(null);
+									setIsModalShown(false);
+								},
+								onSave: (data, e) => {
+									const
+										treeNode = _.find(searchResults, (item) => {
+											return item.id === data.node_id;
+										}),
+										cPath = treeNode.cPath;
+									expandPath(cPath);
+	
+									// Close the modal
+									setIsModalShown(false);
 								},
-							]}
-							onCancel={(e) => {
-								setHighlitedDatum(null);
-								setIsModalShown(false);
-							}}
-							onSave={(data, e) => {
-								const
-									treeNode = _.find(searchResults, (item) => {
-										return item.id === data.node_id;
-									}),
-									cPath = treeNode.cPath;
-								expandPath(cPath);
-
-								// Close the modal
-								setIsModalShown(false);
 							}}
 						/>
 					</Column>

package/src/Components/Tree/TreeNode.js

@@ -22,6 +22,7 @@ export default function TreeNode(props) {
 			onToggle,
 			isDragMode,
 			isHighlighted,
+			isSelected,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -44,6 +45,7 @@ export default function TreeNode(props) {
 	return useMemo(() => {
 		
 		return <Row
+					{...testProps('node' + (isSelected ? '-selected' : ''))}
 					alignItems="center"
 					flexGrow={1}
 					{...nodeProps}
@@ -54,7 +56,7 @@ export default function TreeNode(props) {
 					
 					{isLoading ? 
 						<Spinner px={2} /> : 
-						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} {...testProps('TreeNodeExpandBtn-' + item?.id)} /> : <Icon as={icon} px={2} />)}
+						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} {...testProps('expandBtn')} /> : <Icon as={icon} px={2} />)}
 
 					<Text
 						overflow="hidden"

package/src/Functions/Cypress/button_functions.js

@@ -23,7 +23,7 @@ export function clickDuplicateButton(parentSelectors) {
 	return clickButton(parentSelectors, 'duplicateBtn');
 }
 export function clickReloadButton(parentSelectors) {
-	return clickButton(parentSelectors, 'reloadPageBtn');
+	return clickButton(parentSelectors, 'reloadBtn');
 }
 export function clickCloseButton(parentSelectors) {
 	return clickButton(parentSelectors, 'closeBtn');
@@ -40,6 +40,9 @@ export function clickYesButton(parentSelectors) {
 export function clickNoButton(parentSelectors) {
 	return clickButton(parentSelectors, 'noBtn');
 }
+export function clickExpandButton(parentSelectors) {
+	return clickButton(parentSelectors, 'expandBtn');
+}
 export function clickXButton(parentSelectors) {
 	return clickButton(parentSelectors, 'xBtn');
 }

package/src/Functions/Cypress/crud_functions.js

@@ -25,6 +25,21 @@ import {
 	getModelFromGridSelector,
 	getGridRowSelectorById,
 } from './grid_functions.js';
+import {
+	hasNodeWithFieldValue,
+	getNodeWithFieldValue,
+	selectTreeNodeById,
+	selectTreeNodeIfNotAlreadySelectedById,
+	verifyTreeRecordDoesNotExistByValue,
+	verifyTreeRecordExistsByValue,
+	verifyTreeRecordExistsById,
+	verifyTreeRecordDoesNotExistById,
+	verifyTreeNodeIsSelectedById,
+	getModelFromTreeName,
+	getModelFromTreeSelector,
+	getTreeNodeSelectorById,
+	getFirstTreeRootNode,
+} from './tree_functions.js';
 import {
 	verifyNoErrorBox,
 } from './common_functions.js';
@@ -59,6 +74,7 @@ import _ from 'lodash';
 const $ = Cypress.$;
 
 
+// Form fields
 export function crudCombo(selector, newData, editData, schema, ancillaryData, level = 0) {
 	cy.then(() => {
 		Cypress.log({ name: 'crudCombo' });
@@ -92,28 +108,33 @@ export function crudTag(selector, newData, editData, schema, ancillaryData, leve
 
 	clickTrigger(selector);
 }
-export function crudSideGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
-	// NOTE: the 'level' arg allows this fn to be called recursively 
-	// and to use the @id alias correctly, keeping track of the level of recursion
-	// so the CRUD operations don't step on each other at different levels.
+
+
+// Grid
+export function crudWindowedGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
+
 	cy.then(() => {
-		Cypress.log({ name: 'crudSideGridRecord ' + gridSelector });
-    });
-	
+		Cypress.log({ name: 'crudWindowedGridRecord ' + gridSelector });
+	});
+
 	getDomNode(gridSelector).scrollIntoView();
 
 	// add
-	addGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
-
+	addWindowedGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
+	
 	cy.get('@id' + level).then((id) => {
 
+		cy.then(() => {
+			Cypress.log({ name: 'crudWindowedGridRecord: continue thru CRUD ' + gridSelector });
+		});
+
 		// read
 		clickReloadButton(gridSelector);
 		cy.wait(1000); // allow time for grid to load
 		verifyGridRecordExistsById(gridSelector, id);
 
 		// edit
-		editGridRecord(gridSelector, editData, schema, id);
+		editWindowedGridRecord(gridSelector, editData, schema, id);
 
 		// delete
 		verifyGridRecordExistsById(gridSelector, id);
@@ -121,16 +142,16 @@ export function crudSideGridRecord(gridSelector, newData, editData, schema, anci
 		verifyGridRecordDoesNotExistById(gridSelector, id);
 	});
 }
-export function crudWindowedGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
+export function crudInlineGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
 
 	cy.then(() => {
-		Cypress.log({ name: 'crudWindowedGridRecord ' + gridSelector });
-    });
+		Cypress.log({ name: 'crudInlineGridRecord ' + gridSelector });
+	});
 
 	getDomNode(gridSelector).scrollIntoView();
 
 	// add
-	addWindowedGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
+	addInlineGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
 	
 	cy.get('@id' + level).then((id) => {
 
@@ -144,7 +165,7 @@ export function crudWindowedGridRecord(gridSelector, newData, editData, schema,
 		verifyGridRecordExistsById(gridSelector, id);
 
 		// edit
-		editWindowedGridRecord(gridSelector, editData, schema, id);
+		editInlineGridRecord(gridSelector, editData, schema, id);
 
 		// delete
 		verifyGridRecordExistsById(gridSelector, id);
@@ -152,22 +173,20 @@ export function crudWindowedGridRecord(gridSelector, newData, editData, schema,
 		verifyGridRecordDoesNotExistById(gridSelector, id);
 	});
 }
-export function crudInlineGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
-
+export function crudSideGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
+	// NOTE: the 'level' arg allows this fn to be called recursively 
+	// and to use the @id alias correctly, keeping track of the level of recursion
+	// so the CRUD operations don't step on each other at different levels.
 	cy.then(() => {
-		Cypress.log({ name: 'crudInlineGridRecord ' + gridSelector });
-    });
-
+		Cypress.log({ name: 'crudSideGridRecord ' + gridSelector });
+	});
+	
 	getDomNode(gridSelector).scrollIntoView();
 
 	// add
-	addInlineGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
-	
-	cy.get('@id' + level).then((id) => {
+	addGridRecord(gridSelector, newData, schema, ancillaryData, level); // saves the id in @id
 
-		cy.then(() => {
-			Cypress.log({ name: 'crudWindowedGridRecord: continue thru CRUD ' + gridSelector });
-		});
+	cy.get('@id' + level).then((id) => {
 
 		// read
 		clickReloadButton(gridSelector);
@@ -175,7 +194,7 @@ export function crudInlineGridRecord(gridSelector, newData, editData, schema, an
 		verifyGridRecordExistsById(gridSelector, id);
 
 		// edit
-		editInlineGridRecord(gridSelector, editData, schema, id);
+		editGridRecord(gridSelector, editData, schema, id);
 
 		// delete
 		verifyGridRecordExistsById(gridSelector, id);
@@ -384,7 +403,221 @@ export function switchToViewModeIfNecessary(editorSelector) {
 }
 
 
-// Manager screen CRUD functions
+// Tree
+export function crudWindowedTreeRecord(treeSelector, newData, editData, schema, ancillaryData, level = 0) {
+
+	cy.then(() => {
+		Cypress.log({ name: 'crudWindowedTreeRecord ' + treeSelector });
+	});
+
+	getDomNode(treeSelector).scrollIntoView();
+
+	// add
+	addWindowedTreeRecord(treeSelector, newData, schema, ancillaryData, level); // saves the id in @id
+	
+	cy.get('@id' + level).then((id) => {
+
+		cy.then(() => {
+			Cypress.log({ name: 'crudWindowedTreeRecord: continue thru CRUD ' + treeSelector });
+		});
+		
+		// read
+		clickReloadButton(treeSelector);
+		cy.wait(1000); // allow time for tree to load
+		verifyTreeRecordExistsById(treeSelector, id);
+
+		// edit
+		editWindowedTreeRecord(treeSelector, editData, schema, id);
+
+		// delete
+		verifyTreeRecordExistsById(treeSelector, id);
+		deleteTreeRecord(treeSelector, id);
+		verifyTreeRecordDoesNotExistById(treeSelector, id);
+	});
+}
+export function crudSideTreeRecord(treeSelector, newData, editData, schema, ancillaryData, level = 0) {
+	// NOTE: the 'level' arg allows this fn to be called recursively 
+	// and to use the @id alias correctly, keeping track of the level of recursion
+	// so the CRUD operations don't step on each other at different levels.
+	cy.then(() => {
+		Cypress.log({ name: 'crudSideTreeRecord ' + treeSelector });
+	});
+	
+	getDomNode(treeSelector).scrollIntoView();
+
+	// add
+	addTreeRecord(treeSelector, newData, schema, ancillaryData, level); // saves the id in @id
+
+	cy.get('@id' + level).then((id) => {
+
+		// read
+		clickReloadButton(treeSelector);
+		cy.wait(1000); // allow time for tree to load
+		verifyTreeRecordExistsById(treeSelector, id);
+
+		// edit
+		editTreeRecord(treeSelector, editData, schema, id);
+
+		// delete
+		verifyTreeRecordExistsById(treeSelector, id);
+		deleteTreeRecord(treeSelector, id);
+		verifyTreeRecordDoesNotExistById(treeSelector, id);
+	});
+}
+export function addTreeRecord(treeSelector, fieldValues, schema, ancillaryData, level = 0) {
+
+	cy.then(() => {
+		Cypress.log({ name: 'addTreeRecord ' + treeSelector });
+	});
+
+	const
+		editorSelector = treeSelector + '/editor',
+		viewerSelector = editorSelector + '/viewer',
+		formSelector = editorSelector + '/form';
+
+	// BEGIN MOD
+	// select the root node
+	getFirstTreeRootNode(treeSelector).then ((rootNode) => {
+
+		// get the rootNodeId
+		const id = rootNode.attr('data-testid').split('-')[1];
+		selectTreeNodeIfNotAlreadySelectedById(treeSelector, id)
+	});
+	// END MOD
+
+
+	clickAddButton(treeSelector);
+	getDomNode(formSelector).should('exist');
+
+	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
+
+	let method = 'add';
+	if (schema.repository.isRemotePhantomMode) {
+		method = 'edit';
+	}
+	cy.intercept('POST', '**/' + method + '**').as('waiter');
+	clickSaveButton(formSelector); // it's labeled 'Add' in the form, but is really the save button
+	cy.wait('@waiter');
+
+	verifyNoErrorBox();
+
+	cy.wait(1000); // allow temp id to be replaced by real one
+
+	// Get and save id of new record
+	getDomNode([treeSelector, 'node-selected']).then((row) => {
+		const parent = row[0].parentNode;
+		cy.wrap(parent).invoke('attr', 'data-testid').then((testId) => {
+			const id = testId.split('-')[1];
+			cy.wrap(id).as('id' + level);
+		});
+	});
+
+	if (!_.isEmpty(ancillaryData)) {
+		_.each(ancillaryData, (data) => {
+			const
+				model = data.model,
+				Models = fixInflector(Inflector.camelize(Inflector.pluralize(model))),
+				gridType = data.gridType,
+				schema = data.schema,
+				newData = data.newData,
+				editData = data.editData,
+				ancillaryData = data.ancillaryData,
+				ancillaryGridSelector = formSelector + '/' + (gridType || Models + 'GridEditor');
+			crudWindowedGridRecord(ancillaryGridSelector, newData, editData, schema, ancillaryData, level+1);
+		});
+	}
+}
+export function addWindowedTreeRecord(treeSelector, fieldValues, schema, ancillaryData, level = 0) {
+	// adds the record as normal, then closes the editor window
+
+	cy.then(() => {
+		Cypress.log({ name: 'addWindowedTreeRecord ' + treeSelector });
+	});
+
+	addTreeRecord(treeSelector, fieldValues, schema, ancillaryData, level);
+
+	cy.then(() => {
+		Cypress.log({ name: 'addWindowedTreeRecord: close window ' + treeSelector });
+	});
+	const formSelector = treeSelector + '/editor/form';
+	clickCloseButton(formSelector);
+	cy.wait(500); // allow window to close
+	// TODO: Change this to wait until window is closed
+}
+export function editTreeRecord(treeSelector, fieldValues, schema, id, level = 0) {
+	
+	cy.then(() => {
+		Cypress.log({ name: 'editTreeRecord ' + treeSelector + ' ' + id});
+	});
+	
+	selectTreeNodeIfNotAlreadySelectedById(treeSelector, id);
+
+	const
+		editorSelector = treeSelector + '/editor',
+		viewerSelector = editorSelector + '/viewer',
+		formSelector = editorSelector + '/form';
+
+	const treeName = getLastPartOfPath(treeSelector);
+	if (treeName.match(/SideTree/)) { // as opposed to 'SideA' -- we want the side editor, not particular sides of another editor
+		// side editor
+		// switch to Edit mode if necessary
+		clickToEditButtonIfExists(viewerSelector);
+	} else {
+		// windowed or inline editor
+		clickEditButton(treeSelector);
+	}
+	cy.wait(1500); // allow form to build
+	getDomNode(formSelector).should('exist');
+
+	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
+
+	cy.intercept('POST', '**/edit**').as('waiter');
+	clickSaveButton(formSelector);
+	cy.wait('@waiter');
+
+	verifyNoErrorBox();
+	// cy.wait(1000);
+	
+}
+export function editWindowedTreeRecord(treeSelector, fieldValues, schema, id, level = 0) {
+	// edits the record as normal, then closes the editor window
+
+	cy.then(() => {
+		Cypress.log({ name: 'editWindowedTreeRecord ' + treeSelector + ' ' + id});
+	});
+	
+	editTreeRecord(treeSelector, fieldValues, schema, id, level);
+
+	const formSelector = treeSelector + '/editor/form';
+	clickCloseButton(formSelector);
+	cy.wait(500); // allow window to close
+	// TODO: Change this to wait until window is closed
+}
+export function deleteTreeRecord(treeSelector, id) {
+
+	cy.then(() => {
+		Cypress.log({ name: 'deleteTreeRecord ' + treeSelector + ' ' + id });
+	});
+	
+	selectTreeNodeIfNotAlreadySelectedById(treeSelector, id);
+	clickDeleteButton(treeSelector);
+	cy.wait(500); // allow confirmation box to appear
+	
+	// Click OK on confirmation box
+	cy.intercept('POST', '**/delete**').as('waiter');
+	clickYesButton('AlertDialog');
+	cy.wait('@waiter');
+
+	verifyNoErrorBox();
+	// cy.wait(1000);
+}
+
+
+// Manager screen
 export function runClosureTreeControlledManagerScreenCrudTests(model, schema, newData, editData) {
 
 	const
@@ -474,11 +707,11 @@ export function runClosureTreeControlledManagerScreenCrudTests(model, schema, ne
 	});
 
 }
-export function runClosureTreeManagerScreenCrudTests(model, schema, newData, editData) {
+export function runClosureTreeManagerScreenCrudTests(model, schema, newData, editData, ancillaryData) {
 
 	const
-		Models = Inflector.camelize(Inflector.pluralize(model)),
-		url = '/' + Inflector.dasherize(Inflector.underscore(Models));
+		Models = fixInflector(Inflector.camelize(Inflector.pluralize(model))),
+		url = '/' + fixInflector(Inflector.dasherize(Inflector.underscore(Models)));
 
 	describe(Models + 'Manager', () => {
 
@@ -492,44 +725,34 @@ export function runClosureTreeManagerScreenCrudTests(model, schema, newData, edi
 			});
 		});
 		
-		afterEach(function () {
-			cy.saveLocalStorage();
-			logout();
-		});
-
-		it('CRUD ClosureTree', function() {
-
-			const treeSelector = '/' + Models + 'TreeEditor';
+		// afterEach(function () {
+		// 	cy.saveLocalStorage();
+		// 	logout();
+		// });
 
-			toFullMode();
-			cy.wait(500); // wait for tree to load
+		it('CRUD in full mode', function() {
 
+			const
+				managerSelector = '/' + Models + 'Manager',
+				treeSelector = '/' + Models + 'FilteredTreeEditor';
 
-			// TODO: Customize these for crudding a ClosureTree
+			toFullMode(managerSelector);
+			cy.wait(500); // wait for grid to load
 
+			crudWindowedTreeRecord(treeSelector, newData, editData, schema, ancillaryData);
 
+		});
 
-			
+		it('CRUD in side mode', function() {
 
-			// // add
-			// addWindowedGridRecord(treeSelector, newData, schema); // saves the id in @id
-			
-			// // cy.wrap(39).as('id');
-			// cy.get('@id').then((id) => {
+			const
+				managerSelector = '/' + Models + 'Manager',
+				treeSelector = '/' + Models + 'FilteredSideTreeEditor';
 
-			// 	// read
-			// 	clickReloadButton(treeSelector);
-			// 	cy.wait(1000); // allow time for tree to load
-			// 	verifyGridRecordExistsById(treeSelector, id);
+			toSideMode(managerSelector);
+			cy.wait(1000); // wait for grid to load
 
-			// 	// edit
-			// 	editWindowedGridRecord(treeSelector, editData, schema, id);
-		
-			// 	// delete
-			// 	verifyGridRecordExistsById(treeSelector, id);
-			// 	deleteGridRecord(treeSelector, id);
-			// 	verifyGridRecordDoesNotExistById(treeSelector, id);
-			// });
+			crudSideTreeRecord(treeSelector, newData, editData, schema, ancillaryData);
 
 		});
 

package/src/Functions/Cypress/tree_functions.js

@@ -0,0 +1,254 @@
+import {
+	fixInflector,
+	getLastPartOfPath,
+} from './utilities.js';
+import {
+	getDomNode,
+	getDomNodes,
+} from './dom_functions.js';
+import Inflector from 'inflector-js';
+import _ from 'lodash';
+const $ = Cypress.$;
+
+
+
+// Get rows
+export function hasNodeWithFieldValue(treeSelector, field, value) {
+	return getDomNodes([treeSelector, 'row', 'cell-' + field]).contains(value);
+}
+export function getNodeWithFieldValue(treeSelector, field, value) {
+	return getDomNodes([treeSelector, 'row', 'cell-' + field]).contains(value).then((cells) => {
+		if (!cells.length) {
+			return null;
+		}
+		
+		const cell = cells[0];
+		return $(cell).closest('[data-testid="row"]')[0];
+	});
+}
+export function getFirstTreeRootNode(treeSelector) {
+	return cy.get('[data-testid="' + treeSelector + '"]:first ' + 
+					'[data-testid="ScrollView"]:first > div > div:first'); // this is fragile!
+}
+// export function getNodeWithText(tree, text) {
+// 	return getNodes(tree).contains(text);
+// }
+// export function getNodeWithId(tree, id) {
+// 	return getNodes(tree, '[data-cy-recordid=' + id + ']');
+// }
+// export function getNodeWithIx(tree, ix) {
+// 	return getNodes(tree, '[data-recordindex=' + ix + ']');
+// }
+
+
+// Select rows
+export function selectTreeNodeById(treeSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'selectTreeNodeById ' + treeSelector + ' ' + id});
+	});
+	const rowSelector = getTreeNodeSelectorById(treeSelector, id);
+	getDomNode([treeSelector, rowSelector])
+		.click();
+}
+export function selectTreeNodeIfNotAlreadySelectedById(treeSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'selectTreeNodeIfNotAlreadySelectedById ' + treeSelector + ' ' + id});
+	});
+	const rowSelector = getTreeNodeSelectorById(treeSelector, id);
+	getDomNode([treeSelector, rowSelector]).then((row) => {
+		const found = row.find('[data-testid="node-selected"]')
+		if (!found.length) {
+			selectTreeNodeById(treeSelector, id);
+		}
+	})
+}
+// export function selectNodeWithText(tree, text) {
+// 	getNodeWithText(tree, text).click(5, 5);
+// }
+// export function selectNodeWithIx(tree, ix) {
+// 	getNodeWithIx(tree, ix).click(5, 5);
+// }
+// export function cmdClickNodeWithId(tree, id) {
+// 	getNodeWithId(tree, id).click('left', { metaKey: true });
+// }
+
+
+// // Double-click rows
+// export function doubleClickNodeWithText(tree, text) {
+// 	getNodeWithText(tree, text).dblclick();
+// }
+// export function doubleClickNodeWithId(tree, id) {
+// 	getNodeWithId(tree, id).dblclick();
+// }
+// export function doubleClickNodeWithIx(tree, ix) {
+// 	getNodeWithIx(tree, ix).dblclick();
+// }
+
+
+export function verifyTreeRecordDoesNotExistByValue(treeSelector, fieldValues, schema) {
+	const
+		field = schema.model.displayProperty,
+		value = fieldValues[field];
+		
+	getDomNodes([treeSelector, 'row', 'cell-' + field])
+		.contains(value, { timeout: 500 })
+		.should('not.exist');
+}
+export function verifyTreeRecordExistsByValue(treeSelector, fieldValues, schema) {
+	const
+		field = schema.model.displayProperty,
+		value = fieldValues[field];
+		
+	getDomNodes([treeSelector, 'row', 'cell-' + field])
+		.contains(value, { timeout: 500 })
+		.should('exist');
+}
+export function verifyTreeRecordExistsById(treeSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyTreeRecordExistsById ' + treeSelector + ' ' + id });
+	});
+	
+	const rowSelector = getTreeNodeSelectorById(treeSelector, id);
+	getDomNodes([treeSelector, rowSelector])
+		.should('exist');
+}
+export function verifyTreeRecordDoesNotExistById(treeSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyTreeRecordDoesNotExistById ' + treeSelector + ' ' + id });
+	});
+	const rowSelector = getTreeNodeSelectorById(treeSelector, id);
+	getDomNodes([treeSelector, rowSelector])
+		.should('not.exist');
+}
+export function verifyTreeNodeIsSelectedById(treeSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyTreeNodeIsSelectedById ' + treeSelector + ' ' + id});
+	});
+	const rowSelector = getTreeNodeSelectorById(treeSelector, id);
+	getDomNodes([treeSelector, rowSelector, 'node-selected'])
+		.should('exist');
+}
+
+
+
+
+
+// export function addRecordWithInlineEditor(tree, fieldValues, schema) {
+// 	clickTreeAddButton(tree, true);
+// 	fillInlineForm(tree, fieldValues, schema);
+// 	cy.route('POST', '**/extAdd**').as('addWaiter');
+// 	submitInlineForm(tree);
+// 	cy.wait('@addWaiter');
+// 	verifyNoErrorBox();
+// 	getSelectedNodeId(tree); // Adds @id alias
+// 	cy.wait(1000);
+// }
+// export function addRecordWithWindowedEditor(tree, editorCls, fieldValues, schema) {
+// 	clickTreeAddButton(tree, true);
+// 	fillWindowedForm(editorCls, fieldValues, schema);
+// 	cy.route('POST', '**/extAdd**').as('addWaiter');
+// 	submitWindowedForm(editorCls);
+// 	cy.wait('@addWaiter');
+// 	verifyNoErrorBox();
+// 	getSelectedNodeId(tree); // Adds @id alias
+// 	cy.wait(1000);
+// }
+// export function editRecordWithInlineEditor(tree, fieldValues, schema) {
+// 	cy.get("@id").then((id) => {
+// 		doubleClickNodeWithId(tree, id);
+// 		fillInlineForm(tree, fieldValues, schema);
+// 		cy.route('POST', '**/extEdit**').as('editWaiter');
+// 		submitInlineForm(tree);
+// 		cy.wait('@editWaiter');
+// 		verifyNoErrorBox();
+// 		cy.wait(500);
+// 	});
+// }
+// export function editRecordWithWindowedEditor(tree, editorCls, fieldValues, schema) {
+// 	cy.get("@id").then((id) => {
+// 		doubleClickNodeWithId(tree, id);
+// 		fillWindowedForm(editorCls, fieldValues, schema);
+// 		cy.route('POST', '**/extEdit**').as('editWaiter');
+// 		submitWindowedForm(editorCls);
+// 		cy.wait('@editWaiter');
+// 		verifyNoErrorBox();
+// 	});
+// }
+// export function removeRecord(tree) {
+// 	cy.get("@id").then((id) => {
+// 		cy.wait(500);
+// 		clickTreeRemoveButton(tree);
+// 		cy.route('POST', '**/extDelete**').as('removeWaiter');
+// 		clickMessageBoxDefaultButton();
+// 		cy.wait('@removeWaiter');
+// 		verifyNoErrorBox();
+// 	});
+// }
+
+
+// Tree Utilities
+export function getModelFromTreeName(treeName) {
+	// try to match with something like 'EquipmentFilteredTreeEditor'
+	const
+		pattern = '^' + // start
+						'([\\w]+?)' + // model name
+						'(?=Filtered|Inline|Side|Tree)' + // positive lookahead to guarantee one of these is the next word
+						'(Filtered)?' + // optional
+						'(Inline)?' + // optional
+						'(Side)?' + // optional
+						'Tree' + // required
+						'(Editor)?' + // optional
+						'(Side[AB])?' + // optional
+					'$', // end
+		regex = new RegExp(pattern),
+		match = treeName.match(regex);
+	return match?.length ? match[1] : null;
+}
+export function getModelFromTreePath(treePath) {
+	// try to match with something like '...__eq_manufacturer_id/tree'
+	let
+		pattern = '^' + // start
+						'.*' + // previous selector path (ignore)
+						'(?=__)' + // positive lookahead to guarantee '__' is the next word
+						'__' + // required
+						'([A-Za-z_]+)' + // field name (model name underscored, singularized)
+						'([\\d]+)?' + // optional (digit, e.g. eq_engine_model1_id)
+						'_id/(combo/)?tree' + // required
+					'$', // end
+		regex = new RegExp(pattern),
+		match = treePath.match(regex);
+	if (!match) {
+		// try to match with something like '.../work_orders__equipment/combo/tree"'
+		pattern = '^' + // start
+						'.*' + // previous selector path (ignore)
+						'(?=__)' + // positive lookahead to guarantee '__' is the next word
+						'__' + // required
+						'([A-Za-z_]+)' + // field name (model name underscored, pluralized)
+						'/(combo/)?tree' + // required
+					'$', // end
+		regex = new RegExp(pattern);
+		match = treePath.match(regex);
+	}
+	return match?.length ? match[1] : null;
+}
+export function getModelFromTreeSelector(treeSelector) {
+	const treeName = getLastPartOfPath(treeSelector);
+	let model = getModelFromTreeName(treeName);
+	if (!model) {
+		model = getModelFromTreePath(treeSelector);
+		if (model) {
+			model = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+		}
+	}
+	return model;
+}
+export function getTreeNodeSelectorById(treeSelector, id) {
+	const
+		model = getModelFromTreeSelector(treeSelector);
+
+		if (!model) {
+			debugger;
+		}
+		const inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+	return inflected + '-' + id;
+}