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

package/src/components/ApplicationModuleLoader.test.js

@@ -1,14 +1,13 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import { Loader } from "./Authenticate";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
 import { mount } from "enzyme";
 import { getDefaultScope, getScopes } from "../actions/scopes";
 import sinon from "sinon";
 import { initializeFirstModuleScope } from "../actions/modules";
 import { scopeTypes } from "../constants";
+import LoadingIcon from "./LoadingIcon";
 
 const TestComp = () => {
 	return <div className="test" />;
@@ -66,17 +65,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -84,17 +79,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "loadedModulesScope"], Immutable.fromJS(["moduleA"]));
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -103,11 +94,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 
@@ -128,11 +117,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 

package/src/components/Authenticate.js

@@ -1,12 +1,23 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp, safeGet } from "../utils";
-import Placeholder from "../components/Placeholder";
+import { makeStyles } from "@material-ui/core/styles";
+import { safeGet } from "../utils";
 import { useSelector } from "react-redux";
 import { unwrapImmutable } from "../utils";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 import { ERROR, LOGOUT } from "../reducers/request";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
+import LoadingIcon from "./LoadingIcon";
+
+const useStyles = makeStyles({
+	wrapper: {
+		display: "flex",
+		width: "60%",
+		height: "100%",
+		padding: "0 20vw",
+		flexDirection: "column",
+		justifyContent: "center",
+	},
+});
 
 export const useAuthenticationData = () => ({
 	loading: useSelector(state => state.getIn(["requests", "actives", GET_AUTHENTICATION_PROFILE])),
@@ -15,34 +26,21 @@ export const useAuthenticationData = () => ({
 	needLogin: useSelector(state => state.getIn(["requests", LOGOUT])),
 });
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-export const Loader = withTheme(props => (
-	<Wrapper>
-		<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-	</Wrapper>
-));
-
 export const Error = ({ requestError, needLogin }) => {
+	const classes = useStyles();
+
 	if (needLogin) {
 		return (
-			<Wrapper>
+			<div className={classes.wrapper}>
 				<h1>Not logged in</h1>
-			</Wrapper>
+			</div>
 		);
 	}
 	return (
-		<Wrapper>
+		<div className={classes.wrapper}>
 			<h1>{safeGet(requestError, "payload", "message") || "An error occurred"}</h1>
 			Last failing action: <pre>{JSON.stringify(requestError, null, 2)}</pre>
-		</Wrapper>
+		</div>
 	);
 };
 
@@ -50,7 +48,7 @@ const Authenticate = ({ children }) => {
 	const { loading, authedUser, requestError, needLogin } = useAuthenticationData();
 
 	if (loading) {
-		return <Loader />;
+		return <LoadingIcon />;
 	}
 	if (!authedUser) {
 		return <Error {...{ requestError, needLogin }} />;

package/src/components/Authenticate.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Authenticate, { Loader, Wrapper } from "./Authenticate";
+import Authenticate from "./Authenticate";
 import { ERROR, LOGOUT } from "../reducers/request";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
+import LoadingIcon from "./LoadingIcon";
 
 const TestComp = () => {
 	return <div className="test" />;
@@ -64,17 +64,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["requests", "actives", GET_AUTHENTICATION_PROFILE], true);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -82,17 +78,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate applicationModuleReady={false}>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate applicationModuleReady={false}>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -105,10 +97,10 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>Not logged in</h1>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -127,8 +119,8 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>404 - NotFound</h1>
 				{"Last failing action: "}
 				<pre>
@@ -140,7 +132,7 @@ describe("Authenticate", () => {
 						"  }\n" +
 						"}"}
 				</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -158,11 +150,11 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>An error occurred</h1>
 				Last failing action: <pre>{'{\n  "type": "TEST_ACTION"\n}'}</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 });

package/src/components/ErrorPlaceholder.js

@@ -1,25 +1,8 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-const ErrorPlaceholder = withTheme(({ message, description, onClick, ...props }) => (
-	<Placeholder
-		icon={getThemeProp(["icons", "reportProblem"], "error")(props)}
-		warn
-		title={message}
-		subtitle={description}
-		onClick={onClick}
-	/>
-));
+const ErrorPlaceholder = ({ message, description }) => (
+	<Placeholder icon="report-problem-triangle" error title={message} subtitle={description} />
+);
 
 export default ErrorPlaceholder;

package/src/components/ErrorPlaceholder.test.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 
 describe("ErrorPlaceholder", () => {
@@ -14,9 +13,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -27,7 +24,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" />
+				<Placeholder icon="report-problem-triangle" error title="Error" />
 			</Provider>,
 		));
 
@@ -40,9 +37,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{ icons: { error: "error" } }}>
-					<ErrorPlaceholder message="Error" description="This failed" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" description="This failed" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -53,7 +48,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" subtitle="This failed" />
+				<Placeholder icon="report-problem-triangle" error title="Error" subtitle="This failed" />
 			</Provider>,
 		));
 
