orc-shared 1.6.0-dev.1 → 1.6.0-dev.10

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { mount } from "enzyme";
-import InputBase from "./InputBase";
+import InputBase, { AdvancedNumericInput } from "./InputBase";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import InputBaseProps from "./InputBaseProps";
 import { act } from "unexpected-reaction";
+import { fireEvent, render, getByDisplayValue } from "@testing-library/react";
 
 describe("InputBase Component", () => {
 	let update, container;
@@ -71,7 +72,7 @@ describe("InputBase Component", () => {
 		const component = <InputBase inputProps={inputProps} />;
 
 		const mountedComponent = mount(component);
-		const expected = <InputBaseMUI value={aValue} title={aValue} rows={defaultRows} />;
+		const expected = <InputBaseMUI value={aValue} title={aValue} minRows={defaultRows} />;
 
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
@@ -91,7 +92,7 @@ describe("InputBase Component", () => {
 		const component = <InputBase inputProps={inputProps} />;
 
 		const mountedComponent = mount(component);
-		const expected = <InputBaseMUI value={aValue} title={aValue} rows={desiredNumberOfRows} />;
+		const expected = <InputBaseMUI value={aValue} title={aValue} minRows={desiredNumberOfRows} />;
 
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
@@ -285,6 +286,35 @@ describe("InputBase Component", () => {
 
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
+
+	it("Change value on blur with pending timer", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("change", { target: { value: "13", focus: () => {} } });
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
+		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
+	});
 });
 
 describe("InputBase component debouce", () => {
@@ -350,3 +380,309 @@ describe("InputBase component debouce", () => {
 		expect(input.get(0).props.value, "to equal", "");
 	});
 });
+
+describe("AdvancedNumericInput", () => {
+	const noop = function () {};
+	let update, container;
+	beforeEach(() => {
+		window.bypassDebounce = true;
+		jest.useFakeTimers();
+
+		container = document.createElement("div");
+		document.body.appendChild(container);
+		update = sinon.spy().named("update");
+	});
+	afterEach(() => {
+		jest.useRealTimers();
+		delete window.bypassDebounce;
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it("Renders InputBase component as advanced numeric input", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+		const expected = <InputBaseMUI value={aValue} title="" inputComponent={AdvancedNumericInput} />;
+
+		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
+	});
+
+	it("Renders InputBase component as advanced numeric input with custom numeric props", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+	});
+
+	it("Change advanced numeric input value", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("change", { target: { value: "13", focus: noop } });
+
+		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur without custom blur method", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Onblur send a formatted string instead of a number", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Onblur send a formatted string with default numeric input props", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
+	});
+
+	it("Onblur send an unformatted string when blurFormattingSkipFixedDecimalScale is true", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, {
+			decimalScale: 2,
+			blurFormattingSkipFixedDecimalScale: true,
+		});
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
+	});
+
+	it("Onblur send an empty string when the initial value is empty", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = null;
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur with no pending timer", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur with pending timer", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("change", { target: { value: "13", focus: noop } });
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
+		expect(update, "to have calls satisfying", [{ args: ["13.00", metadata] }]);
+	});
+
+	it("Local state is reset when the value props changes for the same value as inputText", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const { container, rerender } = render(component);
+
+		const input = getByDisplayValue(container, "12.2");
+
+		fireEvent.change(input, {
+			target: {
+				value: "13",
+			},
+		});
+
+		const inputProps2 = new InputBaseProps();
+		inputProps2.set(InputBaseProps.propNames.update, update);
+		inputProps2.set(InputBaseProps.propNames.value, "13");
+		inputProps2.set(InputBaseProps.propNames.label, aLabel);
+		inputProps2.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps2.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps2.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps2.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps2.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		act(() => {
+			rerender(<InputBase inputProps={inputProps2} />);
+		});
+
+		// no idea what to assert here, this test is mostly for code coverage
+	});
+});

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

@@ -19,6 +19,7 @@ class InputBaseProps extends ComponentProps {
 		autoComplete: "autoComplete",
 		timeoutDelay: "timeoutDelay",
 		rows: "rows",
+		numericInputProps: "numericInputProps",
 	};
 
 	static ruleNames = {
@@ -45,6 +46,7 @@ class InputBaseProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.autoComplete, null);
 		this.componentProps.set(this.constructor.propNames.timeoutDelay, null);
 		this.componentProps.set(this.constructor.propNames.rows, null);
