orc-shared 5.8.0-dev.2 → 5.8.0-dev.21

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

@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 import SwitchMui from "@material-ui/core/Switch";
 import { makeStyles } from "@material-ui/core/styles";
 import SwitchProps, { isSwitchProps } from "./SwitchProps";
@@ -21,13 +22,19 @@ export const useStyles = makeStyles(theme => ({
 	input: {
 		left: "-250%",
 		width: "600%",
-		cursor: props => (props.readOnly ? "default" : "inherit"),
+		cursor: "inherit",
+	},
+	inputReadOnly: {
+		cursor: "default",
 	},
 	thumb: {
 		width: theme.spacing(1.3),
 		height: theme.spacing(1.3),
 		backgroundColor: theme.palette.background.default,
-		display: props => (props.readOnly ? "none" : "inherit"),
+		display: "inherit",
+	},
+	thumbReadOnly: {
+		display: "none",
 	},
 	track: {
 		backgroundColor: theme.palette.grey.borders,
@@ -45,13 +52,19 @@ export const useStyles = makeStyles(theme => ({
 		"&:before": {
 			content: props => `"${props.formattedOnCaption}"`,
 			left: theme.spacing(0.9),
-			right: props => props.readOnly && theme.spacing(0.9),
 			opacity: 0,
 		},
 		"&:after": {
 			content: props => `"${props.formattedOffCaption}"`,
 			right: theme.spacing(0.9),
-			left: props => props.readOnly && theme.spacing(0.9),
+		},
+	},
+	trackReadOnly: {
+		"&:before": {
+			right: theme.spacing(0.9),
+		},
+		"&:after": {
+			left: theme.spacing(0.9),
 		},
 	},
 	checked: {
@@ -95,8 +108,17 @@ const Switch = ({ switchProps }) => {
 	const formattedOnCaption = onCaption != null ? formatMessage(onCaption) : "";
 	const formattedOffCaption = offCaption != null ? formatMessage(offCaption) : "";
 
-	const classes = useStyles({ formattedOnCaption, formattedOffCaption, readOnly });
-	const switchClasses = { ...classes, ...className };
+	const classes = useStyles({ formattedOnCaption, formattedOffCaption });
+	const switchClasses = {
+		root: classes.root,
+		switchBase: classes.switchBase,
+		input: classNames(classes.input, { [classes.inputReadOnly]: readOnly }),
+		thumb: classNames(classes.thumb, { [classes.thumbReadOnly]: readOnly }),
+		track: classNames(classes.track, { [classes.trackReadOnly]: readOnly }),
+		checked: classes.checked,
+		disabled: classes.disabled,
+		...className,
+	};
 
 	return (
 		<SwitchMui

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

@@ -6,6 +6,9 @@ import { ignoreConsoleError } from "../../../utils/testUtils";
 import SwitchProps from "./SwitchProps";
 import Switch from "./Switch";
 import { IntlProvider } from "react-intl";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
+import { generateClassName, createMuiTheme } from "~/utils/testUtils";
 
 const messages = {
 	captionOn: "is On",
@@ -77,6 +80,42 @@ describe("Switch Component", () => {
 		expect(update, "to have calls satisfying", [{ args: [true, {}] }]);
 	});
 
+	it("Renders readonly switch with readonly styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, true);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be true");
+	});
+
+	it("Renders updatable switch with updatable styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, false);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be false");
+	});
+
 	it("Checkbox component handles uncheck", () => {
 		const switchProps = new SwitchProps();
 

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useHistory } from "react-router-dom";
 import { Link } from "react-router-dom";
@@ -100,6 +100,21 @@ export const TabLink = React.forwardRef((props, ref) => {
 	);
 });
 
+const createEntityId = (entityIdResolver, params, href, path) => {
+	let entityIdKey = Object.keys(params).find(p => p.toLowerCase().endsWith("id"));
+	if (!entityIdKey) entityIdKey = tryGetNewEntityIdKey(href);
+
+	const entityId =
+		typeof entityIdResolver === "function"
+			? entityIdResolver({ match: { params } })
+			: resolveEntityId(href, path, entityIdKey);
+
+	return {
+		entityId,
+		entityIdKey,
+	};
+};
+
 const MuiBar = ({ module, moduleName, pages }) => {
 	const tabs = React.useRef(null);
 	const classes = useStyles();
@@ -122,14 +137,17 @@ const MuiBar = ({ module, moduleName, pages }) => {
 
 	const tabLabels = [];
 
-	const handleChange = (_, value) => {
-		if (typeof value === "number" && value >= 0 && value < pages.length) {
-			const href = pages[value].href;
-			history.push(href);
-		} else {
-			history.push(module.href);
-		}
-	};
+	const handleChange = useCallback(
+		(_, value) => {
+			if (typeof value === "number" && value >= 0 && value < pages.length) {
+				const href = pages[value].href;
+				history.push(href);
+			} else {
+				history.push(module.href);
+			}
+		},
+		[history, module, pages],
+	);
 
 	const selectProps = new SelectProps();
 	selectProps.set(SelectProps.propNames.iconSelect, true);
@@ -142,10 +160,13 @@ const MuiBar = ({ module, moduleName, pages }) => {
 		</div>
 	);
 
-	const getNewIndex = oldIndex => {
-		const newIndex = oldIndex + 1 >= tabLabels.length ? oldIndex - 1 : oldIndex + 1;
-		return newIndex;
-	};
+	const getNewIndex = useCallback(
+		oldIndex => {
+			const newIndex = oldIndex + 1 >= tabLabels.length ? oldIndex - 1 : oldIndex + 1;
+			return newIndex;
+		},
+		[tabLabels.length],
+	);
 
 	const tabCloseHandler = (event, closeCallback, isModified, href, path, entityIdKey, entityId, index) => {
 		event.stopPropagation();
@@ -178,8 +199,6 @@ const MuiBar = ({ module, moduleName, pages }) => {
 		resizeHandler();
 	}, [resizeHandler, module, pages]);
 
-	const closingActions = [];
-
 	const allTabs = (
 		<div className={classes.container}>
 			<ResizeDetector onResize={resizeHandler} />
@@ -208,12 +227,7 @@ const MuiBar = ({ module, moduleName, pages }) => {
 						{ href, label, outsideScope, close, path, params, mustTruncate, icon, isDetails, entityIdResolver },
 						index,
 					) => {
-						let entityIdKey = Object.keys(params).find(p => p.toLowerCase().endsWith("id"));
-						if (!entityIdKey) entityIdKey = tryGetNewEntityIdKey(href);
-						const entityId =
-							typeof entityIdResolver === "function"
-								? entityIdResolver({ match: { params } })
-								: resolveEntityId(href, path, entityIdKey);
+						const { entityId, entityIdKey } = createEntityId(entityIdResolver, params, href, path);
 						const isModified = modifiedTabs.includes(href);
 						const isError = tabsWithErrors.includes(href);
 						const tabLabel = <TabLabel label={label} />;
@@ -244,18 +258,6 @@ const MuiBar = ({ module, moduleName, pages }) => {
 							sortOrder: index,
 						});
 
-						if (entityId != null) {
-							closingActions.push({
-								entityId: entityId,
-								closeTab: (event, executeHandlerOnly = false) => {
-									close(event, executeHandlerOnly);
-									if (executeHandlerOnly === false) {
-										handleChange(null, getNewIndex(index));
-									}
-								},
-							});
-						}
-
 						return (
 							<Tab
 								classes={{
@@ -286,8 +288,27 @@ const MuiBar = ({ module, moduleName, pages }) => {
 	);
 
 	React.useEffect(() => {
+		const closingActions = [];
+
+		pages.forEach((page, index) => {
+			const { href, close, path, params, entityIdResolver } = page;
+			const { entityId } = createEntityId(entityIdResolver, params, href, path);
+
+			if (entityId != null) {
+				closingActions.push({
+					entityId: entityId,
+					closeTab: (event, executeHandlerOnly = false) => {
+						close(event, executeHandlerOnly);
+						if (executeHandlerOnly === false) {
+							handleChange(null, getNewIndex(index));
+						}
+					},
+				});
+			}
+		});
+
 		dispatchRedux(setClosingTabHandlerActions(moduleName, closingActions));
-	}, [dispatchRedux, moduleName, closingActions]);
+	}, [dispatchRedux, getNewIndex, handleChange, moduleName, pages]);
 
 	return allTabs;
 };

package/src/components/MaterialUI/ScopeSelector/TreeItem.js

@@ -34,6 +34,9 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		alignItems: "center",
 	},
+	scopeLabelInactive: {
+		color: theme.palette.secondary.light,
+	},
 	scopeIcon: {
 		marginRight: theme.spacing(0.7),
 		height: theme.spacing(2.4),
@@ -102,7 +105,7 @@ export const ScopeIcon = ({ type }) => {
 	}
 };
 
-export const ScopeLabel = ({ name, type, isRootScope, hasChildren, isVirtualScope }) => {
+export const ScopeLabel = ({ name, type, isRootScope, hasChildren, isVirtualScope, isActive = true }) => {
 	const classes = useStyles({ hasChildren });
 
 	const icon = <ScopeIcon type={type} />;
@@ -116,7 +119,7 @@ export const ScopeLabel = ({ name, type, isRootScope, hasChildren, isVirtualScop
 	// 16.8 height of 1 lines of text
 
 	const label = (
-		<div className={classes.scopeLabel}>
+		<div className={classNames(classes.scopeLabel, isActive === false ? classes.scopeLabelInactive : "")}>
 			{icon}
 			<MultipleLinesText textProps={multipleLinesTextProps} children={name} />
 		</div>
@@ -153,6 +156,7 @@ const TreeItem = ({ scope, rootId, onScopeSelect, isScopeSelectable, children })
 					isRootScope={isRootScope}
 					isVirtualScope={isVirtualScope}
 					hasChildren={hasChildren}
+					isActive={scope.isActive}
 				/>
 			}
 			expandIcon={isRootScope ? null : expandIcon}

package/src/components/MaterialUI/ScopeSelector/TreeItem.test.js

@@ -50,6 +50,14 @@ describe("TreeItem", () => {
 		children: ["TestSale"],
 	};
 
+	const inActiveScope = {
+		id: "TestInactive",
+		name: "Test Inactive",
+		type: scopeTypes.sale,
+		children: [],
+		isActive: false,
+	};
+
 	const saleScope = {
 		id: "TestSale",
 		name: "Test Sale",
@@ -109,6 +117,37 @@ describe("TreeItem", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders Tree Item correctly for not active Scope", () => {
+		const expectedVirtualLabel = (
+			<ScopeLabel
+				name={inActiveScope.name}
+				type={inActiveScope.type}
+				isRootScope={false}
+				isVirtualScope={false}
+				isActive={false}
+			/>
+		);
+
+		const component = (
+			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>
+				<TreeItem scope={inActiveScope} rootId={rootId} />
+			</TestWrapper>
+		);
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<TreeItemMui
+					nodeId={inActiveScope.id}
+					label={expectedVirtualLabel}
+					expandIcon={expandIcon}
+					collapseIcon={collapseIcon}
+				/>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
 	it("Calls scope select handler on label click if scope type is not virtual", () => {
 		const component = (
 			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>

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

@@ -78,16 +78,13 @@ const withDeferredPopper =
 		const defaultComponent = <Comp onClick={event => togglePopper(event)} {...props} />;
 
 		const togglePopper = function (event) {
-			const linkParent = event?._dispatchInstances?.filter(item => item.elementType === "a");
-			if (linkParent) {
-				event.preventDefault();
-			}
 			const isDisplayed = !popperState.isDisplayed;
 			const anchorElement = event.currentTarget;
 			setPopperState({
 				isDisplayed: isDisplayed,
 				anchorElement: anchorElement,
 			});
+			event.preventDefault();
 			event.bubbles = false;
 			event.stopPropagation();
 		};

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

@@ -265,6 +265,7 @@ describe("withDeferredPopper", () => {
 		ignoreConsoleError(() => {
 			const event = {
 				currentTarget: wrapper,
+				preventDefault: jest.fn(),
 				stopPropagation: jest.fn(),
 			};
 
@@ -296,6 +297,7 @@ describe("withDeferredPopper", () => {
 		ignoreConsoleError(() => {
 			const event = {
 				currentTarget: null,
+				preventDefault: jest.fn(),
 				stopPropagation: jest.fn(),
 			};
 

package/src/components/Modal/Modal.test.js

@@ -22,7 +22,9 @@ describe("Modal", () => {
 	afterEach(() => {
 		try {
 			ReactDOM.unmountComponentAtNode(appRoot);
-		} catch (_) {}
+		} catch {
+			// don't do anything
+		}
 		document.body.removeChild(appRoot);
 		document.body.removeChild(modalRoot);
 	});

package/src/components/Modal/Wrapper.test.js

@@ -35,7 +35,9 @@ describe("Wrapper", () => {
 		afterEach(() => {
 			try {
 				ReactDOM.unmountComponentAtNode(appRoot);
-			} catch (_) {}
+			} catch {
+				// don't do anything
+			}
 			document.body.removeChild(appRoot);
 			document.body.removeChild(modalRoot);
 		});

package/src/components/Routing/SegmentPage.js

@@ -64,6 +64,7 @@ export const List = styled.div`
 	border-right: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
 	display: flex;
 	flex-direction: column;
+	overflow-y: auto;
 `;
 
 const FilteredLink = ({ active, ...props }) => (props.to ? <Link {...props} /> : <div {...props} />);
@@ -167,7 +168,7 @@ const SegmentPage = ({
 	modulePrependPath,
 	entityIdResolver,
 }) => {
-	const classes = useStyles({ isComponentNull: !!!View });
+	const classes = useStyles({ isComponentNull: !View });
 	const pattern = new UrlPattern(path);
 	const baseHref = pattern.stringify(match.params);
 	const pages = [],

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

@@ -121,7 +121,9 @@ beforeEach(() => {
 afterEach(() => {
 	try {
 		ReactDOM.unmountComponentAtNode(appRoot);
-	} catch (_) {}
+	} catch {
+		// don't do anything
+	}
 	document.body.removeChild(appRoot);
 	document.body.removeChild(modalRoot);
 });

package/src/components/Sidepanel.test.js

@@ -25,7 +25,9 @@ describe("Sidepanel", () => {
 	afterEach(() => {
 		try {
 			ReactDOM.unmountComponentAtNode(appRoot);
-		} catch (_) {}
+		} catch {
+			// don't do anything
+		}
 		document.body.removeChild(appRoot);
 		document.body.removeChild(modalRoot);
 	});

package/src/components/ToastList.js

@@ -104,8 +104,8 @@ const ListWrapper = styled(TransitionGroup)`
 export const ToastList = ({ toasts }) =>
 	ReactDOM.createPortal(
 		<ListWrapper>
-			{toasts.map(props => (
-				<Toast {...props} />
+			{toasts.map((props, idx) => (
+				<Toast key={"toast" + idx} {...props} />
 			))}
 		</ListWrapper>,
 		portal,

package/src/constants.js

@@ -1,5 +1,10 @@
 export const infoBar = "infoBar";
 
+export const applications = {
+	oms: "oms",
+	pim: "pim",
+};
+
 export const scopeTypes = {
 	global: "Global",
 	virtual: "Virtual",

package/src/hocs/withErrorBoundary.test.js

@@ -28,9 +28,10 @@ describe("withErrorBoundary", () => {
 			{ args: ["Caught an error: Fail, at boundary Failed"] },
 			{
 				args: [
-					"\n    in FailBall (created by ErrorBoundary)\n" +
-						"    in ErrorBoundary (created by BoundedFailBall)\n" +
-						"    in BoundedFailBall",
+					expect.it(
+						"to match",
+						/at FailBall.*withErrorBoundary\.test\.js.*at ErrorBoundary.*withErrorBoundary\.js.*at BoundedFailBall/s,
+					),
 				],
 			},
 		]);

package/src/hooks/useEditState.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unknown-property */
+
 import React from "react";
 import { useEditState, useDynamicEditState } from "./useEditState";
 import { TestWrapper } from "./../utils/testUtils";

package/src/hooks/useLabelMessage.test.js

@@ -1,3 +1,5 @@
+/* eslint react/no-unknown-property: off */
+
 import React from "react";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";

package/src/reducers/metadata.js

@@ -156,33 +156,28 @@ const metadataReducer = (state = initialState, action) => {
 		}
 		case SAVE_ORDER_LOOKUP_SUCCESS:
 		case GET_ORDER_LOOKUP_SUCCESS:
-			return state.setIn(
-				["lookups", ORDER_MODULE_NAME, "index", action.payload.lookupName],
-				Immutable.fromJS(action.payload),
-			);
+			return lookupReducerHelper.getLookupsQuerySuccess(ORDER_MODULE_NAME, state, {
+				payload: [action.payload],
+			});
 
 		case ADD_ORDER_LOOKUP_SUCCESS: {
-			state = state.setIn(
-				["lookups", ORDER_MODULE_NAME, "index", action.payload.lookupName],
-				Immutable.fromJS(action.payload),
-			);
+			state = lookupReducerHelper.getLookupsQuerySuccess(ORDER_MODULE_NAME, state, {
+				payload: [action.payload],
+			});
 
 			return lookupReducerHelper.getPagedLookups(ORDER_MODULE_NAME, state);
 		}
 
 		case SAVE_CUSTOMER_LOOKUP_SUCCESS:
 		case GET_CUSTOMER_LOOKUP_SUCCESS:
-			return state.setIn(
-				["lookups", CUSTOMER_MODULE_NAME, "index", action.payload.lookupName],
-				Immutable.fromJS(action.payload),
-			);
+			return lookupReducerHelper.getLookupsQuerySuccess(CUSTOMER_MODULE_NAME, state, {
+				payload: [action.payload],
+			});
 
 		case ADD_CUSTOMER_LOOKUP_SUCCESS: {
-			state = state.setIn(
-				["lookups", CUSTOMER_MODULE_NAME, "index", action.payload.lookupName],
-				Immutable.fromJS(action.payload),
-			);
-
+			state = lookupReducerHelper.getLookupsQuerySuccess(CUSTOMER_MODULE_NAME, state, {
+				payload: [action.payload],
+			});
 			return lookupReducerHelper.getPagedLookups(CUSTOMER_MODULE_NAME, state);
 		}