orc-shared 5.10.2 → 5.99.0-dev.10

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/DropMenu/Menu.js

@@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({
 	drawer: {
 		position: "absolute",
 		zIndex: 19999,
-		margin: "4px 0 0",
+		margin: theme.spacing(0.4, 0, 0),
 		left: props => (props.alignRight ? "auto" : "0"),
 		right: props => (props.alignRight ? "0" : "auto"),
 		transition: "opacity 100ms ease-out",
@@ -25,19 +25,19 @@ const useStyles = makeStyles(theme => ({
 		color: theme.palette.text.primary,
 		backgroundColor: "white",
 		border: `1px solid ${theme.palette.text.hint}`,
-		borderRadius: "5px",
+		borderRadius: theme.spacing(0.5),
 		listStyleType: "none",
-		padding: "5px 0",
+		padding: theme.spacing(0.5, 0),
 		margin: "0",
 		fontFamily: "Open Sans, sans-serif",
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		width: "max-content",
 	},
 	item: {
 		boxSizing: "border-box",
-		height: "30px",
-		minWidth: "178px",
-		padding: "9px 12px",
+		height: theme.spacing(3),
+		minWidth: theme.spacing(17.8),
+		padding: theme.spacing(0.9, 1.2),
 		display: "flex",
 		alignItems: "center",
 		cursor: "pointer",
@@ -47,8 +47,8 @@ const useStyles = makeStyles(theme => ({
 		},
 	},
 	itemIcon: {
-		paddingRight: "11px",
-		fontSize: "17px",
+		paddingRight: theme.spacing(1.1),
+		fontSize: theme.spacing(1.7),
 	},
 }));
 

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/Field.js

@@ -7,13 +7,13 @@ const useStyles = makeStyles(theme => ({
 		flex: "0 1 auto",
 		display: "flex",
 		flexDirection: "column",
-		marginTop: 20,
+		marginTop: theme.spacing(2),
 		position: "relative",
 	},
 	label: {
-		minHeight: 17,
+		minHeight: theme.spacing(1.7),
 		color: theme.palette.text.hint,
-		marginBottom: "10px",
+		marginBottom: theme.spacing(1),
 	},
 	invalidLabel: {
 		color: theme.palette.error.main,
@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
 		textAlign: "center",
 	},
 	labelOnly: {
-		marginBottom: "0px",
+		marginBottom: 0,
 	},
 	requiredLabel: {
 		"&::after": {

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/Button.js

@@ -9,10 +9,10 @@ const useStyles = makeStyles(theme => ({
 	positionedButton: {
 		width: "max-content",
 		position: "relative",
-		padding: "6px 14px !important",
+		padding: `${theme.spacing(0.6, 1.4)} !important`,
 		"&:hover": {
 			borderColor: "#4fa1f0",
-			boxShadow: "0 0 4px #4fa1f0",
+			boxShadow: `${theme.spacing(0, 0, 0.4)} #4fa1f0`,
 			outline: "none",
 			backgroundColor: "#f7f7f7 !important",
 		},

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import Select from "../../MaterialUI/Inputs/Select";
+import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+import sharedMessages from "../../../sharedMessages";
+
+const clearValue = "__#Clear#__";
+const selectAllValue = "__#SelectAll#__";
+
+const MultiSelector = ({ value, width = 700, options, update, addClearSelectAll, multipleRenderValue, ...props }) => {
+	const { formatMessage } = useIntl();
+
+	const valueUpdater = value => {
+		if (value.indexOf(clearValue) >= 0) {
+			update([]);
+		} else if (value.indexOf(selectAllValue) >= 0) {
+			update(options.map(x => x.value));
+		} else {
+			update(value);
+		}
+	};
+
+	const selectProps = new SelectProps();
+
+	const selectionOptions = [];
+
+	if (addClearSelectAll) {
+		if (value.length > 0) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.clear),
+				value: clearValue,
+			});
+		}
+		if (value.length !== options.length) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.selectAll),
+				value: selectAllValue,
+			});
+		}
+	}
+
+	const allOptions = [...selectionOptions, ...options];
+
+	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.multipleSelectWidth, width);
+	selectProps.set(SelectProps.propNames.update, valueUpdater);
+	selectProps.set(SelectProps.propNames.autoWidth, false);
+	selectProps.set(SelectProps.propNames.autoFocus, false);
+	selectProps.set(
+		SelectProps.propNames.renderValue,
+		multipleRenderValue ? () => multipleRenderValue(value, options) : null,
+	);
+	selectProps.set(SelectProps.propNames.positionOverride, {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left",
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left",
+		},
+	});
+
+	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
+	selectProps.set(SelectProps.propNames.error, hasError);
+
+	return <Select options={allOptions} selectProps={selectProps} />;
+};
+
+export default MultiSelector;