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

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

@@ -1,17 +1,23 @@
 import React from "react";
 import sinon from "sinon";
-import MultiSelector, { selectEventUpdater } from "./MultiSelector";
-import { TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+import MultiSelector from "./MultiSelector";
+import { TestWrapper, createMuiTheme, extractMessages } 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";
+import FormControl from "@material-ui/core/FormControl";
+import { render, screen, fireEvent } from "@testing-library/react";
+import sharedMessages from "../../../sharedMessages";
+
+const messages = extractMessages(sharedMessages);
 
 describe("MultiSelector", () => {
-	let update, state, store, chevronDown;
+	let update, state, store, chevronDown, multipleRenderValue;
 	beforeEach(() => {
 		update = sinon.spy().named("update");
+		multipleRenderValue = sinon.fake.returns("En, It");
 
 		state = Immutable.fromJS({
 			locale: {
@@ -34,7 +40,7 @@ describe("MultiSelector", () => {
 
 	it("renders a multi selector with multiple options", () =>
 		expect(
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
 				<MultiSelector
 					update={update}
 					value={["English"]}
@@ -46,32 +52,34 @@ describe("MultiSelector", () => {
 			</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 provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<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>
+				</FormControl>
 			</TestWrapper>,
 		));
 
-	it("renders a multi selector with an error", () => {
+	it("renders a multi selector with select all and clear options without errors", () =>
 		expect(
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
 				<MultiSelector
 					update={update}
-					required={true}
-					value={[]}
+					addClearSelectAll={true}
+					value={["English"]}
 					options={[
 						{ value: "English", label: "English" },
 						{ value: "Francais", label: "Francais" },
@@ -80,9 +88,16 @@ describe("MultiSelector", () => {
 			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<SelectMUI value={[""]} disableUnderline={true} IconComponent={chevronDown} error={true} multiple={true}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<SelectMUI
+						value={["English"]}
+						disableUnderline={true}
+						IconComponent={chevronDown}
+						error={false}
+						multiple={false}
+						renderValue={selected => selected.join(", ")}
+					>
 						<MenuItem key="English" value="English">
 							<TooltippedTypography children="English" titleValue="English" />
 						</MenuItem>
@@ -90,23 +105,228 @@ describe("MultiSelector", () => {
 							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
 						</MenuItem>
 					</SelectMUI>
-					<div></div>
-				</div>
+				</FormControl>
 			</TestWrapper>,
+		));
+
+	it("Expect multipleRenderValue to be called and selection to be rendered correctly", () => {
+		const allOptions = [
+			{ value: "English", label: "English" },
+			{ value: "Francais", label: "Francais" },
+			{ value: "Italiano", label: "Italiano" },
+		];
+
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					multipleRenderValue={multipleRenderValue}
+					value={["English", "Italiano"]}
+					options={allOptions}
+				/>
+			</TestWrapper>
 		);
+
+		render(multiSelector);
+
+		const selectionText = screen.queryByText("En, It");
+
+		expect(selectionText, "not to be null");
+		expect(multipleRenderValue, "to have a call satisfying", { args: [["English", "Italiano"], allOptions] });
 	});
-});
 
-describe("selectEventUpdater", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
+	it("Expect to have both 'Select All' and 'Clear' options to be available with partial selection", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
+
+		expect(selectAllOption, "not to be null");
+		expect(clearOption, "not to be null");
 	});
 
-	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("Expect to have only 'Clear' option to be available with all options being selected", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English", "Francais"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
+
+		expect(selectAllOption, "to be null");
+		expect(clearOption, "not to be null");
+	});
+
+	it("Expect to have only 'Select All' option to be available with an empty selection", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={[]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
 
-	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+		expect(selectAllOption, "not to be null");
+		expect(clearOption, "to be null");
+	});
+
+	it("Picking one selection should update with it along with existing ones", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Italiano");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [["English", "Italiano"]] }]);
+	});
+
+	it("The 'Select All' option should update with all values", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Select All");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [["English", "Francais", "Italiano"]] }]);
+	});
+
+	it("The 'Clear' option should update with an empty list", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Clear");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [[]] }]);
+	});
+
+	it("renders a multi selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} 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={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<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>
+				</FormControl>
+			</TestWrapper>,
+		);
+	});
 });

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

@@ -1,17 +1,25 @@
 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 Selector = ({ 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.update, selectEventUpdater(update));
+	selectProps.set(SelectProps.propNames.update, update);
+	selectProps.set(SelectProps.propNames.autoWidth, false);
+	selectProps.set(SelectProps.propNames.positionOverride, {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left",
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left",
+		},
+	});
 
 	const hasError = props.required && !value ? true : false;
 	selectProps.set(SelectProps.propNames.error, hasError);

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

@@ -1,12 +1,13 @@
 import React from "react";
 import sinon from "sinon";
-import Selector, { selectEventUpdater } from "./Selector";
+import Selector from "./Selector";
 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";
+import { mount } from "enzyme";
 
 describe("Selector", () => {
 	let update, state, store, chevronDown;
@@ -88,18 +89,32 @@ describe("Selector", () => {
 			</TestWrapper>,
 		);
 	});
-});
 
-describe("selectEventUpdater", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
-	});
+	it("Update is invoked when selection has changed", () => {
+		const mountedComponent = mount(
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider intlProvider>
+				<Selector
+					update={update}
+					required={true}
+					value={null}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+		);
 
-	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"] }]),
-		));
+		const selectMui = mountedComponent.find(SelectMUI);
 
-	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+		const event = {
+			target: {
+				value: "Francais",
+			},
+		};
+
+		selectMui.invoke("onChange")(event);
+
+		expect(update, "to have calls satisfying", [{ args: ["Francais"] }]);
+	});
 });

package/src/components/InternetExplorerWarningMessage.js

@@ -8,29 +8,29 @@ import sharedMessages from "../sharedMessages";
 const useStyles = makeStyles(theme => ({
 	container: {
 		fontFamily: "'Open Sans', sans-serif",
-		fontSize: "14px",
+		fontSize: theme.spacing(1.4),
 		background: "rgba(255,255,255,0.85)",
-		maxWidth: "700px",
-		width: "calc(100% - 40px)",
+		maxWidth: theme.spacing(70),
+		width: `calc(100% - ${theme.spacing(4)})`,
 		display: "block",
 		top: "50%",
 		left: "50%",
 		position: "absolute",
-		boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
+		boxShadow: `${theme.spacing(0, 0.4, 0.8, 0)} rgba(0, 0, 0, 0.2), ${theme.spacing(0, 0.6, 2, 0)} rgba(0, 0, 0, 0.19)`,
 		transform: "translateY(-50%) translateX(-50%)",
-		padding: "80px",
-		borderRadius: "3px",
+		padding: theme.spacing(8),
+		borderRadius: theme.spacing(0.3),
 		"& header": {
-			paddingBottom: "20px",
-			marginBottom: "20px",
+			paddingBottom: theme.spacing(2),
+			marginBottom: theme.spacing(2),
 			borderBottom: "1px solid #999",
 			"& h1": {
 				fontWeight: 400,
-				fontWize: "30px",
+				fontWize: theme.spacing(3),
 				marginTop: 0,
-				marginBottom: "5px",
+				marginBottom: theme.spacing(0.5),
 				"& p": {
-					fontSize: "16px",
+					fontSize: theme.spacing(1.6),
 					margin: 0,
 					color: "#999",
 					fontWeight: 400,
@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({
 		flexWrap: "wrap",
 		width: "100%",
 		boxSizing: "border-box",
-		marginTop: "40px",
+		marginTop: theme.spacing(4),
 	},
 	gridItem: {
 		display: "flex",
@@ -52,16 +52,16 @@ const useStyles = makeStyles(theme => ({
 		flexDirection: "column",
 	},
 	browserIconContainer: {
-		width: "48px",
+		width: theme.spacing(4.8),
 		textAlign: "center",
 	},
 	browserIconCaption: {
-		fontSize: "11px",
+		fontSize: theme.spacing(1.1),
 		color: "#999",
 	},
 	browserIcon: {
 		stroke: "none",
-		fontSize: "48px",
+		fontSize: theme.spacing(4.8),
 	},
 }));
 

package/src/components/MaterialUI/DataDisplay/Modal.js

@@ -24,12 +24,12 @@ const useStyles = makeStyles(theme => ({
 	},
 	containerWide: {
 		width: theme.spacing(106.4),
-		height: `calc(100% - 80px)`,
+		height: `calc(100% - ${theme.spacing(8)})`,
 		maxHeight: theme.spacing(73),
 	},
 	containerFullwidth: {
-		width: `calc(100% - 80px)`,
-		height: `calc(100% - 80px)`,
+		width: `calc(100% - ${theme.spacing(8)})`,
+		height: `calc(100% - ${theme.spacing(8)})`,
 	},
 	title: {
 		height: theme.spacing(4),

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js

@@ -44,18 +44,18 @@ const useStyles = makeStyles(theme => ({
 	},
 	textSkeleton: {
 		width: "100%",
-		height: 6,
+		height: theme.spacing(0.6),
 		animation: false,
 	},
 	chipSkeleton: {
-		width: 60,
-		height: 25,
+		width: theme.spacing(6),
+		height: theme.spacing(2.5),
 		animation: false,
-		borderRadius: "15px",
+		borderRadius: theme.spacing(1.5),
 	},
 	radioSkeleton: {
-		width: 17,
-		height: 17,
+		width: theme.spacing(1.7),
+		height: theme.spacing(1.7),
 		animation: false,
 	},
 	root: {

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -73,7 +73,7 @@ const useStyles = makeStyles(theme => ({
 	},
 	active: {
 		backgroundColor: `${theme.palette.primary.dark} !important`,
-		boxShadow: "inset 10px 0 10px 1px rgba(0,0,0,0.18)",
+		boxShadow: `inset ${theme.spacing(1, 0, 1, 0.1)} rgba(0,0,0,0.18)`,
 
 		"&:after": {
 			borderLeftColor: `${theme.palette.primary.dark} !important`,
@@ -165,7 +165,7 @@ const StepperModal = ({
 						<FormattedMessage {...sharedMessages.cancel} />
 					</Button>
 
-					{currentStep < steps.length - 1 &&
+					{(currentStep < steps.length - 1 || steps[currentStep]?.isIntermediate) &&
 						(steps[currentStep]?.actions?.length > 0 ? (
 							steps[currentStep].actions.map(action => (
 								<Button
@@ -191,7 +191,7 @@ const StepperModal = ({
 							</Button>
 						))}
 
-					{currentStep === steps.length - 1 && (
+					{currentStep === steps.length - 1 && !steps[currentStep]?.isIntermediate && (
 						<Button
 							variant="contained"
 							color="primary"

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.test.js

@@ -335,6 +335,80 @@ describe("StepperModal", () => {
 		expect(okCallback, "was called");
 	});
 
+	it("Renders StepperModal correctly without confirm button for an intermediate step", () => {
+		const open = true;
+		const title = "title";
+		const backdropClickCallback = jest.fn();
+		const okCallback = jest.fn();
+		const cancelCallback = jest.fn();
+		const modalProps = new ModalProps();
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				Handler: () => {},
+			},
+			{
+				value: "second value",
+				label: "second action",
+				Handler: () => {},
+			},
+		];
+		const steps = [{ title: "step1", content: <div>content</div>, actions, isIntermediate: true }];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+			</div>
+		);
+		const messageComponent = <div>{steps[0].content}</div>;
+
+		modalProps.set(ModalProps.propNames.title, titleComponent);
+		modalProps.set(ModalProps.propNames.open, open);
+		modalProps.set(ModalProps.propNames.backdropClickCallback, backdropClickCallback);
+		modalProps.set(ModalProps.propNames.type, "wide");
+
+		const actionPanel = (
+			<div>
+				<div></div>
+				<div>
+					<Button variant="outlined" disabled={false} onClick={() => cancelCallback()}>
+						{sharedMessages.cancel.defaultMessage}
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						first action
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						second action
+					</Button>
+				</div>
+			</div>
+		);
+
+		modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal
+					steps={steps}
+					title={title}
+					open={open}
+					confirmCallback={okCallback}
+					closeCallback={cancelCallback}
+				/>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<Modal message={messageComponent} modalProps={modalProps} />
+			</IntlProvider>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
 	it("Render closed modal", () => {
 		const open = false;
 

package/src/components/MaterialUI/DataDisplay/PredefinedElements/TableInfoBar.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
 	label: {
 		fontSize: theme.typography.h2Size,
 		fontFamily: theme.typography.fontFamily,
-		fontWeight: theme.typography.fontWeightMedium,
+		fontWeight: theme.typography.fontWeightRegular,
 	},
 }));
 

package/src/components/MaterialUI/DataDisplay/SelectionList.js

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