@@ -67,9 +62,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" onClick={handler} />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" onClick={handler} />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -80,7 +73,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" onClick={handler} />
+				<Placeholder icon="report-problem-triangle" error title="Error" onClick={handler} />
 			</Provider>,
 		);
 	});

package/src/components/Form/InputField.test.js

@@ -114,10 +114,11 @@ describe("InputField", () => {
 					if (type === "MultiSelector") {
 						val = ["thing"];
 						emptyVal = [];
+						target = "[role='button']";
 					} else {
 						val = "thing";
+						target = "select";
 					}
-					target = "select";
 				} else if (type === "SwitchInput") {
 					val = true;
 				} else if (type === "DateInput") {

package/src/components/Form/Inputs/MultiSelector.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Select from "../../MaterialUI/Inputs/Select";
+import { memoize } from "../../../utils";
+import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+
+export const selectEventUpdater = memoize(update => value => update(value));
+
+const MultiSelector = ({ value, options, update, ...props }) => {
+	const selectProps = new SelectProps();
+
+	selectProps.set(SelectProps.propNames.value, value);
+	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
+	selectProps.set(SelectProps.propNames.disabled, props.disabled);
+	selectProps.set(SelectProps.propNames.multiple, true);
+	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+
+	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
+	selectProps.set(SelectProps.propNames.error, hasError);
+
+	return <Select options={options} selectProps={selectProps} />;
+};
+
+export default MultiSelector;

package/src/components/Form/Inputs/MultiSelector.test.js

@@ -0,0 +1,112 @@
+import React from "react";
+import sinon from "sinon";
+import MultiSelector, { selectEventUpdater } from "./MultiSelector";
+import { TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+import Immutable from "immutable";
+import SelectMUI from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import TooltippedTypography from "../../MaterialUI/DataDisplay/TooltippedElements/TooltippedTypography";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
+
+describe("MultiSelector", () => {
+	let update, state, store, chevronDown;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en-CA",
+			},
+		});
+
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+
+		chevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+	});
+
+	const theme = createMuiTheme();
+
+	it("renders a multi selector with multiple options", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					value={["English"]}
+					disableUnderline={true}
+					IconComponent={chevronDown}
+					error={false}
+					multiple={true}
+					renderValue={selected => selected.join(", ")}
+				>
+					<MenuItem key="English" value="English">
+						<TooltippedTypography children="English" titleValue="English" />
+					</MenuItem>
+					<MenuItem key="Francais" value="Francais">
+						<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>,
+		));
+
+	it("renders a multi selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					required={true}
+					value={[]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<SelectMUI value={[""]} disableUnderline={true} IconComponent={chevronDown} error={true} multiple={true}>
+						<MenuItem key="English" value="English">
+							<TooltippedTypography children="English" titleValue="English" />
+						</MenuItem>
+						<MenuItem key="Francais" value="Francais">
+							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+						</MenuItem>
+					</SelectMUI>
+					<div></div>
+				</div>
+			</TestWrapper>,
+		);
+	});
+});
+
+describe("selectEventUpdater", () => {
+	let update;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+	});
+
+	it("creates a handler for an event and calls update with the value of the target", () =>
+		expect(selectEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
+			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
+		));
+
+	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+});

package/src/components/Form/Inputs/index.js

@@ -1,5 +1,5 @@
 import Selector from "./Selector";
-import MultiSelector from "../../MultiSelector";
+import MultiSelector from "./MultiSelector";
 import Button from "./Button";
 import { ReadOnly } from "./ReadOnly";
 import { SwitchInput } from "./Toggles";