orc-shared 5.9.0-dev.15 → 5.9.0-dev.18

package/dist/components/MaterialUI/Inputs/Switch.js

@@ -116,6 +116,16 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       "& + $track": {
         backgroundColor: "".concat(theme.palette.grey.borders, " !important")
       }
+    },
+    container: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    errorText: {
+      marginTop: theme.spacing(0.5),
+      color: theme.palette.error.main,
+      fontSize: theme.typography.fieldLabelSize,
+      float: "left"
     }
   };
 });
@@ -130,6 +140,7 @@ var Switch = function Switch(_ref) {
   var value = (switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.value)) || false;
   var onCaption = switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.onCaption);
   var offCaption = switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.offCaption);
+  var error = switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.error);
   var disabled = (switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.disabled)) || false;
   var readOnly = switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.readOnly);
   var className = (switchProps == null ? void 0 : switchProps.get(_SwitchProps.default.propNames.className)) || "";
@@ -149,7 +160,7 @@ var Switch = function Switch(_ref) {
     checked: classes.checked,
     disabled: classes.disabled
   }, className);
-  return /*#__PURE__*/_react.default.createElement(_Switch.default, {
+  var switchComponent = /*#__PURE__*/_react.default.createElement(_Switch.default, {
     disabled: disabled,
     classes: switchClasses,
     checked: value,
@@ -158,6 +169,11 @@ var Switch = function Switch(_ref) {
     },
     color: "primary"
   });
+  return error && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, switchComponent, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.errorText)
+  }, error)) || switchComponent;
 };
 __signature__(Switch, "useIntl{{ formatMessage }}\nuseStyles{classes}", function () {
   return [_reactIntl.useIntl, useStyles];

package/dist/components/MaterialUI/Inputs/SwitchProps.js

@@ -35,6 +35,7 @@ var SwitchProps = /*#__PURE__*/function (_ComponentProps) {
     _this.componentProps.set(_this.constructor.propNames.readOnly, null);
     _this.componentProps.set(_this.constructor.propNames.className, null);
     _this.componentProps.set(_this.constructor.propNames.id, null);
+    _this.componentProps.set(_this.constructor.propNames.error, null);
     _this.componentProps.set(_this.constructor.propNames.metadata, null);
     _this._isSwitchProps = true;
     return _this;
@@ -57,6 +58,7 @@ _defineProperty(SwitchProps, "propNames", {
   readOnly: "readOnly",
   className: "className",
   id: "id",
+  error: "error",
   metadata: "metadata"
 });
 var isSwitchProps = exports.isSwitchProps = function isSwitchProps(value) {

package/dist/components/MaterialUI/Navigation/DropDownMenu.js

@@ -78,6 +78,13 @@ var DropDownMenu = function DropDownMenu(_ref) {
     event.stopPropagation();
     setAnchorEl(null);
   };
+
+  // Even though we do nothing, we need to avoid mouse event propagation when the mouse
+  // button is released after hovering out the menu
+  var onMainMenuClick = function onMainMenuClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
   var onMenuItemClick = function onMenuItemClick(action, itemContext) {
     return function (event) {
       onClose(event);
@@ -110,6 +117,7 @@ var DropDownMenu = function DropDownMenu(_ref) {
     },
     id: "scope-menu",
     open: isOpened,
+    onClick: onMainMenuClick,
     onClose: onClose,
     autoFocus: autoFocus,
     anchorEl: anchorEl

package/dist/hooks/useMultipleFieldEditState.js

@@ -49,11 +49,14 @@ var useMultipleFieldEditState = function useMultipleFieldEditState(entityId, sec
   var dispatch = (0, _useDispatchWithModulesData.useDispatchWithModulesData)();
   var mergedValidationRules = _objectSpread(_objectSpread({}, _modelValidationHelper.validationRules), extendedValidationRules);
   var modifiedStates = (0, _reactRedux.useSelector)((0, _view.getModifiedModels)(entityId))[sectionName] || {};
-  var useDynamicFieldState = function useDynamicFieldState(id, fieldName, errorTypes) {
+  var useDynamicFieldState = function useDynamicFieldState(id, fieldName, errorTypes, fieldDependencies) {
     var _initialValues$id$fie, _initialValues$id, _modifiedStates$id$fi, _modifiedStates$id, _editState$value;
     if (errorTypes === void 0) {
       errorTypes = [];
     }
+    if (fieldDependencies === void 0) {
+      fieldDependencies = {};
+    }
     var keys = [id, fieldName];
     var initialValue = (_initialValues$id$fie = (_initialValues$id = initialValues[id]) == null ? void 0 : _initialValues$id[fieldName]) != null ? _initialValues$id$fie : "";
     var editState = (_modifiedStates$id$fi = (_modifiedStates$id = modifiedStates[id]) == null ? void 0 : _modifiedStates$id[fieldName]) != null ? _modifiedStates$id$fi : {};
@@ -65,17 +68,23 @@ var useMultipleFieldEditState = function useMultipleFieldEditState(entityId, sec
     var resetEditState = function resetEditState() {
       dispatch(_view2.setEditModelField, [keys, initialValue, initialValue, entityId, sectionName]);
     };
-    var isEditStateValid = function isEditStateValid(value) {
+    var isEditStateValid = function isEditStateValid(value, dependencies) {
+      if (dependencies === void 0) {
+        dependencies = {};
+      }
       var valueToValidate = value != null ? value : editState.value;
       var hasAnyValidationErrors = false;
       errorTypes.forEach(function (errorType) {
-        var isValid = mergedValidationRules[errorType](valueToValidate, id, fieldName);
+        var isValid = mergedValidationRules[errorType](valueToValidate, id, fieldName, _objectSpread(_objectSpread({}, fieldDependencies), dependencies));
         if (isValid === false) {
           dispatch(_view2.setEditModelFieldError, [keys, errorType, entityId, sectionName]);
           hasAnyValidationErrors = true;
           return;
         }
       });
+      if (!hasAnyValidationErrors) {
+        dispatch(_view2.removeEditModelFieldError, [keys, entityId, sectionName]);
+      }
       return !hasAnyValidationErrors;
     };
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.9.0-dev.15",
+	"version": "5.9.0-dev.18",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/Inputs/Switch.js

@@ -87,6 +87,16 @@ export const useStyles = makeStyles(theme => ({
 			backgroundColor: `${theme.palette.grey.borders} !important`,
 		},
 	},
+	container: {
+		display: "flex",
+		flexDirection: "column",
+	},
+	errorText: {
+		marginTop: theme.spacing(0.5),
+		color: theme.palette.error.main,
+		fontSize: theme.typography.fieldLabelSize,
+		float: "left",
+	},
 }));
 
 const Switch = ({ switchProps }) => {
@@ -100,6 +110,7 @@ const Switch = ({ switchProps }) => {
 	const value = switchProps?.get(SwitchProps.propNames.value) || false;
 	const onCaption = switchProps?.get(SwitchProps.propNames.onCaption);
 	const offCaption = switchProps?.get(SwitchProps.propNames.offCaption);
+	const error = switchProps?.get(SwitchProps.propNames.error);
 	const disabled = switchProps?.get(SwitchProps.propNames.disabled) || false;
 	const readOnly = switchProps?.get(SwitchProps.propNames.readOnly);
 	const className = switchProps?.get(SwitchProps.propNames.className) || "";
@@ -120,7 +131,7 @@ const Switch = ({ switchProps }) => {
 		...className,
 	};
 
-	return (
+	const switchComponent = (
 		<SwitchMui
 			disabled={disabled}
 			classes={switchClasses}
@@ -129,6 +140,16 @@ const Switch = ({ switchProps }) => {
 			color={"primary"}
 		/>
 	);
+
+	return (
+		(error && (
+			<div className={classes.container}>
+				{switchComponent}
+				<div className={classNames(classes.errorText)}>{error}</div>
+			</div>
+		)) ||
+		switchComponent
+	);
 };
 
 export default Switch;

package/src/components/MaterialUI/Inputs/Switch.test.js

@@ -60,6 +60,29 @@ describe("Switch Component", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 
+	it("Renders Switch component with an error", () => {
+		const switchProps = new SwitchProps();
+
+		switchProps.set(SwitchProps.propNames.update, update);
+		switchProps.set(SwitchProps.propNames.value, true);
+		switchProps.set(SwitchProps.propNames.error, "an error");
+		switchProps.set(SwitchProps.propNames.onCaption, { id: "captionOn" });
+		switchProps.set(SwitchProps.propNames.offCaption, { id: "captionOff" });
+
+		const component = (
+			<IntlProvider messages={messages} locale="en-US">
+				<Switch switchProps={switchProps} />
+			</IntlProvider>
+		);
+
+		const mountedComponent = mount(component);
+		const expectedSwitch = <SwitchMUI checked={true} />;
+		const expectedError = <div>an error</div>;
+
+		expect(mountedComponent.containsMatchingElement(expectedSwitch), "to be truthy");
+		expect(mountedComponent.containsMatchingElement(expectedError), "to be truthy");
+	});
+
 	it("Checkbox component handles check", () => {
 		const switchProps = new SwitchProps();
 

package/src/components/MaterialUI/Inputs/SwitchProps.js

@@ -10,6 +10,7 @@ class SwitchProps extends ComponentProps {
 		readOnly: "readOnly",
 		className: "className",
 		id: "id",
+		error: "error",
 		metadata: "metadata",
 	};
 
@@ -23,6 +24,7 @@ class SwitchProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.readOnly, null);
 		this.componentProps.set(this.constructor.propNames.className, null);
 		this.componentProps.set(this.constructor.propNames.id, null);
+		this.componentProps.set(this.constructor.propNames.error, null);
 		this.componentProps.set(this.constructor.propNames.metadata, null);
 
 		this._isSwitchProps = true;

package/src/components/MaterialUI/Inputs/SwitchProps.test.js

@@ -11,6 +11,7 @@ describe("Switch Props", () => {
 			"readOnly",
 			"className",
 			"id",
+			"error",
 			"metadata",
 		];
 
@@ -27,6 +28,7 @@ describe("Switch Props", () => {
 			"readOnly",
 			"className",
 			"id",
+			"error",
 			"metadata",
 		];
 

package/src/components/MaterialUI/Navigation/DropDownMenu.js

@@ -47,6 +47,13 @@ const DropDownMenu = ({ payload, menuItems, children, dropDownMenuProps = new Dr
 		setAnchorEl(null);
 	};
 
+	// Even though we do nothing, we need to avoid mouse event propagation when the mouse
+	// button is released after hovering out the menu
+	const onMainMenuClick = event => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
 	const onMenuItemClick = (action, itemContext) => event => {
 		onClose(event);
 		action(payload, itemContext);
@@ -76,6 +83,7 @@ const DropDownMenu = ({ payload, menuItems, children, dropDownMenuProps = new Dr
 				classes={{ paper: classes.menu }}
 				id="scope-menu"
 				open={isOpened}
+				onClick={onMainMenuClick}
 				onClose={onClose}
 				autoFocus={autoFocus}
 				anchorEl={anchorEl}

package/src/components/MaterialUI/Navigation/DropDownMenu.test.js

@@ -8,6 +8,7 @@ import Icon from "../DataDisplay/Icon";
 import DropDownMenu from "./DropDownMenu";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
+import Menu from "@material-ui/core/Menu";
 
 describe("DropDownMenu", () => {
 	let store, menuItems, container;
@@ -92,4 +93,27 @@ describe("DropDownMenu", () => {
 		expect(menuItems[0].action, "to have calls satisfying", [{ args: [payload, "aContext"] }]);
 		expect(menuItems[1].action, "to have calls satisfying", [{ args: [payload, "myContext"] }]);
 	});
+
+	it("should handle onClick event on the menu", () => {
+		const payload = "payload";
+
+		const component = (
+			<Provider store={store}>
+				<DropDownMenu payload={payload} menuItems={menuItems} />
+			</Provider>
+		);
+
+		const mountedComponent = mount(component);
+
+		const event = {
+			preventDefault: sinon.spy().named("preventDefault"),
+			stopPropagation: sinon.spy().named("stopPropagation"),
+		};
+
+		const dropDownMenu = mountedComponent.find(Menu).at(0);
+		dropDownMenu.invoke("onClick")(event);
+
+		expect(event.preventDefault, "was called");
+		expect(event.stopPropagation, "was called");
+	});
 });

package/src/hooks/useMultipleFieldEditState.js

@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 import { validationRules } from "../utils/modelValidationHelper";
 import { getModifiedModels } from "../selectors/view";
-import { setEditModelField, setEditModelFieldError } from "../actions/view";
+import { setEditModelField, setEditModelFieldError, removeEditModelFieldError } from "../actions/view";
 import { useDispatchWithModulesData } from "./../hooks/useDispatchWithModulesData";
 
 /* This hook is used when a component has a dynamic number of fields that can be edited (e.g.: Orders' Custom Configuration Parameters).
@@ -25,7 +25,7 @@ const useMultipleFieldEditState = (entityId, sectionName, initialValues, extende
 	const mergedValidationRules = { ...validationRules, ...extendedValidationRules };
 	const modifiedStates = useSelector(getModifiedModels(entityId))[sectionName] || {};
 
-	const useDynamicFieldState = (id, fieldName, errorTypes = []) => {
+	const useDynamicFieldState = (id, fieldName, errorTypes = [], fieldDependencies = {}) => {
 		const keys = [id, fieldName];
 
 		const initialValue = initialValues[id]?.[fieldName] ?? "";
@@ -42,12 +42,15 @@ const useMultipleFieldEditState = (entityId, sectionName, initialValues, extende
 			dispatch(setEditModelField, [keys, initialValue, initialValue, entityId, sectionName]);
 		};
 
-		const isEditStateValid = value => {
+		const isEditStateValid = (value, dependencies = {}) => {
 			const valueToValidate = value ?? editState.value;
 
 			let hasAnyValidationErrors = false;
 			errorTypes.forEach(errorType => {
-				const isValid = mergedValidationRules[errorType](valueToValidate, id, fieldName);
+				const isValid = mergedValidationRules[errorType](valueToValidate, id, fieldName, {
+					...fieldDependencies,
+					...dependencies,
+				});
 
 				if (isValid === false) {
 					dispatch(setEditModelFieldError, [keys, errorType, entityId, sectionName]);
@@ -57,6 +60,10 @@ const useMultipleFieldEditState = (entityId, sectionName, initialValues, extende
 				}
 			});
 
+			if (!hasAnyValidationErrors) {
+				dispatch(removeEditModelFieldError, [keys, entityId, sectionName]);
+			}
+
 			return !hasAnyValidationErrors;
 		};
 

package/src/hooks/useMultipleFieldEditState.test.js

@@ -5,7 +5,7 @@ import Immutable from "immutable";
 import sinon from "sinon";
 import { mount } from "enzyme";
 import * as useDispatchWithModulesDataMock from "./useDispatchWithModulesData";
-import { setEditModelField, setEditModelFieldError } from "./../actions/view";
+import { removeEditModelFieldError, setEditModelField, setEditModelFieldError } from "./../actions/view";
 import { validationErrorTypes } from "./../constants";
 import _ from "lodash";
 
@@ -404,6 +404,54 @@ describe("useMultipleFieldEditState", () => {
 		}
 	});
 
+	it("Updates edit view value and reset error correctly with custom validation rules when validation was passed", () => {
+		const useDispatchWithModulesDataSpy = sinon.spy();
+		const useDispatchWithModulesDataStub = sinon
+			.stub(useDispatchWithModulesDataMock, "useDispatchWithModulesData")
+			.returns(useDispatchWithModulesDataSpy);
+
+		try {
+			// TODOJOC
+			const mountedComponent = mountComponent();
+
+			const fieldComponent = mountedComponent.find(`#id1-prop1-update`);
+
+			const event = {
+				target: {
+					value: "anotherValue",
+				},
+			};
+
+			fieldComponent.invoke("onClick")(event);
+
+			const resetEvent = {
+				target: {
+					value: "custom",
+				},
+			};
+
+			fieldComponent.invoke("onClick")(resetEvent);
+
+			const id = "id1";
+			const fieldName = "prop1";
+			const initialFieldValue = fieldInitialValues[id][fieldName];
+
+			expect(useDispatchWithModulesDataSpy, "to have a call satisfying", {
+				args: [setEditModelField, [[id, fieldName], "anotherValue", initialFieldValue, entityId, sectionName]],
+			});
+
+			expect(useDispatchWithModulesDataSpy, "to have a call satisfying", {
+				args: [setEditModelFieldError, [[id, fieldName], "customRule", entityId, sectionName]],
+			});
+
+			expect(useDispatchWithModulesDataSpy, "to have a call satisfying", {
+				args: [removeEditModelFieldError, [[id, fieldName], entityId, sectionName]],
+			});
+		} finally {
+			useDispatchWithModulesDataStub.restore();
+		}
+	});
+
 	it.each([
 		["id1", "prop1"],
 		["id1", "prop2"],