orc-shared 1.7.0-dev.8 → 5.2.0-dev.1

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Select from "./Select";
 import SelectProps from "./SelectProps";
@@ -180,10 +180,6 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 	showAMPM = showAMPM ?? isBrowserUsingAMPM();
 	const [time, setTime] = useState(parseTime(value || "00:00"));
 
-	useEffect(() => {
-		setTime(parseTime(value || "00:00"));
-	}, [value, setTime]);
-
 	const userTimeZone = getTimeZoneName();
 	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", userTimeZone, null));
 

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

@@ -12,16 +12,11 @@ const useStyles = makeStyles(theme => ({
 		textTransform: "none",
 		color: theme.palette.text.primary,
 		borderRadius: 0,
-		"&:hover": {
+		"&:hover, &:focus": {
 			borderRadius: 0,
 			boxShadow: "none",
 			backgroundColor: theme.palette.primary.light,
 		},
-		"&:focus, &:active, &.Mui-focusVisible": {
-			borderRadius: 0,
-			boxShadow: "none",
-			outline: "none",
-		},
 	},
 	menu: {
 		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,

package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js

@@ -40,7 +40,6 @@ const useStyles = makeStyles(theme => ({
 	panelRoot: {
 		"&$panelExpanded": {
 			margin: "0",
-			position: "unset",
 			"&:before": {
 				opacity: "1",
 			},

package/src/components/MaterialUI/hocs/withDeferredTooltip.js

@@ -8,7 +8,7 @@ import { isString, isObject, isStringNullOrWhitespace, isReactComponent } from "
 
 const withDeferredTooltip =
 	Comp =>
-	({ titleValue, alwaysDisplay, tooltipClasses, ...props }) => {
+	({ titleValue, alwaysDisplay, ...props }) => {
 		const [shouldBeTooltipped, setShouldBeTooltipped] = useState(false);
 
 		const defaultComponent = <Comp onMouseEnter={event => makeComponentTooltipped(event)} {...props} />;
@@ -32,7 +32,6 @@ const withDeferredTooltip =
 		return (
 			<MuiTooltip
 				arrow
-				classes={tooltipClasses ?? null}
 				title={titleValue}
 				disableHoverListener={false}
 				disableFocusListener={true}

package/src/components/MaterialUI/hocs/withDeferredTooltip.test.js

@@ -155,56 +155,4 @@ describe("withDeferredTooltip", () => {
 
 		expect(wrapper.prop("onMouseEnter"), "to be", undefined);
 	});
-
-	it("Always displays passed title in tooltip with tooltip classes when specified", () => {
-		const Wrapper = props => <ComponentToBeTooltipped {...props} />;
-
-		const TooltippedCompponent = withDeferredTooltip(Wrapper);
-
-		const mountedTooltippedComponent = shallow(
-			<TooltippedCompponent alwaysDisplay titleValue="test" tooltipClasses={{ classTest: "testMyMojo" }} />,
-		);
-
-		const event = {
-			target: {
-				offsetWidth: 100,
-				scrollWidth: 100,
-			},
-		};
-
-		mountedTooltippedComponent.find(Wrapper).invoke("onMouseEnter")(event);
-
-		let expected = (
-			<MuiTooltip title="test" classes={{ classTest: "testMyMojo" }}>
-				<Wrapper />
-			</MuiTooltip>
-		);
-
-		expect(mountedTooltippedComponent.containsMatchingElement(expected), "to be true");
-	});
-
-	it("Always displays passed title in tooltip without tooltip classes when not specified", () => {
-		const Wrapper = props => <ComponentToBeTooltipped {...props} />;
-
-		const TooltippedCompponent = withDeferredTooltip(Wrapper);
-
-		const mountedTooltippedComponent = shallow(<TooltippedCompponent alwaysDisplay titleValue="test" />);
-
-		const event = {
-			target: {
-				offsetWidth: 100,
-				scrollWidth: 100,
-			},
-		};
-
-		mountedTooltippedComponent.find(Wrapper).invoke("onMouseEnter")(event);
-
-		let expected = (
-			<MuiTooltip title="test" classes={null}>
-				<Wrapper />
-			</MuiTooltip>
-		);
-
-		expect(mountedTooltippedComponent.containsMatchingElement(expected), "to be true");
-	});
 });

package/src/components/Routing/Page.js

@@ -4,12 +4,9 @@ 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>
@@ -41,15 +38,7 @@ const Page = ({ component: View, path, pages = {}, subpages = {}, modulePrependP
 					<Route
 						key={subpath}
 						path={path + subpath}
-						render={route => (
-							<SubPage
-								root={path}
-								config={config}
-								parentUrlPattern={parentUrlPattern}
-								{...route}
-								modulePrependPath={modulePrependPath}
-							/>
-						)}
+						render={route => <SubPage root={path} config={config} {...route} modulePrependPath={modulePrependPath} />}
 					/>
 				))}
 			</Switch>

package/src/components/Routing/SegmentPage.js

@@ -197,9 +197,6 @@ 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;
@@ -207,15 +204,7 @@ const SegmentPage = ({
 						<Route
 							key={pagePath}
 							path={path + pagePath}
-							render={route => (
-								<SubPage
-									root={path}
-									config={config}
-									parentUrlPattern={parentUrlPattern}
-									{...route}
-									modulePrependPath={modulePrependPath}
-								/>
-							)}
+							render={route => <SubPage root={path} config={config} {...route} modulePrependPath={modulePrependPath} />}
 						/>
 					);
 				}),

package/src/components/Routing/SubPage.js

@@ -20,19 +20,22 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-export const SubPage = ({ config, match, location, history, root, modulePrependPath, parentUrlPattern }) => {
+export const SubPage = ({ config, match, location, history, root, modulePrependPath }) => {
 	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 = () => {
-		const parentHref = parentUrlPattern.stringify(match.params);
-		history.push(parentHref);
-		dispatch(mapHref(parentHref, parentHref));
+		history.push(basePath);
+		dispatch(mapHref(basePath, basePath));
 	};
 
 	const message = (
@@ -56,8 +59,9 @@ 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 = (
+	const actionPanel = (
 		<div className={classes.actionPanel}>
 			<Button variant="contained" color="primary" disableElevation onClick={closeSubPage}>
 				<FormattedMessage {...sharedMessages.close} />
@@ -65,42 +69,6 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 		</div>
 	);
 
-	if (props.componentProps?.actionPanel()?.length > 0) {
-		actionPanel = (
-			<div className={classes.actionPanel}>
-				{props.componentProps?.actionPanel().map(action => (
-					<Button
-						key={action.label?.id}
-						variant={action.isPrimary ? "contained" : "outlined"}
-						color={action.isPrimary ? "primary" : "default"}
-						disableElevation={action.isPrimary}
-						disabled={action.disabled}
-						onClick={e => {
-							if (!action.handler) {
-								closeSubPage();
-								return;
-							}
-
-							let actionHandlerResult = action.handler(e);
-							if (typeof actionHandlerResult === "object") {
-								// promise
-								actionHandlerResult.then(actionResult => {
-									if (action.validateBeforeClose && !actionResult) return;
-									closeSubPage();
-								});
-							} else {
-								if (action.validateBeforeClose && !actionHandlerResult) return;
-								closeSubPage();
-							}
-						}}
-					>
-						<FormattedMessage {...action.label} />
-					</Button>
-				))}
-			</div>
-		);
-	}
-
 	modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
 
 	return <Modal message={message} modalProps={modalProps} />;

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

@@ -11,9 +11,9 @@ import Modal from "../MaterialUI/DataDisplay/Modal";
 import ModalProps from "../MaterialUI/DataDisplay/modalProps";
 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
@@ -93,7 +93,6 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: "Item Details" }}
 									root="/foo"
 									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -142,7 +141,6 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: sharedMessages.confirmation }}
 									root="/foo"
 									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
 									{...route}
 								/>
 							)}
@@ -167,42 +165,6 @@ describe("SubPage", () => {
 									config={{ component: InnerView, set: true, title: "Item Details" }}
 									root="/foo"
 									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...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"] }]);
-		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}
 								/>
 							)}
@@ -216,263 +178,7 @@ describe("SubPage", () => {
 		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 }];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const closeButton = mountedComponent.find("button").at(0);
-		const applyButton = mountedComponent.find("button").at(1);
-
-		closeButton.invoke("onClick")();
-
-		expect(applyButton, "not to be", null);
-		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
-		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
-	});
-
-	it("Executes handler from button received from props", () => {
-		const someEvent = sinon.spy().named("someEvent");
-
-		const actions = () => [{ label: sharedMessages.applyChanges, isPrimary: true, handler: someEvent }];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const applyButton = mountedComponent.find("button").at(0);
-
-		applyButton.invoke("onClick")();
-
-		const applyButtonClassName = applyButton.props().className;
-		expect(applyButtonClassName, "to contain", "MuiButton-contained");
-		expect(applyButtonClassName, "to contain", "MuiButton-containedPrimary");
-		expect(someEvent, "was called");
-	});
-
-	it("Do not close when clicking action button has validateBeforeClose and result is false", () => {
-		const applyHandler = () => false;
-
-		const actions = () => [
-			{ label: sharedMessages.applyChanges, isPrimary: true, handler: applyHandler, validateBeforeClose: true },
-		];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const applyButton = mountedComponent.find("button").at(0);
-
-		applyButton.invoke("onClick")();
-		expect(history.push, "not to have calls satisfying", [{ args: ["/foo"] }]);
-		expect(dispatch, "not to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
-	});
-
-	it("Close when clicking action button has validateBeforeClose and result is true", () => {
-		const applyHandler = () => true;
-
-		const actions = () => [
-			{ label: sharedMessages.applyChanges, isPrimary: true, handler: applyHandler, validateBeforeClose: true },
-		];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const applyButton = mountedComponent.find("button").at(0);
-
-		applyButton.invoke("onClick")();
 		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
 		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
 	});
-
-	it("Close when clicking action button has validateBeforeClose and result as promise with true", () => {
-		const applyHandler = () => Promise.resolve(true);
-
-		const actions = () => [
-			{ label: sharedMessages.applyChanges, isPrimary: true, handler: applyHandler, validateBeforeClose: true },
-		];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const applyButton = mountedComponent.find("button").at(0);
-
-		applyButton.invoke("onClick")();
-		setTimeout(() => {
-			expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
-			expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
-		}, 200);
-	});
-
-	it("Do not Close when clicking action button has validateBeforeClose and result as promise with false", () => {
-		const applyHandler = () => Promise.resolve(false);
-
-		const actions = () => [
-			{ label: sharedMessages.applyChanges, isPrimary: true, handler: applyHandler, validateBeforeClose: true },
-		];
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<div id="outer" />
-					<Router history={history}>
-						<Route
-							path="/foo/bar"
-							render={route => (
-								<SubPage
-									config={{
-										component: InnerView,
-										set: true,
-										title: "Item Details",
-										componentProps: { actionPanel: actions },
-									}}
-									root="/foo"
-									path="/foo/bar"
-									parentUrlPattern={new UrlPattern("/foo")}
-									{...route}
-								/>
-							)}
-						/>
-					</Router>
-				</div>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const applyButton = mountedComponent.find("button").at(0);
-
-		applyButton.invoke("onClick")();
-		setTimeout(() => {
-			expect(history.push, "not to have calls satisfying", [{ args: ["/foo"] }]);
-			expect(dispatch, "not to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
-		}, 200);
-	});
 });

package/src/components/Scope/useScopeConfirmationModalState.js

@@ -6,6 +6,7 @@ import { applicationScopeHasChanged } from "../../actions/scopes";
 import useScopeData from "./useScopeData";
 import { hasUnsavedDataSelector } from "../../selectors/view";
 import { scopeConfirmationDialogTypes } from "../../constants";
+import { setNewScopeAndModuleName } from "../../actions/modules";
 
 const ExecuteClosingTabHandlerActions = async closingTabHandlerActions => {
 	if (closingTabHandlerActions.length <= 0) return Promise.resolve();
@@ -21,7 +22,8 @@ const useApplicationScopeChanger = closingTabHandlerActions => {
 
 	return (previousScope, newScope) => {
 		ExecuteClosingTabHandlerActions(closingTabHandlerActions).then(() => {
-			dispatch(applicationScopeHasChanged(previousScope, newScope, moduleName));
+			dispatch(setNewScopeAndModuleName(newScope, moduleName));
+			dispatch(applicationScopeHasChanged(previousScope, newScope));
 		});
 	};
 };

package/src/components/Scope/useScopeConfirmationModalState.test.js

@@ -5,6 +5,7 @@ import { TestWrapper } from "../../utils/testUtils";
 import useScopeConfirmationModalState from "./useScopeConfirmationModalState";
 import { mount } from "enzyme";
 import { APPLICATION_SCOPE_HAS_CHANGED } from "../../actions/scopes";
+import { SET_NEW_SCOPE_AND_MODULE_NAME } from "../../actions/modules";
 
 jest.mock("../../utils/buildUrl", () => {
 	const modExport = {};
@@ -179,6 +180,17 @@ describe("useScopeConfirmationModalState", () => {
 		await new Promise(resolve => setTimeout(resolve, 10));
 
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{
@@ -186,7 +198,6 @@ describe("useScopeConfirmationModalState", () => {
 						payload: {
 							previousScope: "TheOldScope",
 							newScope: "newScope",
-							moduleName: "TheModuleName",
 						},
 					},
 				],
@@ -244,6 +255,17 @@ describe("useScopeConfirmationModalState", () => {
 		expect(isModalOpened, "to equal", "false");
 
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{
@@ -251,7 +273,6 @@ describe("useScopeConfirmationModalState", () => {
 						payload: {
 							previousScope: "TheOldScope",
 							newScope: "newScope",
-							moduleName: "TheModuleName",
 						},
 					},
 				],
@@ -304,8 +325,19 @@ describe("useScopeConfirmationModalState", () => {
 			{ args: [null, true] },
 		]);
 
-		expect(store.dispatch.callCount, "to be", 1);
+		expect(store.dispatch.callCount, "to be", 2);
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{
@@ -313,7 +345,6 @@ describe("useScopeConfirmationModalState", () => {
 						payload: {
 							previousScope: "TheOldScope",
 							newScope: "newScope",
-							moduleName: "TheModuleName",
 						},
 					},
 				],