orc-shared 5.10.2-dev.4 → 5.99.0-dev.2

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

@@ -1,17 +1,18 @@
 import React from "react";
-import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
 import Immutable from "immutable";
 import { mount } from "enzyme";
+import { ScopeIcon } from "../MaterialUI/ScopeSelector/TreeItem";
 import sinon from "sinon";
-import Icon from "../Icon";
-import { ScopeIcon, ContentLabel, ScopeNode, ScopeText } from "./ScopeNode";
+import { ScopeNode } from "./ScopeNode";
 import { TestWrapper } from "../../utils/testUtils";
+import { createMuiTheme } from "../../utils/testUtils";
+
+const theme = createMuiTheme();
 
 describe("ScopeNode", () => {
-	let closeSelector, store;
+	let onClick, store;
 	beforeEach(() => {
-		closeSelector = sinon.spy().named("close");
+		onClick = sinon.spy().named("onClick");
 		store = {
 			subscribe: () => {},
 			dispatch: () => {},
@@ -24,208 +25,128 @@ describe("ScopeNode", () => {
 
 	it("displays an icon and a label for a scope", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode name="A scope" type="test" id="ScopeId" closeSelector={closeSelector} isAuthorizedScope={true} />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name="A scope" type="test" scopeId="ScopeId" isAuthorizedScope={true} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId" onClick={closeSelector}>
-				<ScopeIcon type="test" />
-				<ScopeText>A scope</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="test" />
+					<div>A scope</div>
+				</div>
+			</TestWrapper>,
 		));
 
 	it("displays an icon and a label for the global scope", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode name="A scope" type="Global" id="ScopeId" closeSelector={closeSelector} isAuthorizedScope={true} />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name="A scope" type="Global" scopeId="ScopeId" isAuthorizedScope={true} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId" onClick={closeSelector} isGlobal={true}>
-				<ScopeIcon type="Global" />
-				<ScopeText>A scope</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="Global" />
+					<div>A scope</div>
+				</div>
+			</TestWrapper>,
 		));
 
 	it("displays an icon and a label for an unauthorized scope", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode name="A scope" type="test" id="ScopeId" closeSelector={closeSelector} />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name="A scope" type="test" scopeId="ScopeId" />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId">
-				<ScopeIcon type="test" />
-				<ScopeText>A scope</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="test" />
+					<div>A scope</div>
+				</div>
+			</TestWrapper>,
 		));
 
 	it("displays an icon and a the fallback id for a scope when name is undefined", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode type="test" id="ScopeId" closeSelector={closeSelector} isAuthorizedScope={true} />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode type="test" scopeId="ScopeId" isAuthorizedScope={true} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId" onClick={closeSelector}>
-				<ScopeIcon type="test" />
-				<ScopeText>ScopeId</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="test" />
+					<div>ScopeId</div>
+				</div>
+			</TestWrapper>,
 		));
 
 	it("displays an icon and a the fallback id for a scope when name is null", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode name={null} type="test" id="ScopeId" closeSelector={closeSelector} isAuthorizedScope={true} />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name={null} type="test" scopeId="ScopeId" isAuthorizedScope={true} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId" onClick={closeSelector}>
-				<ScopeIcon type="test" />
-				<ScopeText>ScopeId</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="test" />
+					<div>ScopeId</div>
+				</div>
+			</TestWrapper>,
 		));
 
 	it("handles virtual scopes", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<ScopeNode
-						name="A scope"
-						type="Virtual"
-						id="ScopeId"
-						isAuthorizedScope={true}
-						closeSelector={closeSelector}
-					/>
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name="A scope" type="Virtual" scopeId="ScopeId" isAuthorizedScope={true} />
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodeScopeId">
+					<ScopeIcon type="Virtual" />
+					<div>A scope</div>
+				</div>
+			</TestWrapper>,
+		));
+
+	it("displays an icon without label for a scope with custom children", () =>
+		expect(
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode type="test" isAuthorizedScope={true}>
+					<div>Another Display Test</div>
+				</ScopeNode>
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<ContentLabel id="selectorNodeScopeId">
-				<ScopeIcon type="Virtual" />
-				<ScopeText>A scope</ScopeText>
-			</ContentLabel>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<div id="selectorNodescopeUnknown">
+					<ScopeIcon type="test" />
+					<div>Another Display Test</div>
+				</div>
+			</TestWrapper>,
 		));
 
-	it("Call onScopeSelect on Node click if scope type is not virtual", () => {
+	it("Call onClick on Node click when defined", () => {
 		const component = (
-			<TestWrapper provider={{ store }} memoryRouter>
-				<ScopeNode name="A scope" type="test" id="ScopeId" closeSelector={closeSelector} isAuthorizedScope={true} />
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }} memoryRouter={{}}>
+				<ScopeNode name="A scope" type="test" scopeId="ScopeId" onClick={onClick} isAuthorizedScope={true} />
 			</TestWrapper>
 		);
 
-		const preventDefaultSpy = sinon.spy();
-
 		const mountedComponent = mount(component);
 
 		const event = {
-			preventDefault: preventDefaultSpy,
+			preventDefault: () => {},
 		};
 
-		const node = mountedComponent.find(ContentLabel);
+		const node = mountedComponent.find("[data-qa='content-label']").first();
 
 		node.invoke("onClick")(event);
 
-		expect(preventDefaultSpy, "was called");
-		expect(closeSelector, "to have a call satisfying", { args: [event] });
-	});
-});
-
-describe("ContentLabel", () => {
-	let onClick;
-	beforeEach(() => {
-		onClick = () => {};
-	});
-
-	it("sets css for authorized Global scope", () =>
-		expect(
-			<ContentLabel id="selectorNodeScopeId" isGlobal={true} onClick={onClick} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "text-transform: uppercase;")
-				.and("to contain", ":hover {background-color: #222;}")
-				.and("not to contain", "color: #999999")
-				.and("not to contain", "cursor: default;"),
-		));
-
-	it("sets css for unauthorized Global scope", () =>
-		expect(
-			<ContentLabel id="selectorNodeScopeId" isGlobal={true} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "text-transform: uppercase;")
-				.and("not to contain", ":hover {background-color: #222;}")
-				.and("to contain", "color: #999999")
-				.and("to contain", "cursor: default;"),
-		));
-
-	it("sets css for a not-clickable and a non-global scope", () =>
-		expect(
-			<ContentLabel isGlobal={false} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("not to contain", "text-transform: uppercase;")
-				.and("not to contain", ":hover {background-color: #222;}")
-				.and("to contain", "color: #999999")
-				.and("to contain", "cursor: default;"),
-		));
-
-	it("sets css for a clickable and a non-global scope", () =>
-		expect(
-			<ContentLabel isGlobal={false} onClick={onClick} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("not to contain", "text-transform: uppercase;")
-				.and("to contain", ":hover {background-color: #222;}")
-				.and("not to contain", "color: #999999")
-				.and("not to contain", "cursor: default;"),
-		));
-});
-
-describe("ScopeIcon", () => {
-	let theme;
-	beforeEach(() => {
-		theme = {
-			icons: {
-				scopeTypes: {
-					Test: "test-icon",
-				},
-			},
-			colors: {
-				scopeTypes: {
-					Test: "#00ff00",
-				},
-			},
-		};
+		expect(onClick, "to have a call satisfying", { args: [event] });
 	});
-
-	it("renders an icon with id based on scope type", () =>
-		expect(<ScopeIcon theme={theme} type="Test" />, "when mounted", "to satisfy", <Icon id="test-icon" />));
-
-	it("renders in a color based on scope type", () =>
-		expect(
-			<ScopeIcon theme={theme} type="Test" />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"color: #00ff00;",
-		));
-
-	it("by default renders a cross", () =>
-		expect(<ScopeIcon theme={theme} type="N/A" />, "when mounted", "to satisfy", <Icon id="cross" />));
 });

