orc-shared 1.5.0-dev.8 → 1.5.0

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js

@@ -53,10 +53,11 @@ describe("useStyles", () => {
 });
 
 describe("SearchControl Component", () => {
-	const stateSetter = sinon.spy().named("focus");
-	const useStateMock = initState => [initState, stateSetter];
-
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
 	afterEach(() => {
+		jest.useRealTimers();
 		jest.clearAllMocks();
 	});
 
@@ -232,8 +233,7 @@ describe("SearchControl Component", () => {
 		expect(searchInput.length, "to be", 1);
 
 		searchInput.instance().value = "abc";
-		searchInput.simulate("keydown", { key: "Tab" });
-		searchInput.simulate("keydown", { key: "Enter" });
+		mountedComponent.find("form").simulate("submit", { preventDefault: () => {} });
 
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["aValue", "abc"] }]);
 	});
@@ -371,7 +371,7 @@ describe("SearchControl Component", () => {
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", "abcdef123"] }]);
 	});
 
-	it("Search Control should render with the 2nd value", () => {
+	it("Search Control should clear the search when changing the option", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
@@ -385,8 +385,8 @@ describe("SearchControl Component", () => {
 					placeholder="placeHolderTest"
 					defaultValue={"abcdef123"}
 					searchOptions={options}
-					searchOption={"anotherValue"}
 					onSearch={onSearchEvent}
+					focusSearchOnSearchOptionChange={true}
 				/>
 			</TestWrapper>
 		);
@@ -395,48 +395,53 @@ describe("SearchControl Component", () => {
 
 		const selectMui = mountedComponent.find(SelectMUI);
 
-		expect(selectMui.props().value, "to equal", "anotherValue");
-	});
+		const event = {
+			target: {
+				value: "anotherValue",
+			},
+		};
 
-	it("focusing text input should set focus on container", () => {
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		onSearchEvent.resetHistory();
+
+		selectMui.invoke("onChange")(event);
+
+		expect(onSearchEvent.callCount, "to equal", 1);
+		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", ""] }]);
+
+		const allInputs = mountedComponent.find("input");
+		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
+		expect(searchInput.length, "to be", 1);
 
+		expect(searchInput.instance().value, "to be", "abcdef123");
+		jest.runOnlyPendingTimers();
+		expect(searchInput.instance().value, "to be", "");
+	});
+
+	it("Search Control should render with the 2nd value", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
 		];
 
+		const onSearchEvent = sinon.spy().named("search");
+
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
-				<SearchControl placeholder="placeHolderTest" searchOptions={options} />
+				<SearchControl
+					placeholder="placeHolderTest"
+					defaultValue={"abcdef123"}
+					searchOptions={options}
+					searchOption={"anotherValue"}
+					onSearch={onSearchEvent}
+				/>
 			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);
 
-		const allInputs = mountedComponent.find("input");
-		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
-		expect(searchInput.length, "to be", 1);
-
-		let searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.length, "to be", 1);
-
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
-
-		const event = {
-			preventDefault: () => {},
-			stopPropagation: () => {},
-		};
-
-		searchInput.invoke("onFocus")(event);
-
-		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", true);
-
-		searchInput.invoke("onBlur")(event);
+		const selectMui = mountedComponent.find(SelectMUI);
 
-		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
-		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
+		expect(selectMui.props().value, "to equal", "anotherValue");
 	});
 
 	it("Renders Search Control component without errors when disabled", () => {

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

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

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/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;

package/src/components/TaskDetailsModal.test.js

@@ -0,0 +1,317 @@
+import React from "react";
+import Immutable from "immutable";
+import { mount } from "enzyme";
+import TaskDetailsModal from "./TaskDetailsModal";
+import Modal from "./MaterialUI/DataDisplay/Modal";
+import { defaultCulture } from "../selectors/locale";
+import sinon from "sinon";
+import { createMuiTheme, extractMessages, TestWrapper } from "../utils/testUtils";
+import sharedMessages from "../sharedMessages";
+import ModalProps from "./MaterialUI/DataDisplay/modalProps";
+import { Ignore } from "unexpected-reaction";
+import InformationItem from "./MaterialUI/DataDisplay/PredefinedElements/InformationItem";
+import { clearTaskLog, getTaskInfo, getTaskLog } from "../actions/tasks";
+import { taskStatuses } from "../constants";
+
+const messages = extractMessages(sharedMessages);
+
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = (path = [], params = "") => "URL: " + path.join("/") + " " + JSON.stringify(params);
+	return modExport;
+});
+
+function removeBailout(obj) {
+	delete obj["@@redux-api-middleware/RSAA"].bailout;
+	return obj;
+}
+
+describe("TaskDetailsModal", () => {
+	let state, dispatch, store, clearIntervalSpy;
+	const theme = createMuiTheme();
+
+	beforeEach(() => {
+		//window.bypassDebounce = true;
+
+		dispatch = sinon.spy().named("dispatch");
+		jest.useFakeTimers();
+		clearIntervalSpy = sinon.spy(global, "clearInterval");
+
+		state = Immutable.fromJS({
+			requests: {
+				logout: false,
+			},
+			metadata: {
+				lookups: {},
+			},
+			tasks: {
+				taskInfos: {},
+				tasks: [],
+				logs: {},
+			},
+			locale: {
+				defaultCulture: defaultCulture,
+			},
+		});
+
+		store = {
+			getState: () => state,
+			subscribe: () => {},
+			dispatch: dispatch,
+		};
+	});
+	afterEach(() => {
+		jest.useRealTimers();
+		jest.restoreAllMocks();
+		clearIntervalSpy.restore();
+	});
+
+	it("renders a modal for task", () => {
+		const modalProps = new ModalProps();
+
+		modalProps.set(ModalProps.propNames.title, "Task In Progress");
+		modalProps.set(ModalProps.propNames.open, true);
+		modalProps.set(ModalProps.propNames.type, "wide");
+		modalProps.set(ModalProps.propNames.actionPanel, <Ignore />);
+
+		const expectedContent = (
+			<div>
+				<InformationItem label={sharedMessages.taskId}>1234</InformationItem>
+				<InformationItem label={sharedMessages.taskStatus}>
+					<Ignore />
+				</InformationItem>
+				<InformationItem label={sharedMessages.taskLogs}>
+					<textarea />
+				</InformationItem>
+			</div>
+		);
+
+		expect(
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={() => {}} />
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<Modal message={expectedContent} modalProps={modalProps} />
+			</TestWrapper>,
+		).then(() => expect(console.error, "was not called"));
+	});
+
+	it("renders a modal for task with status and logs", () => {
+		state = state.setIn(
+			["tasks", "logs", "1234"],
+			[
+				{ executionTime: "", message: null },
+				{ executionTime: "4", message: "msg\r\n" },
+				{ executionTime: "3", message: "another" },
+			],
+		);
+		state = state.setIn(["tasks", "taskInfos", "1234"], { status: taskStatuses.running });
+
+		const modalProps = new ModalProps();
+
+		modalProps.set(ModalProps.propNames.title, "Task In Progress");
+		modalProps.set(ModalProps.propNames.open, true);
+		modalProps.set(ModalProps.propNames.type, "wide");
+		modalProps.set(ModalProps.propNames.actionPanel, <Ignore />);
+
+		const expectedContent = (
+			<div>
+				<InformationItem label={sharedMessages.taskId}>1234</InformationItem>
+				<InformationItem label={sharedMessages.taskStatus}>[Running]</InformationItem>
+				<InformationItem label={sharedMessages.taskLogs}>
+					<textarea readOnly value={"another\nmsg"} />
+				</InformationItem>
+			</div>
+		);
+
+		expect(
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={() => {}} />
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<Modal message={expectedContent} modalProps={modalProps} />
+			</TestWrapper>,
+		).then(() => expect(console.error, "was not called"));
+	});
+
+	it("close the dialog", () => {
+		const closeSpy = sinon.spy().named("close");
+
+		const content = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={closeSpy} />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(content);
+		store.dispatch.resetHistory();
+
+		const input = mountedComponent.find("[data-qa='" + sharedMessages.close.id + "']").at(0);
+		input.simulate("click");
+
+		expect(closeSpy, "was called");
+		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [clearTaskLog("1234")],
+			},
+		]);
+	});
+
+	it("clear timer on unmount", () => {
+		const closeSpy = sinon.spy().named("close");
+		const content = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={closeSpy} />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(content);
+		clearIntervalSpy.resetHistory();
+		mountedComponent.unmount();
+
+		expect(clearIntervalSpy, "was called");
+	});
+
+	it("taskInfo is called to load data", () => {
+		const content = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={() => {}} />
+			</TestWrapper>
+		);
+
+		mount(content);
+
+		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [removeBailout(getTaskInfo("1234"))],
+			},
+		]);
+		expect(store.dispatch, "not to have calls satisfying", [
+			{
+				args: [removeBailout(getTaskLog("1234"))],
+			},
+		]);
+	});
+
+	it("taskLogs is called to load data", () => {
+		const content = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+				intlProvider={{ messages }}
+			>
+				<TaskDetailsModal taskId="1234" open={true} closeModal={() => {}} />
+			</TestWrapper>
+		);
+
+		mount(content);
+
+		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [removeBailout(getTaskInfo("1234"))],
+			},
+		]);
+
+		store.dispatch.resetHistory();
+
+		jest.runOnlyPendingTimers();
+
+		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [removeBailout(getTaskInfo("1234"))],
+			},
+			{
+				args: [removeBailout(getTaskLog("1234", false))],
+			},
+		]);
+	});
+
+	it.each([taskStatuses.faulted, taskStatuses.ranToCompletion, taskStatuses.canceled, taskStatuses.ignored])(
+		"taskLogs is not called because task is completed (%s)",
+		newStatus => {
+			state = state.setIn(["tasks", "taskInfos", "1234"], { status: newStatus });
+
+			const content = (
+				<TestWrapper
+					provider={{ store }}
+					memoryRouter
+					stylesProvider
+					muiThemeProvider={{ theme }}
+					intlProvider={{ messages }}
+				>
+					<TaskDetailsModal taskId="1234" open={true} closeModal={() => {}} />
+				</TestWrapper>
+			);
+
+			mount(content);
+
+			expect(store.dispatch, "not to have calls satisfying", [
+				{
+					args: [removeBailout(getTaskInfo("1234"))],
+				},
+			]);
+
+			store.dispatch.resetHistory();
+
+			jest.runOnlyPendingTimers();
+
+			expect(store.dispatch, "not to have calls satisfying", [
+				{
+					args: [removeBailout(getTaskInfo("1234"))],
+				},
+				{
+					args: [removeBailout(getTaskLog("1234"))],
+				},
+			]);
+		},
+	);
+});