@onehat/ui 0.4.34 → 0.4.37

package/src/Components/Hoc/withEditor.js

@@ -13,6 +13,7 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js'
 import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -76,6 +77,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			forceUpdate = useForceUpdate(),
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			newEntityDisplayValueRef = useRef(),
@@ -128,7 +130,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return editorModeRef.current;
 			},
 			setEditorMode = (mode) => {
-				editorModeRef.current = mode;
+				if (editorModeRef.current !== mode) {
+					editorModeRef.current = mode;
+					forceUpdate();
+				}
 			},
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;

package/src/Components/Hoc/withModal.js

@@ -33,6 +33,7 @@ export default function withModal(WrappedComponent) {
 			[okBtnLabel, setOkBtnLabel] = useState(),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
+			[onCancel, setOnCancel] = useState(),
 			[customButtons, setCustomButtons] = useState(),
 			[body, setBody] = useState(),
 			[whichModal, setWhichModal] = useState(),
@@ -40,9 +41,6 @@ export default function withModal(WrappedComponent) {
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
 			[windowWidth, windowHeight] = useAdjustedWindowSize(w, h),
-			onCancel = () => {
-				hideModal();
-			},
 			hideModal = () => {
 				setIsModalShown(false);
 			},
@@ -52,6 +50,7 @@ export default function withModal(WrappedComponent) {
 					body = null,
 					canClose = false,
 					includeCancel = false,
+					onCancel = null,
 					onOk = null,
 					okBtnLabel = null,
 					onYes = null,
@@ -76,6 +75,7 @@ export default function withModal(WrappedComponent) {
 				setBody(body);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
+				setOnCancel(() => onCancel);
 				setOnOk(onOk ? () => onOk : null);
 				setOkBtnLabel(okBtnLabel || 'OK');
 				setOnYes(onYes ? () => onYes : null);
@@ -101,7 +101,7 @@ export default function withModal(WrappedComponent) {
 				buttons.push(<Button
 									{...testProps('cancelBtn')}
 									key="cancelBtn"
-									onPress={onCancel}
+									onPress={onCancel || hideModal}
 									colorScheme="coolGray"
 									ref={cancelRef}
 									className="mr-2"
@@ -180,7 +180,7 @@ export default function withModal(WrappedComponent) {
 						{...props}
 						disableWithModal={false}
 						showModal={showModal}
-						hideModal={onCancel}
+						hideModal={onCancel || hideModal}
 						updateModalBody={updateModalBody}
 						isModalShown={isModalShown}
 						whichModal={whichModal}

package/src/Components/Hoc/withPdfButtons.js

@@ -11,7 +11,6 @@ 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) {

package/src/Components/Hoc/withSelection.js

@@ -23,8 +23,7 @@ export default function withSelection(WrappedComponent) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
-		const
-			{
+		const {
 				selection,
 				defaultSelection,
 				onChangeSelection,
@@ -120,7 +119,9 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			deselectAll = () => {
-				setSelection([]);
+				if (!_.isEmpty(getSelection())) {
+					setSelection([]);
+				}
 			},
 			refreshSelection = () => {
 				// When Repository reloads, the entities get destroyed.

package/src/Components/Report/Report.js

@@ -33,12 +33,9 @@ function Report(props) {
 			title,
 			description,
 			reportId,
-			// icon,
 			disablePdf = false,
 			disableExcel = false,
-			includePresets = false,
 			showReportHeaders = true,
-			h = '300px',
 		} = props,
 		buttons = [];
 
@@ -68,6 +65,7 @@ function Report(props) {
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
 			}),
+			disabledOnInvalid: true,
 		});
 	}
 	if (!disablePdf) {
@@ -82,6 +80,7 @@ function Report(props) {
 				reportType: REPORT_TYPES__PDF,
 				showReportHeaders,
 			}),
+			disableOnInvalid: true,
 		});
 	}
 	return <VStackNative

package/src/Components/Viewer/Viewer.js

@@ -234,7 +234,12 @@ function Viewer(props) {
 				}
 			}
 
-			let elementClassName = 'Viewer-field-' + name;
+			let elementClassName = `
+				Viewer-field
+				basis-auto
+				grow
+				shrink
+			`;
 			const defaultsClassName = defaults.className;
 			if (defaultsClassName) {
 				elementClassName += ' ' + defaultsClassName;

package/src/Functions/Cypress/dom_functions.js

@@ -39,11 +39,21 @@ 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`);
+			throw new Error(`Element with selectors ${selectorString} exists in the DOM, when it should not`);
 		}
 	});
 }
 
+/**
+ * Verifies that an element with the given selectors exists 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 verifyElementExists(selectors) {
+	cy.get(getTestIdSelectors(selectors)).should('exist');
+}
+
 /**
  * Builds selector string for data-testid attributes.
  * It leaves classname, id, and attribute selectors unchanged.
@@ -103,13 +113,21 @@ export function drag(draggableSelectors, droppableSelectors, options = {}) {
 			});
 }
 
+
+// conditions functions that make use of cypress-if
 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
+	return getDomNode([...parentSelectors, name]).if().then((node) => {
 		if (node) {
 			cb(node);
 		}
 	});
 }
+export function ifNotExists(parentSelectors, name, cb) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).if('not.exist').then(cb);
+}

package/src/Functions/Cypress/form_functions.js

@@ -274,100 +274,100 @@ export function setInputValue(selectors, value) {
 	setTextValue(selectors, value);
 }
 
+/**
+ * Given a form,
+ * return a url-encoded string representing all keys and values
+ *
+ * @param {jQuery} form
+ * @return {String}
+ * /
+export function formSerialize(form) {
+	'use strict';
+	var i, j, len, jLen, formElement, 
+		q = [],
+		theForm = form[0],
+		varCounters = {};
+
+	function addNameValue(name, value) { // create this function so I can use varCounters for 
+		var matches = name.match(/([\w\d]+)\[\]/i),
+			varName,
+			ix = 0;
+		if (matches && matches[1]) {
+			varName = matches[1];
+			if (typeof varCounters[varName] === 'undefined') {
+				varCounters[varName] = ix;
+			} else {
+				ix = ++varCounters[varName];
+			}
+			name = varName + '[' + ix + ']';
+		}
+		q.push(urlencode(name) + '=' + urlencode(value));
+	}
 
-// /**
-//  * Given a form,
-//  * return a url-encoded string representing all keys and values
-//  *
-//  * @param {jQuery} form
-//  * @return {String}
-//  */
-// export function formSerialize(form) {
-// 	'use strict';
-// 	var i, j, len, jLen, formElement, 
-// 		q = [],
-// 		theForm = form[0],
-// 		varCounters = {};
-
-// 	function addNameValue(name, value) { // create this function so I can use varCounters for 
-// 		var matches = name.match(/([\w\d]+)\[\]/i),
-// 			varName,
-// 			ix = 0;
-// 		if (matches && matches[1]) {
-// 			varName = matches[1];
-// 			if (typeof varCounters[varName] === 'undefined') {
-// 				varCounters[varName] = ix;
-// 			} else {
-// 				ix = ++varCounters[varName];
-// 			}
-// 			name = varName + '[' + ix + ']';
-// 		}
-// 		q.push(urlencode(name) + '=' + urlencode(value));
-// 	}
-
-// 	if (!theForm || !theForm.nodeName || theForm.nodeName.toLowerCase() !== 'form') {
-// 		throw 'You must supply a form element';
-// 	}
-// 	for (i = 0, len = theForm.elements.length; i < len; i++) {
-// 		formElement = theForm.elements[i];
-// 		if (formElement.name === '' || formElement.disabled) {
-// 			continue;
-// 		}
-// 		switch (formElement.nodeName.toLowerCase()) {
-// 			case 'input':
-// 				switch (formElement.type) {
-// 					case 'text':
-// 					case 'hidden':
-// 					case 'password':
-// 					case 'button': // Not submitted when submitting form manually, though jQuery does serialize this and it can be an HTML4 successful control
-// 					case 'submit':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 					case 'checkbox':
-// 					case 'radio':
-// 						if (formElement.checked) {
-// 							addNameValue(formElement.name, formElement.value);
-// 						} else if (formElement.value === '1') {
-// 							addNameValue(formElement.name, '0'); // Submit actual value of zero for booleans, instead of no value at all
-// 						}
-// 						break;
-// 					case 'file':
-// 						// addNameValue(formElement.name, formElement.value); // Will work and part of HTML4 "successful controls", but not used in jQuery
-// 						break;
-// 					case 'reset':
-// 						break;
-// 				}
-// 				break;
-// 			case 'textarea':
-// 				addNameValue(formElement.name, formElement.value);
-// 				break;
-// 			case 'select':
-// 				switch (formElement.type) {
-// 					case 'select-one':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 					case 'select-multiple':
-// 						for (j = 0, jLen = formElement.options.length; j < jLen; j++) {
-// 							if (formElement.options[j].selected) {
-// 								addNameValue(formElement.name, formElement.options[j].value);
-// 							}
-// 						}
-// 						break;
-// 				}
-// 				break;
-// 			case 'button': // jQuery does not submit these, though it is an HTML4 successful control
-// 				switch (formElement.type) {
-// 					case 'reset':
-// 					case 'submit':
-// 					case 'button':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 				}
-// 				break;
-// 		}
-// 	}
-// 	return q.join('&');
-// }
+	if (!theForm || !theForm.nodeName || theForm.nodeName.toLowerCase() !== 'form') {
+		throw 'You must supply a form element';
+	}
+	for (i = 0, len = theForm.elements.length; i < len; i++) {
+		formElement = theForm.elements[i];
+		if (formElement.name === '' || formElement.disabled) {
+			continue;
+		}
+		switch (formElement.nodeName.toLowerCase()) {
+			case 'input':
+				switch (formElement.type) {
+					case 'text':
+					case 'hidden':
+					case 'password':
+					case 'button': // Not submitted when submitting form manually, though jQuery does serialize this and it can be an HTML4 successful control
+					case 'submit':
+						addNameValue(formElement.name, formElement.value);
+						break;
+					case 'checkbox':
+					case 'radio':
+						if (formElement.checked) {
+							addNameValue(formElement.name, formElement.value);
+						} else if (formElement.value === '1') {
+							addNameValue(formElement.name, '0'); // Submit actual value of zero for booleans, instead of no value at all
+						}
+						break;
+					case 'file':
+						// addNameValue(formElement.name, formElement.value); // Will work and part of HTML4 "successful controls", but not used in jQuery
+						break;
+					case 'reset':
+						break;
+				}
+				break;
+			case 'textarea':
+				addNameValue(formElement.name, formElement.value);
+				break;
+			case 'select':
+				switch (formElement.type) {
+					case 'select-one':
+						addNameValue(formElement.name, formElement.value);
+						break;
+					case 'select-multiple':
+						for (j = 0, jLen = formElement.options.length; j < jLen; j++) {
+							if (formElement.options[j].selected) {
+								addNameValue(formElement.name, formElement.options[j].value);
+							}
+						}
+						break;
+				}
+				break;
+			case 'button': // jQuery does not submit these, though it is an HTML4 successful control
+				switch (formElement.type) {
+					case 'reset':
+					case 'submit':
+					case 'button':
+						addNameValue(formElement.name, formElement.value);
+						break;
+				}
+				break;
+		}
+	}
+	return q.join('&');
+}
+*/
 
 
 
@@ -377,94 +377,100 @@ export function setInputValue(selectors, value) {
 // / /_/ /  __/ /_/ /_/  __/ /  (__  )
 // \____/\___/\__/\__/\___/_/  /____/
 
-// /**
-//  * Get data from a form
-//  * @param {object} schema - fieldName/fieldType pairs
-//  * @returns {object} formValues - object of fieldName/value pairs
-//  */
-// export function getFormValues(editor, schema) {
-// 	const fields = editor.find('.x-form-field'),
-// 		formValues = {};
-
-// 	_.each(fields, (field) => {
-// 		const fieldType = schema[field.name];
-// 		switch(fieldType) {
-// 			case 'checkbox':
-// 				formValues[fieldName] = getCheckboxValue(fieldName);
-// 				break;
-// 			case 'combo':
-// 				formValues[fieldName] = getComboValue(fieldName);
-// 				break;
-// 			case 'date':
-// 				formValues[fieldName] = getDateValue(fieldName);
-// 				break;
-// 			case 'datetime':
-// 				formValues[fieldName] = getDatetimeValue(fieldName);
-// 				break;
-// 			case 'file':
-// 				formValues[fieldName] = getFileValue(fieldName);
-// 				break;
-// 			case 'number':
-// 				formValues[fieldName] = getNumberValue(fieldName);
-// 				break;
-// 			case 'radio':
-// 				formValues[fieldName] = getRadioValue(fieldName);
-// 				break;
-// 			case 'tag':
-// 				formValues[fieldName] = getTagValue(fieldName);
-// 				break;
-// 			case 'text':
-// 			case 'textarea':
-// 				formValues[fieldName] = getTextValue(fieldName);
-// 				break;
-// 			case 'time':
-// 				formValues[fieldName] = getTimeValue(fieldName);
-// 				break;
-// 		}
-// 	});
-// 	return formValues;
-// }
+/**
+ * Get data from a form
+ * @param {object} schema - fieldName/fieldType pairs
+ * @returns {object} formValues - object of fieldName/value pairs
+ * /
+export function getFormValues(editor, schema) {
+	const fields = editor.find('.x-form-field'),
+		formValues = {};
+
+	_.each(fields, (field) => {
+		const fieldType = schema[field.name];
+		switch(fieldType) {
+			case 'checkbox':
+				formValues[fieldName] = getCheckboxValue(fieldName);
+				break;
+			case 'combo':
+				formValues[fieldName] = getComboValue(fieldName);
+				break;
+			case 'date':
+				formValues[fieldName] = getDateValue(fieldName);
+				break;
+			case 'datetime':
+				formValues[fieldName] = getDatetimeValue(fieldName);
+				break;
+			case 'file':
+				formValues[fieldName] = getFileValue(fieldName);
+				break;
+			case 'number':
+				formValues[fieldName] = getNumberValue(fieldName);
+				break;
+			case 'radio':
+				formValues[fieldName] = getRadioValue(fieldName);
+				break;
+			case 'tag':
+				formValues[fieldName] = getTagValue(fieldName);
+				break;
+			case 'text':
+			case 'textarea':
+				formValues[fieldName] = getTextValue(fieldName);
+				break;
+			case 'time':
+				formValues[fieldName] = getTimeValue(fieldName);
+				break;
+		}
+	});
+	return formValues;
+}
+*/
 
 
-// /**
-//  * Validate that form values match what they're supposed to
-//  */
-// export function validateFormValues(data, schema) {
-// 	cy.wrap().then(() => { // Wrap this in a Cypress promise, so it executes in correct order, relative to other Cypress promises
-
-// 		const formValues = getFormValues(schema);
-// 		let diff = deepDiffObj(formValues, data);
-
-// 		// SPECIAL CASE: Omit password fields from diff
-// 		const omitFields = [];
-// 		_.each(diff, (value, key) => {
-// 			if (key.match(/^password/i)) {
-// 				omitFields.push(key);
-// 			}
-// 		});
-// 		if (omitFields.length) {
-// 			diff = _.omit(diff, omitFields);
-// 		}
+/**
+ * Validate that form values match what they're supposed to
+ * /
+export function validateFormValues(data, schema) {
+	cy.wrap().then(() => { // Wrap this in a Cypress promise, so it executes in correct order, relative to other Cypress promises
+
+		const formValues = getFormValues(schema);
+		let diff = deepDiffObj(formValues, data);
+
+		// SPECIAL CASE: Omit password fields from diff
+		const omitFields = [];
+		_.each(diff, (value, key) => {
+			if (key.match(/^password/i)) {
+				omitFields.push(key);
+			}
+		});
+		if (omitFields.length) {
+			diff = _.omit(diff, omitFields);
+		}
 		
-// 		// If there are still any differences, log them
-// 		if (_.keys(diff).length > 0) {
-// 			console.log('data', data);
-// 			console.log('formValues', formValues);
-// 			console.log('diff', diff);
-// 		}
-
-// 		expect(diff).to.deep.equal({});
-// 	});
-// }
+		// If there are still any differences, log them
+		if (_.keys(diff).length > 0) {
+			console.log('data', data);
+			console.log('formValues', formValues);
+			console.log('diff', diff);
+		}
+
+		expect(diff).to.deep.equal({});
+	});
+}
+*/
 
 
 
 // export function getCheckboxValue(fieldName) {
 
 // }
-// export function getComboValue(fieldName) {
-	
-// }
+export function getComboValue(selectors, fieldName) {
+	cy.log('getComboValue ' + fieldName);
+	return getDomNode([...selectors, 'field-' + fieldName, 'input']).then((field) => {
+		return cy.wrap(field)
+				.invoke('val');
+	});
+}
 // export function getDateValue(fieldName) {
 	
 // }

package/src/Functions/Cypress/grid_functions.js

@@ -11,6 +11,15 @@ import _ from 'lodash';
 const $ = Cypress.$;
 
 
+// Get cells
+export function getGridCellValue(gridSelector, rowId, field) {
+	cy.log('getGridCellValue ' + gridSelector + ' ' + rowId + ' ' + field);
+	const rowSelector = getGridRowSelectorById(gridSelector, rowId);
+	return getDomNode([gridSelector, rowSelector, 'cell-' + field])
+				.invoke('text');
+}
+
+
 
 // Get rows
 export function hasRowWithFieldValue(gridSelector, field, value) {
@@ -56,12 +65,16 @@ export function selectGridRowIfNotAlreadySelectedById(gridSelector, id) {
 		}
 	})
 }
+export function selectGridRowByIx(gridSelector, ix) {
+	cy.log('selectGridRowByIx ' + gridSelector + ' ' + ix);
+	
+	ix++; // compensate for header row
+	getDomNode([gridSelector, '[data-ix=' + ix + ']'])
+		.click();
+}
 // export function selectRowWithText(grid, text) {
 // 	getRowWithText(grid, text).click(5, 5);
 // }
-// export function selectRowWithIx(grid, ix) {
-// 	getRowWithIx(grid, ix).click(5, 5);
-// }
 // export function cmdClickRowWithId(grid, id) {
 // 	getRowWithId(grid, id).click('left', { metaKey: true });
 // }
@@ -234,12 +247,8 @@ export function getModelFromGridSelector(gridSelector) {
 }
 export function getGridRowSelectorById(gridSelector, id) {
 	const
-		model = getModelFromGridSelector(gridSelector);
-
-		if (!model) {
-			debugger;
-		}
-		const inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+		model = getModelFromGridSelector(gridSelector),
+		inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
 	return inflected + '-' + id;
 }
 

package/src/Functions/buildAdditionalButtons.js

@@ -21,7 +21,6 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 				text,
 				icon,
 				isDisabled,
-				className: 'ml-2',
 				tooltip,
 				color,
 			};