package/src/components/ScopeExtendedConfigurationLoader.test.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import ScopeExtendedConfigurationLoader from "./ScopeExtendedConfigurationLoader";
 import { mount } from "enzyme";
 import { getScopeExtendedConfiguration } from "../actions/scopes";
@@ -58,9 +57,7 @@ describe("ScopeExtendedConfigurationLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ScopeExtendedConfigurationLoader />
-				</ThemeProvider>
+				<ScopeExtendedConfigurationLoader />
 			</Provider>
 		);
 

package/src/components/Sidepanel.js

@@ -1,40 +1,46 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import transition from "styled-transition-group";
-
-const getProp = propName => props => props[propName];
-
-const panelWidth = getProp("width");
+import { CSSTransition } from "react-transition-group";
+import { makeStyles } from "@material-ui/core/styles";
+import classNames from "classnames";
 
 const getModalRoot = () => document.getElementById("modal");
 
-export const PanelDrawer = transition.div`
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	width: ${panelWidth};
-
-	transition: transform ${getProp("timeout")}ms ease-out;
-
-	&:enter {
-		transform: translateX(${panelWidth});
-	}
-	&:enter-active {
-		transform: translateX(0);
-	}
-	&:exit {
-		transform: translateX(0);
-	}
-	&:exit-active {
-		transform: translateX(${panelWidth});
-	}
-`;
-PanelDrawer.defaultProps = {
-	timeout: 1000,
-	unmountOnExit: true,
+const useStyles = makeStyles(theme => ({
+	panel: props => ({
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		right: 0,
+		width: theme.spacing(props.widthSpacing),
+
+		"&.enter": {
+			transform: `translateX(${theme.spacing(props.widthSpacing)})`,
+		},
+		"&.enter-active": {
+			transform: "translateX(0)",
+			transition: `transform ${props.timeout}ms ease-out`,
+		},
+		"&.exit": {
+			transform: "translateX(0)",
+		},
+		"&.exit-active": {
+			transform: `translateX(${theme.spacing(props.widthSpacing)})`,
+			transition: `transform ${props.timeout}ms ease-out`,
+		},
+	}),
+}));
+
+const Sidepanel = ({ in: inProp, widthSpacing = 30, timeout = 1000, children, className }) => {
+	const classes = useStyles({ widthSpacing, timeout });
+
+	const panel = (
+		<CSSTransition in={inProp} timeout={timeout} unmountOnExit>
+			<div className={classNames(classes.panel, className)}>{children}</div>
+		</CSSTransition>
+	);
+
+	return ReactDOM.createPortal(panel, getModalRoot());
 };
 
-const Sidepanel = props => ReactDOM.createPortal(<PanelDrawer {...props} />, getModalRoot());
-
 export default Sidepanel;

package/src/components/Sidepanel.test.js

@@ -1,6 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Sidepanel, { PanelDrawer } from "./Sidepanel";
+import Sidepanel from "./Sidepanel";
+import { createMuiTheme, TestWrapper } from "../utils/testUtils";
+
+const theme = createMuiTheme();
 
 class RenderSidepanel extends React.Component {
 	render() {
@@ -32,7 +35,7 @@ describe("Sidepanel", () => {
 		document.body.removeChild(modalRoot);
 	});
 
-	it("renders a PanelDrawer in a portal", () => {
+	it("renders sidepanel in a portal", () => {
 		ReactDOM.render(
 			<RenderSidepanel in>
 				<div id="inner">Foo</div>
@@ -42,32 +45,56 @@ describe("Sidepanel", () => {
 		return expect(modalRoot, "queried for first", "div#inner", "to be a", "DOMElement");
 	});
 
-	describe("PanelDrawer", () => {
-		it("sets the width it is given", () =>
-			expect(
-				<PanelDrawer in width="25vw" />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"width: 25vw;",
-			));
+	it("sets the width it is given", () => {
+		ReactDOM.render(
+			<TestWrapper muiThemeProvider={{ theme }}>
+				<Sidepanel in widthSpacing={25}>
+					<div id="inner">Foo</div>
+				</Sidepanel>
+			</TestWrapper>,
+			appRoot,
+		);
+		return expect(
+			modalRoot,
+			"queried for first",
+			"div#modal > div",
+			"to have style rules satisfying",
+			"to contain",
+			"width: 15.625rem",
+		);
+	});
 
-		it("sets transition according to timeout", () =>
-			expect(
-				<PanelDrawer in timeout={300} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"transition: transform 300ms",
-			));
+	it("sets transition according to timeout", () => {
+		ReactDOM.render(
+			<Sidepanel in timeout={300}>
+				<div id="inner">Foo</div>
+			</Sidepanel>,
+			appRoot,
+		);
+		return expect(
+			modalRoot,
+			"queried for first",
+			"div#modal > div",
+			"to have style rules satisfying",
+			"to contain",
+			"transition: transform 300ms",
+		);
+	});
 
-		it("sets default transition", () =>
-			expect(
-				<PanelDrawer in />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"transition: transform 1000ms",
-			));
+	it("sets default transition", () => {
+		ReactDOM.render(
+			<Sidepanel in>
+				<div id="inner">Foo</div>
+			</Sidepanel>,
+			appRoot,
+		);
+		return expect(
+			modalRoot,
+			"queried for first",
+			"div#modal > div",
+			"to have style rules satisfying",
+			"to contain",
+			"transition: transform 1000ms",
+		);
 	});
 });

package/src/components/Spritesheet.js

@@ -1,35 +1,37 @@
 import React from "react";
-import styled from "styled-components";
-import Icon from "./Icon";
+import { makeStyles } from "@material-ui/core";
+import Icon from "./MaterialUI/DataDisplay/Icon";
 
-export const Wrapper = styled.div`
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-around;
-	overflow-y: auto;
-	height: 100%;
-`;
-
-export const IconBlock = styled.div`
-	flex: 0 0 30%;
-	border: 1px solid #999;
-	margin: 5px;
-	padding: 5px 10px;
-	font-size: 24px;
-`;
+const useStyles = makeStyles(theme => ({
+	wrapper: {
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "space-around",
+		overflowY: "auto",
+		height: "100%",
+	},
+	iconBlock: {
+		flex: "0 0 30%",
+		border: "1px solid #999",
+		margin: theme.spacing(0.5),
+		padding: theme.spacing(0.5, 1),
+		fontSize: theme.spacing(2.4),
+	},
+}));
 
 const arrify = thing => [].slice.call(thing);
 
 const SpriteSheet = () => {
+	const classes = useStyles();
 	const iconIds = arrify(document.querySelectorAll('symbol[id^="icon-"]')).map(elm => elm.id.replace(/^icon-/, ""));
 	return (
-		<Wrapper>
+		<div className={classes.wrapper}>
 			{iconIds.map(id => (
-				<IconBlock key={id}>
+				<div className={classes.iconBlock} key={id}>
 					<Icon id={id} /> {id}
-				</IconBlock>
+				</div>
 			))}
-		</Wrapper>
+		</div>
 	);
 };
 

package/src/components/Spritesheet.test.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Spritesheet, { Wrapper, IconBlock } from "./Spritesheet";
-import Icon from "./Icon";
+import Spritesheet from "./Spritesheet";
+import Icon from "./MaterialUI/DataDisplay/Icon";
 
 describe("Spritesheet", () => {
 	beforeEach(() => {
@@ -19,16 +19,16 @@ describe("Spritesheet", () => {
 			<Spritesheet />,
 			"when mounted",
 			"to satisfy",
-			<Wrapper>
-				<IconBlock>
+			<div>
+				<div>
 					<Icon id="test-1" /> {"test-1"}
-				</IconBlock>
-				<IconBlock>
+				</div>
+				<div>
 					<Icon id="test-2" /> {"test-2"}
-				</IconBlock>
-				<IconBlock>
+				</div>
+				<div>
 					<Icon id="test-3" /> {"test-3"}
-				</IconBlock>
-			</Wrapper>,
+				</div>
+			</div>,
 		));
 });

package/src/components/Text.js

@@ -1,50 +1,4 @@
-import React from "react";
 import pt from "prop-types";
-import styled, { keyframes } from "styled-components";
-import { getThemeProp } from "../utils";
-import withErrorBoundary from "../hocs/withErrorBoundary";
-import useLabelMessage from "../hooks/useLabelMessage";
-
-const fadeCycle = keyframes`
-	0% {
-		opacity: 0.3;
-	}
-	100% {
-		opacity: 0.7;
-	}
-`;
-
-export const Placeholder = styled.span`
-	display: inline-block;
-	height: 1em;
-	width: 6em;
-	border-radius: 0.5em;
-	background-color: ${getThemeProp(["colors", "textMedium"], "#999999")};
-	animation: ${fadeCycle} 3s infinite alternate;
-`;
-
-const Text = ({ message: rawMessage, error }) => {
-	const [labelMessage, missingValues] = useLabelMessage(rawMessage);
-
-	if (error || (!rawMessage && rawMessage !== "")) {
-		return (
-			<span
-				style={{
-					color: "red",
-					backgroundColor: "white",
-					fontWeight: "bold",
-				}}
-			>
-				Errored: {error && error.message ? error.message : "No message provided"}
-			</span>
-		);
-	}
-
-	if (missingValues) {
-		return <Placeholder />;
-	}
-	return labelMessage;
-};
 
 export const ptLabel = pt.oneOfType([
 	pt.string,
@@ -53,6 +7,3 @@ export const ptLabel = pt.oneOfType([
 		defaultMessage: pt.string.isRequired,
 	}),
 ]);
-Text.propTypes = { message: ptLabel };
-
-export default withErrorBoundary("Text")(Text);