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

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

@@ -15,7 +15,6 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: theme.palette.grey.light,
 		border: `1px solid ${theme.palette.grey.borders}`,
 		boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
-		width: theme.spacing(50),
 		display: "flex",
 	},
 	scopeContainer: {
@@ -65,7 +64,7 @@ const ScopeSelector = ({ show, getScope, selectedScope, closeSelector, filter, u
 	);
 
 	const scopeSelector = (
-		<Sidepanel className={classes.container} in={show} timeout={300}>
+		<Sidepanel className={classes.container} widthSpacing={50} in={show} timeout={300}>
 			<ClickAwayListener onClickAway={e => closeSelector(e)}>
 				{/* this div is required since ClickAwayListener child element should be able to hold ref */}
 				<div className={classes.scopeContainer}>{show ? scopeSelectorContent : null}</div>

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

@@ -11,19 +11,6 @@ import { scopeTypes } from "./../../../constants";
 const useStyles = makeStyles(theme => ({
 	group: {
 		marginLeft: props => (props.isRootScope ? theme.spacing(1.2) : theme.spacing(3.2)),
-		// to hide unnecessary border part
-		// "& > div > div > :last-child": {
-		//   "&:after": {
-		//     content: "''",
-		//     backgroundColor: theme.palette.grey.light,
-		//     position: "absolute",
-		//     top: theme.spacing(1.2),
-		//     left: theme.spacing(-2.1),
-		//     height: "100%",
-		//     bottom: 0,
-		//     width: "1px",
-		//   },
-		// }
 	},
 	rootIconContainer: {
 		marginRight: 0,
@@ -73,33 +60,23 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-export const ScopeIcon = ({ type }) => {
+export const ScopeIcon = ({ type, scopeIconClass }) => {
 	const classes = useStyles();
 	const theme = useTheme();
 
-	const globalIcon = <Icon className={classes.scopeIcon} color="primary" fontSize="medium" id="global-scope" />;
-	const virtualIcon = (
-		<Icon className={classes.scopeIcon} themeColor={theme.palette.grey.dark} fontSize="medium" id="virtual-scope" />
-	);
-	const salesIcon = <Icon className={classes.scopeIcon} color="primary" fontSize="medium" id="sales-scope" />;
-	const dependentIcon = (
-		<Icon
-			className={classes.scopeIcon}
-			themeColor={theme.palette.success.main}
-			fontSize="medium"
-			id="dependent-scope"
-		/>
-	);
+	const iconClass = classNames(classes.scopeIcon, scopeIconClass);
 
 	switch (type) {
 		case scopeTypes.global:
-			return globalIcon;
+			return <Icon className={iconClass} color="primary" fontSize="medium" id="global-scope" />;
 		case scopeTypes.virtual:
-			return virtualIcon;
+			return <Icon className={iconClass} themeColor={theme.palette.grey.dark} fontSize="medium" id="virtual-scope" />;
 		case scopeTypes.sale:
-			return salesIcon;
+			return <Icon className={iconClass} color="primary" fontSize="medium" id="sales-scope" />;
 		case scopeTypes.dependant:
-			return dependentIcon;
+			return (
+				<Icon className={iconClass} themeColor={theme.palette.success.main} fontSize="medium" id="dependent-scope" />
+			);
 		default:
 			return null;
 	}

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

@@ -13,7 +13,7 @@ const useStyle = makeStyles(theme => ({
 		},
 		"&::-webkit-scrollbar-thumb": {
 			background: theme.palette.grey.borders,
-			border: `5px transparent solid`,
+			border: `${theme.spacing(0.5)} transparent solid`,
 			backgroundClip: "padding-box",
 			borderRadius: theme.spacing(1.5),
 		},

package/src/components/MaterialUI/muiThemes.js

@@ -35,7 +35,7 @@ const commonTheme = {
 		fontWeightBlack: 900,
 		button: {
 			fontFamily: '"Roboto Condensed", sans-serif',
-			fontWeight: 500,
+			fontWeight: 400,
 			fontSize: 13,
 			lineHeight: 1.0,
 			letterSpacing: "0.0em",

package/src/components/Routing/SegmentPage.js

@@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		borderTop: `1px solid ${theme.palette.grey.borders}`,
 		flex: "0 1 100%",
-		height: "calc(100% - 90px)",
+		height: `calc(100% - ${theme.spacing(9)})`,
 		minHeight: 0,
 
 		"div[class^='AppFrame__ViewPort'] > div&:nth-child(3)": {
@@ -64,9 +64,9 @@ const useStyles = makeStyles(theme => ({
 		display: "block",
 		whiteSpace: "nowrap",
 		minWidth: "max-content",
-		padding: "15px 20px",
+		padding: theme.spacing(1.5, 2),
 		fontWeight: "bold",
-		fontSize: "13px",
+		fontSize: theme.spacing(1.3),
 		textDecoration: "none",
 		cursor: "pointer",
 		color: theme.palette.text.primary,
@@ -150,20 +150,20 @@ export const SegmentItem = ({ isModified, isError, isActive, segpath, config, ba
 	);
 };
 
-export const Wrapper = ({ children }) => {
+export const Wrapper = ({ className, children }) => {
 	const classes = useStyles();
 
 	return (
-		<div className={classes.wrapper} key="Segments">
+		<div className={classNames(classes.wrapper, className ?? null)} key="Segments">
 			{children}
 		</div>
 	);
 };
 
-export const List = ({ children }) => {
+export const List = ({ className, children }) => {
 	const classes = useStyles();
 
-	return <div className={classes.list}>{children}</div>;
+	return <div className={classNames(classes.list, className ?? null)}>{children}</div>;
 };
 
 export const Item = ({ active, to, children, onClick }) => {

package/src/components/Scope/ScopeNode.js

@@ -5,10 +5,10 @@ import classNames from "classnames";
 
 const useStyles = makeStyles(theme => ({
 	scopeIcon: {
-		fontSize: "20px",
-		verticalAlign: "middle",
-		paddingRight: "8px",
-		flexShrink: 0,
+		paddingRight: theme.spacing(0.8),
+		marginRight: theme.spacing(0),
+		height: theme.spacing(2),
+		width: theme.spacing(2),
 	},
 	scopeText: {
 		overflowWrap: "break-word",
@@ -17,9 +17,8 @@ const useStyles = makeStyles(theme => ({
 		boxSizing: "border-box",
 		display: "flex",
 		alignItems: "center",
-		padding: "10px",
+		padding: theme.spacing(1),
 		width: "100%",
-		textTransform: props.isGlobal ? "uppercase" : "none",
 		...(props.isClickable
 			? {
 					"&:hover": {
@@ -33,7 +32,7 @@ const useStyles = makeStyles(theme => ({
 	}),
 }));
 
-export const ScopeNode = ({ type, scopeId, name, contentLabelClassName, iconClassName, onClick, children }) => {
+export const ScopeNode = ({ type, scopeId, name, contentLabelClassName, onClick, children }) => {
 	const classes = useStyles({ isGlobal: type === "Global", isClickable: onClick !== undefined });
 
 	const displayValue = (name || scopeId) ?? null;
@@ -45,7 +44,7 @@ export const ScopeNode = ({ type, scopeId, name, contentLabelClassName, iconClas
 			onClick={onClick}
 			data-qa="content-label"
 		>
-			<ScopeIcon type={type} className={classNames(classes.scopeIcon, iconClassName)} />
+			<ScopeIcon type={type} scopeIconClass={classes.scopeIcon} />
 			{displayValue && <div className={classes.scopeText}>{displayValue}</div>}
 			{children}
 		</div>

package/src/components/Sidepanel.js

@@ -6,16 +6,16 @@ import classNames from "classnames";
 
 const getModalRoot = () => document.getElementById("modal");
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
 	panel: props => ({
 		position: "absolute",
 		top: 0,
 		bottom: 0,
 		right: 0,
-		width: props.width,
+		width: theme.spacing(props.widthSpacing),
 
 		"&.enter": {
-			transform: `translateX(${props.width})`,
+			transform: `translateX(${theme.spacing(props.widthSpacing)})`,
 		},
 		"&.enter-active": {
 			transform: "translateX(0)",
@@ -25,14 +25,14 @@ const useStyles = makeStyles({
 			transform: "translateX(0)",
 		},
 		"&.exit-active": {
-			transform: `translateX(${props.width})`,
+			transform: `translateX(${theme.spacing(props.widthSpacing)})`,
 			transition: `transform ${props.timeout}ms ease-out`,
 		},
 	}),
-});
+}));
 
-const Sidepanel = ({ in: inProp, width = "300px", timeout = 1000, children, className }) => {
-	const classes = useStyles({ width, timeout });
+const Sidepanel = ({ in: inProp, widthSpacing = 30, timeout = 1000, children, className }) => {
+	const classes = useStyles({ widthSpacing, timeout });
 
 	const panel = (
 		<CSSTransition in={inProp} timeout={timeout} unmountOnExit>

package/src/components/Sidepanel.test.js

@@ -1,6 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Sidepanel from "./Sidepanel";
+import { createMuiTheme, TestWrapper } from "../utils/testUtils";
+
+const theme = createMuiTheme();
 
 class RenderSidepanel extends React.Component {
 	render() {
@@ -44,9 +47,11 @@ describe("Sidepanel", () => {
 
 	it("sets the width it is given", () => {
 		ReactDOM.render(
-			<Sidepanel in width="25vw">
-				<div id="inner">Foo</div>
-			</Sidepanel>,
+			<TestWrapper muiThemeProvider={{ theme }}>
+				<Sidepanel in widthSpacing={25}>
+					<div id="inner">Foo</div>
+				</Sidepanel>
+			</TestWrapper>,
 			appRoot,
 		);
 		return expect(
@@ -55,7 +60,7 @@ describe("Sidepanel", () => {
 			"div#modal > div",
 			"to have style rules satisfying",
 			"to contain",
-			"width: 25vw",
+			"width: 15.625rem",
 		);
 	});
 

package/src/components/Spritesheet.js

@@ -2,7 +2,7 @@ import React from "react";
 import { makeStyles } from "@material-ui/core";
 import Icon from "./MaterialUI/DataDisplay/Icon";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
 	wrapper: {
 		display: "flex",
 		flexWrap: "wrap",
@@ -13,11 +13,11 @@ const useStyles = makeStyles({
 	iconBlock: {
 		flex: "0 0 30%",
 		border: "1px solid #999",
-		margin: "5px",
-		padding: "5px 10px",
-		fontSize: "24px",
+		margin: theme.spacing(0.5),
+		padding: theme.spacing(0.5, 1),
+		fontSize: theme.spacing(2.4),
 	},
-});
+}));
 
 const arrify = thing => [].slice.call(thing);
 

package/src/components/ToastList.js

@@ -19,11 +19,11 @@ const useStyles = makeStyles(theme => ({
 
 		return {
 			display: "flex",
-			width: "390px",
-			marginTop: "10px",
-			padding: "17px",
-			borderRadius: "5px",
-			fontSize: "14px",
+			width: theme.spacing(39),
+			marginTop: theme.spacing(1),
+			padding: theme.spacing(1.7),
+			borderRadius: theme.spacing(0.5),
+			fontSize: theme.spacing(1.4),
 			color: "white",
 			backgroundColor: toastColor,
 			zIndex: 10000,
@@ -59,18 +59,18 @@ const useStyles = makeStyles(theme => ({
 	},
 	listWrapper: {
 		position: "absolute",
-		top: "40px",
-		right: "16px",
+		top: theme.spacing(4),
+		right: theme.spacing(1.6),
 		display: "flex",
 		flexDirection: "column",
 	},
 	closeIcon: {
-		padding: "2px",
-		borderRadius: "2px",
-		strokeWidth: "2px",
+		padding: theme.spacing(0.2),
+		borderRadius: theme.spacing(0.2),
+		strokeWidth: theme.spacing(0.2),
 		cursor: "pointer",
 		marginLeft: "auto",
-		fontSize: "20px",
+		fontSize: theme.spacing(2),
 	},
 }));
 

package/src/components/Treeview/Branch.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { branchIndent, branchLength, branchHeight } from "./settings";
+import { branchIndentSpacing, branchLengthSpacing, branchHeightSpacing } from "./settings";
 import classNames from "classnames";
 
 const useStyles = makeStyles(theme => {
 	const base = {
 		margin: 0,
-		fontSize: "13px",
+		fontSize: theme.spacing(1.3),
 		listStyleType: "none",
 		borderWidth: 0,
 		borderStyle: "solid",
@@ -17,20 +17,20 @@ const useStyles = makeStyles(theme => {
 	return {
 		branch: props => ({
 			...base,
-			marginLeft: `${branchIndent}px`,
+			marginLeft: `${theme.spacing(branchIndentSpacing)}`,
 			padding: "0",
-			paddingLeft: `${branchLength}px`,
-			borderLeftWidth: "1px",
+			paddingLeft: `${theme.spacing(branchLengthSpacing)}`,
+			borderLeftWidth: theme.spacing(0.1),
 
 			"&:last-child::after": {
 				/* blocker - hides lowest part of vertical branch */
 				content: '""',
 				backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
 				position: "absolute",
-				left: `-${branchIndent + branchLength + 2}px`,
+				left: `-${theme.spacing(branchIndentSpacing + branchLengthSpacing + 0.2)}`,
 				bottom: 0,
-				top: `-${branchHeight}px`,
-				width: "1px",
+				top: `-${theme.spacing(branchHeightSpacing)}`,
+				width: theme.spacing(0.1),
 			},
 		}),
 		wrapper: {
@@ -38,11 +38,11 @@ const useStyles = makeStyles(theme => {
 			overflowY: "auto",
 			overflowX: "hidden",
 			marginLeft: 0,
-			padding: `${branchLength - 5}px`,
+			padding: `${theme.spacing(branchLengthSpacing - 0.5)}`,
 
 			"& > $branch": {
 				/* First Branch immediately under Wrapper needs margin adjusted to look right */
-				marginLeft: `${1.5 * branchIndent}px`,
+				marginLeft: `${theme.spacing(branchIndentSpacing * 1.5)}`,
 			},
 		},
 	};

package/src/components/Treeview/Branch.test.js

@@ -1,46 +1,8 @@
 import React from "react";
-import { createMuiTheme, TestWrapper } from "../../utils/testUtils";
-import { Branch, Wrapper } from "./Branch";
+import { Branch } from "./Branch";
 
 describe("Branch", () => {
-	const theme = createMuiTheme();
-
 	it("renders a <ul>", () => expect(<Branch />, "when mounted", "to satisfy", <ul />));
 
-	it("sets styling for showing a branch structure", () =>
-		expect(
-			<Branch />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "margin-left: 14px;")
-				.and("to contain", "padding-left: 15px;")
-				.and("to match", /:last-child::after {[^}]*left: -31px;[^}]*}/)
-				.and("to match", /:last-child::after {[^}]*top: -20px;[^}]*}/),
-		));
-
-	it("sets styling for a dark theme", () =>
-		expect(
-			<TestWrapper muiThemeProvider={{ theme }}>
-				<Branch dark />
-			</TestWrapper>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /:last-child::after {[^}]*background-color: #333;[^}]*}/),
-		));
-});
-
-describe("Wrapper", () => {
-	it("renders a <ul>", () => expect(<Wrapper />, "when mounted", "to satisfy", <ul />));
-
-	it("sets styling for showing the root of a tree structure", () =>
-		expect(
-			<Wrapper />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "margin-left: 0;")
-				.and("to contain", "padding: 10px;")
-				.and("to contain", "{margin-left: 21px;}"),
-		));
+	it("renders a dark <ul>", () => expect(<Branch dark />, "when mounted", "to satisfy", <ul />));
 });

package/src/components/Treeview/Label.js

@@ -1,22 +1,22 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Icon from "../MaterialUI/DataDisplay/Icon";
-import { branchLength } from "./settings";
+import { branchLengthSpacing } from "./settings";
 import classNames from "classnames";
 
 const useStyles = makeStyles(theme => ({
 	beforeIndicator: {
 		backgroundColor: "#666",
-		marginLeft: `-${branchLength + 1}px`,
-		width: `${branchLength + 1}px`,
-		height: "1px",
+		marginLeft: `-${theme.spacing(branchLengthSpacing + 0.1)}`,
+		width: `${theme.spacing(branchLengthSpacing + 0.1)}`,
+		height: theme.spacing(0.1),
 		zIndex: 99,
 		position: "absolute",
 	},
 	nonIndicator: {
-		height: "1px",
-		width: `${branchLength + 21}px`,
-		margin: `auto 0 auto -${branchLength + 1}px`,
+		height: theme.spacing(0.1),
+		width: `${theme.spacing(branchLengthSpacing + 2.1)}`,
+		margin: `auto 0 auto -${theme.spacing(branchLengthSpacing + 0.1)}`,
 		backgroundColor: "#666",
 		alignSelf: "stretch",
 		flex: "0 0 auto",
@@ -30,8 +30,8 @@ const useStyles = makeStyles(theme => ({
 		border: props.isSelectedNode ? `1px solid ${theme.palette.grey.borders}` : undefined,
 	}),
 	indicator: props => ({
-		fontSize: "10px",
-		padding: "10px 0 10px 10px",
+		fontSize: theme.spacing(1),
+		padding: theme.spacing(1, 0, 1, 1),
 		cursor: "pointer",
 		flex: "0 0 auto",
 		color: props.open

package/src/components/Treeview/Label.test.js

@@ -49,17 +49,27 @@ describe("Indicator", () => {
 
 describe("BeforeIndicator", () => {
 	it("renders a branch continuation before indicator", () =>
-		expect(<BeforeIndicator />, "when mounted", "to have style rules satisfying", "to contain", "margin-left: -16px;"));
+		expect(
+			<MuiThemeProvider theme={theme}>
+				<BeforeIndicator />
+			</MuiThemeProvider>,
+			"when mounted",
+			"to have style rules satisfying",
+			"to contain",
+			"margin-left: -1rem;",
+		));
 });
 
 describe("NonIndicator", () => {
 	it("renders a branch continuation", () =>
 		expect(
-			<NonIndicator />,
+			<MuiThemeProvider theme={theme}>
+				<NonIndicator />
+			</MuiThemeProvider>,
 			"when mounted",
 			"to have style rules satisfying",
 			"to contain",
-			"margin: auto 0 auto -16px;",
+			"margin: auto 0 auto -1rem;",
 		));
 });
 

package/src/components/Treeview/Leaf.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { branchLength } from "./settings";
+import { branchLengthSpacing } from "./settings";
 import classNames from "classnames";
 
 const useStyles = makeStyles(theme => ({
@@ -16,9 +16,9 @@ const useStyles = makeStyles(theme => ({
 			backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
 			position: "absolute",
 			top: "calc(50%)",
-			left: `-${branchLength + 1}px`,
+			left: `-${theme.spacing(branchLengthSpacing + 0.1)}`,
 			bottom: 0,
-			width: "1px",
+			width: theme.spacing(0.1),
 			height: "50%",
 		},
 	}),

package/src/components/Treeview/Leaf.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { createMuiTheme, TestWrapper } from "../../utils/testUtils";
 import { Root, Leaf } from "./Leaf";
 
 describe("Root", () => {
@@ -7,25 +6,7 @@ describe("Root", () => {
 });
 
 describe("Leaf", () => {
-	const theme = createMuiTheme();
-
 	it("renders a <li>", () => expect(<Leaf />, "when mounted", "to satisfy", <li />));
 
-	it("sets styling for a branch structure", () =>
-		expect(
-			<Leaf />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /:last-child::after {[^}]*left: -16px;[^}]*}/),
-		));
-
-	it("sets styling for a dark theme", () =>
-		expect(
-			<TestWrapper muiThemeProvider={{ theme }}>
-				<Leaf dark />
-			</TestWrapper>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /:last-child::after {[^}]*background-color: #333;[^}]*}/),
-		));
+	it("renders a dark <li>", () => expect(<Leaf dark />, "when mounted", "to satisfy", <li />));
 });

package/src/components/Treeview/settings.js

@@ -1,7 +1,10 @@
 // in px
 // How far from parent left edge to vertical branch under it
 export const branchIndent = 14;
+export const branchIndentSpacing = 1.4;
 // How far from vertical branch to children's left edge
 export const branchLength = 15;
+export const branchLengthSpacing = 1.5;
 // How far up from bottom edge of node should horizontal branch sit
 export const branchHeight = 20;
+export const branchHeightSpacing = 2;

package/src/hocs/withScrollBox.js

@@ -15,16 +15,10 @@ const withScrollBox = WrappedComp =>
 	React.forwardRef(({ onScroll, ...otherProps }, externalRef) => {
 		const classes = useStyles();
 
-		const mergeRef = (node, measureRef) => {
-			measureRef(node);
-
-			if (externalRef) externalRef.current = node;
-		};
-
 		return (
-			<Measure bounds>
+			<Measure bounds innerRef={externalRef}>
 				{({ measureRef, contentRect }) => (
-					<div className={classes.scrollbox} onScroll={onScroll} ref={node => mergeRef(node, measureRef)}>
+					<div className={classes.scrollbox} onScroll={onScroll} ref={measureRef}>
 						<WrappedComp
 							{...otherProps}
 							height={safeGet(contentRect, "bounds", "height")}

package/src/hooks/useMultipleFieldEditState.test.js

@@ -411,7 +411,6 @@ describe("useMultipleFieldEditState", () => {
 			.returns(useDispatchWithModulesDataSpy);
 
 		try {
-			// TODOJOC
 			const mountedComponent = mountComponent();
 
 			const fieldComponent = mountedComponent.find(`#id1-prop1-update`);

package/src/hooks/useWindowSize.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+
+export const useWindowSize = () => {
+	const [windowSize, setWindowSize] = useState({
+		innerWidth: window.innerWidth,
+		innerHeight: window.innerHeight,
+		outerWidth: window.outerWidth,
+		outerHeight: window.outerHeight,
+	});
+
+	useEffect(() => {
+		const handleResize = () => {
+			const haveChanged =
+				windowSize.innerWidth !== window.innerWidth ||
+				windowSize.innerHeight !== window.innerHeight ||
+				windowSize.outerWidth !== window.outerWidth ||
+				windowSize.outerHeight !== window.outerHeight;
+
+			if (haveChanged) {
+				setWindowSize({
+					innerWidth: window.innerWidth,
+					innerHeight: window.innerHeight,
+					outerWidth: window.outerWidth,
+					outerHeight: window.outerHeight,
+				});
+			}
+		};
+
+		handleResize();
+
+		window.addEventListener("resize", handleResize);
+
+		return () => window.removeEventListener("resize", handleResize);
+	}, [windowSize]);
+
+	return windowSize;
+};
+
+export default useWindowSize;