orc-shared 1.5.0-dev.9 → 1.5.1-dev.2

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

@@ -155,4 +155,56 @@ 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,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 = (

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/components/TaskDetailsModal.js

@@ -0,0 +1,132 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Button from "@material-ui/core/Button";
+import { FormattedMessage } from "react-intl";
+import { makeStyles } from "@material-ui/core/styles";
+import { taskStatuses } from "../constants";
+import useSelectorAndUnwrap from "../hooks/useSelectorAndUnwrap";
+import InformationItem from "./MaterialUI/DataDisplay/PredefinedElements/InformationItem";
+import { taskInfo, taskLogs } from "../selectors/tasks";
+import { compareObjectProperty } from "../utils/propertyHelper";
+import useLoader from "../hooks/useLoader";
+import { clearTaskLog, getTaskInfo, getTaskLog } from "../actions/tasks";
+import ModalProps from "./MaterialUI/DataDisplay/modalProps";
+import Modal from "./MaterialUI/DataDisplay/Modal";
+import { namedLookupLocalizedSelector } from "../selectors/metadata";
+import sharedMessages from "../sharedMessages";
+
+export const useStyles = makeStyles(theme => ({
+	actionPanel: {
+		display: "flex",
+		marginLeft: "auto",
+		flex: "1 1 0",
+		justifyContent: "flex-end",
+	},
+	taskContainer: {
+		display: "flex",
+		width: "100%",
+		flexDirection: "column",
+		"&>div": {
+			"&:last-child": {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
+				"&>textarea": {
+					overflowY: "scroll",
+					resize: "none",
+					flex: 1,
+				},
+			},
+		},
+	},
+}));
+
+const isTaskCompleted = status => {
+	switch (status) {
+		case taskStatuses.faulted:
+		case taskStatuses.ranToCompletion:
+		case taskStatuses.canceled:
+		case taskStatuses.ignored:
+			return true;
+		default:
+			return false;
+	}
+};
+
+const TaskDetailsModal = ({ taskId, open, closeModal }) => {
+	const classes = useStyles();
+	const dispatch = useDispatch();
+
+	const taskDetails = useSelectorAndUnwrap(taskInfo(taskId));
+	const logs = useSelectorAndUnwrap(taskLogs(taskId));
+	const logsText = logs
+		.sort((a, b) => compareObjectProperty(a, b, "executionTime"))
+		.reduce((accumulator, currentValue) => {
+			if (currentValue.message === null) {
+				return accumulator;
+			}
+			if (accumulator === "") {
+				return currentValue.message.trim();
+			}
+			return accumulator + "\n" + currentValue.message.trim();
+		}, "");
+
+	useLoader(getTaskInfo(taskId), () => taskDetails !== null);
+
+	const internalCloseModal = () => {
+		dispatch(clearTaskLog(taskId));
+		closeModal();
+	};
+
+	const taskStatus = taskDetails?.status;
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			if (!isTaskCompleted(taskStatus)) {
+				dispatch(getTaskInfo(taskId));
+				dispatch(getTaskLog(taskId, false));
+			}
+		}, 10000);
+		return () => clearInterval(timer);
+	}, [dispatch, taskId, taskStatus]);
+
+	const localizedStatus = useSelector(namedLookupLocalizedSelector("order", "TaskStatus", taskStatus));
+	const modalProps = new ModalProps();
+	const titleComponent = <FormattedMessage {...sharedMessages.taskInProgressModalTitle} />;
+
+	modalProps.set(ModalProps.propNames.title, titleComponent);
+	modalProps.set(ModalProps.propNames.open, open);
+	modalProps.set(ModalProps.propNames.type, "wide");
+	modalProps.set(ModalProps.propNames.backdropClickCallback, internalCloseModal);
+
+	const actionPanel = (
+		<div className={classes.actionPanel}>
+			<Button
+				key={sharedMessages.close.id}
+				data-qa={sharedMessages.close.id}
+				variant="contained"
+				color="primary"
+				disableElevation={true}
+				onClick={e => internalCloseModal(e)}
+			>
+				<FormattedMessage {...sharedMessages.close} />
+			</Button>
+		</div>
+	);
+
+	modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
+
+	const taskContent = (
+		<div className={classes.taskContainer}>
+			<InformationItem label={sharedMessages.taskId}>{taskId}</InformationItem>
+			<InformationItem label={sharedMessages.taskStatus}>{localizedStatus}</InformationItem>
+			<InformationItem label={sharedMessages.taskLogs}>
+				<textarea readOnly value={logsText} />
+			</InformationItem>
+		</div>
+	);
+
+	return <Modal message={taskContent} modalProps={modalProps} />;
+};
+
+export default TaskDetailsModal;