+		this.componentProps.set(this.constructor.propNames.numericInputProps, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.input, null);
 		this.componentClasses.set(this.constructor.ruleNames.errorText, null);

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

@@ -20,6 +20,7 @@ describe("InputBase Props", () => {
 			"autoComplete",
 			"timeoutDelay",
 			"rows",
+			"numericInputProps",
 		];
 
 		expect(InputBaseProps.propNames, "to have keys", propNames);
@@ -44,6 +45,7 @@ describe("InputBase Props", () => {
 			"autoComplete",
 			"timeoutDelay",
 			"rows",
+			"numericInputProps",
 		];
 
 		const ruleNames = ["input", "errorText"];

package/src/components/Routing/Page.js

@@ -4,9 +4,12 @@ import withErrorBoundary from "../../hocs/withErrorBoundary";
 import FullPage from "./FullPage";
 import SubPage from "./SubPage";
 import withWaypointing from "./withWaypointing";
+import UrlPattern from "url-pattern";
 
 const Page = ({ component: View, path, pages = {}, subpages = {}, modulePrependPath, isVisible = true }) => {
 	const WrappedView = useMemo(() => withErrorBoundary(path)(withWaypointing(View, isVisible)), [path, View, isVisible]);
+	const parentUrlPattern = new UrlPattern(path);
+
 	return (
 		<React.Fragment>
 			<Switch>
@@ -38,7 +41,15 @@ const Page = ({ component: View, path, pages = {}, subpages = {}, modulePrependP
 					<Route
 						key={subpath}
 						path={path + subpath}
-						render={route => <SubPage root={path} config={config} {...route} modulePrependPath={modulePrependPath} />}
+						render={route => (
+							<SubPage
+								root={path}
+								config={config}
+								parentUrlPattern={parentUrlPattern}
+								{...route}
+								modulePrependPath={modulePrependPath}
+							/>
+						)}
 					/>
 				))}
 			</Switch>

package/src/components/Routing/SegmentPage.js

@@ -197,6 +197,9 @@ const SegmentPage = ({
 			);
 		}
 		if (config.subpages) {
+			const parentUrl = path + segpath;
+			const parentUrlPattern = new UrlPattern(parentUrl);
+
 			subpages.push(
 				...Object.entries(config.subpages).map(([subpath, config]) => {
 					const pagePath = segpath + subpath;
@@ -204,7 +207,15 @@ const SegmentPage = ({
 						<Route
 							key={pagePath}
 							path={path + pagePath}
-							render={route => <SubPage root={path} config={config} {...route} modulePrependPath={modulePrependPath} />}
+							render={route => (
+								<SubPage
+									root={path}
+									config={config}
+									parentUrlPattern={parentUrlPattern}
+									{...route}
+									modulePrependPath={modulePrependPath}
+								/>
+							)}
 						/>
 					);
 				}),

package/src/components/Routing/SubPage.js

@@ -20,22 +20,19 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-export const SubPage = ({ config, match, location, history, root, modulePrependPath }) => {
+export const SubPage = ({ config, match, location, history, root, modulePrependPath, parentUrlPattern }) => {
 	const classes = useStyles();
 	const dispatch = useDispatch();
 	let { component: View, ...props } = config;
 	const pattern = new UrlPattern(root);
 	const baseHref = pattern.stringify(match.params);
-
 	const path = location.pathname;
 
-	const basePathArr = path.split("/");
-	basePathArr.pop();
-	const basePath = basePathArr.join("/");
 	const WrappedView = useMemo(() => withErrorBoundary(path)(withWaypointing(View)), [path, View]);
 	const closeSubPage = () => {
-		history.push(basePath);
-		dispatch(mapHref(basePath, basePath));
+		const parentHref = parentUrlPattern.stringify(match.params);
+		history.push(parentHref);
+		dispatch(mapHref(parentHref, parentHref));
 	};
 
 	const message = (
@@ -59,7 +56,6 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 	modalProps.set(ModalProps.propNames.title, titleComponent);
 	modalProps.set(ModalProps.propNames.open, true);
 	modalProps.set(ModalProps.propNames.type, "fullwidth");
-	modalProps.set(ModalProps.propNames.backdropClickCallback, closeSubPage);
 
 	let actionPanel = (
 		<div className={classes.actionPanel}>

package/src/components/Routing/SubPage.test.js

@@ -13,6 +13,7 @@ import Button from "@material-ui/core/Button";
 import translations from "~/translations/en-US.json";
 import { TestWrapper, createMuiTheme } from "../../utils/testUtils";
 import sharedMessages from "../../sharedMessages";
+import UrlPattern from "url-pattern";
 
 const InnerView = ({ theme, pathname, search, mapFrom, match, location, routeIsAligned, set }) => (
 	<PropStruct
@@ -92,6 +93,7 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: "Item Details" }}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -140,6 +142,7 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: sharedMessages.confirmation }}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -164,6 +167,7 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: "Item Details" }}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -180,6 +184,42 @@ describe("SubPage", () => {
 		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
 		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
 	});
+	it("closing the dialog navigate to the parentUrlPattern with parameters", () => {
+		history = createMemoryHistory({ initialEntries: ["/foo/bar/123/456"] });
+		sinon.spy(history, "push");
+		history.push.named("history.push");
+		dispatch.resetHistory();
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<div id="outer" />
+					<Router history={history}>
+						<Route
+							path="/foo/bar/:parentId/:id"
+							render={route => (
+								<SubPage
+									config={{ component: InnerView, set: true, title: "Item Details" }}
+									root="/foo/bar/:parentId/:id"
+									path="/foo/bar/123/456"
+									parentUrlPattern={new UrlPattern("/foo/bar/:parentId")}
+									{...route}
+								/>
+							)}
+						/>
+					</Router>
+				</div>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const closeButton = mountedComponent.find("button").at(0);
+
+		closeButton.invoke("onClick")();
+		expect(history.push, "to have calls satisfying", [{ args: ["/foo/bar/123"] }]);
+		expect(dispatch, "to have a call satisfying", { args: [mapHref("/foo/bar/123", "/foo/bar/123")] });
+	});
+
 	it("renders action panel passed from props", () => {
 		const actions = () => [{ label: sharedMessages.cancel }, { label: sharedMessages.applyChanges }];
 
@@ -200,6 +240,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -242,6 +283,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -286,6 +328,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -327,6 +370,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -368,6 +412,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -411,6 +456,7 @@ describe("SubPage", () => {
 									}}
 									root="/foo"
 									path="/foo/bar"
+									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}

package/src/hooks/useDispatchWithErrorHandling.js

@@ -0,0 +1,57 @@
+import { useDispatch } from "react-redux";
+import { useCallback } from "react";
+import { extractStandardErrorMessagesFromResponse } from "../utils/responseProcessingHelper";
+import { pushGlobalErrorMessage } from "../actions/globalErrorMessages";
+
+export const executeDispatchWithErrorHandling = ({
+	dispatch,
+	action,
+	errorTitle,
+	errorDescription,
+	validationLookupModule,
+	validationLookupName,
+}) => {
+	return dispatch(action).then(data => {
+		const extractedMessages = extractStandardErrorMessagesFromResponse(
+			data,
+			validationLookupModule,
+			validationLookupName,
+		);
+		if (extractedMessages.hasErrors) {
+			const newMsg = {
+				messages: extractedMessages.messages,
+			};
+
+			if (extractedMessages.messages.length > 0) {
+				newMsg.title = errorDescription;
+			} else {
+				newMsg.title = errorTitle;
+				newMsg.description = errorDescription;
+			}
+
+			dispatch(pushGlobalErrorMessage(newMsg));
+		}
+
+		return data;
+	});
+};
+
+export const useDispatchWithErrorHandling = () => {
+	const dispatch = useDispatch();
+
+	return useCallback(
+		({ action, errorTitle, errorDescription, validationLookupModule, validationLookupName }) => {
+			return executeDispatchWithErrorHandling({
+				dispatch,
+				action,
+				errorTitle,
+				errorDescription,
+				validationLookupModule,
+				validationLookupName,
+			});
+		},
+		[dispatch],
+	);
+};
+
+export default useDispatchWithErrorHandling;