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

package/src/components/Loader.test.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import { mount, act } from "unexpected-reaction";
 import sinon from "sinon";
-import { spyOnConsole } from "../utils/testUtils";
+import { createMuiTheme, spyOnConsole, TestWrapper } from "../utils/testUtils";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 import Loader, { Loading } from "./Loader";
+import ColumnWrapper from "./ColumnWrapper";
+import LoadingIcon from "./LoadingIcon";
+
+const theme = createMuiTheme();
 
 describe("Loader placeholder", () => {
 	let clock;
@@ -18,11 +21,11 @@ describe("Loader placeholder", () => {
 
 	it("renders null, then load spinner if no props set", () => {
 		const loader = mount(
-			<ThemeProvider theme={{ icons: { loading: "test-loader" } }}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<div>
 					<Loading />
 				</div>
-			</ThemeProvider>,
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -30,12 +33,12 @@ describe("Loader placeholder", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use href="#icon-test-loader" />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 	});
 
@@ -50,9 +53,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<Loading {...{ error }} />
-					</ThemeProvider>
+					<Loading {...{ error }} />
 				</Provider>,
 				"when mounted",
 				"to satisfy",
@@ -63,9 +64,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<ErrorPlaceholder message="This is a test" />
-					</ThemeProvider>
+					<ErrorPlaceholder message="This is a test" />
 				</Provider>,
 			);
 		});
@@ -73,9 +72,9 @@ describe("Loader placeholder", () => {
 });
 
 describe("Loader", () => {
-	let clock, buttonLoader, errorLoader;
+	let clock, componentLoader, errorLoader;
 	beforeEach(() => {
-		buttonLoader = () => import("./Button");
+		componentLoader = () => import("./ColumnWrapper");
 		errorLoader = () => Promise.reject(new Error("This is not right"));
 		clock = sinon.useFakeTimers();
 	});
@@ -85,13 +84,13 @@ describe("Loader", () => {
 	spyOnConsole(["error"]);
 
 	it("loads the component", () => {
-		const Comp = Loader(buttonLoader);
+		const Comp = Loader(componentLoader);
 		const loader = mount(
-			<ThemeProvider theme={{}}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<div>
 					<Comp />
 				</div>
-			</ThemeProvider>,
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -99,12 +98,12 @@ describe("Loader", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 		let load;
 		act(() => {
@@ -114,29 +113,29 @@ describe("Loader", () => {
 			expect(
 				loader,
 				"to satisfy",
-				<div>
-					<button />
-				</div>,
+				<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+					<div>
+						<ColumnWrapper />
+					</div>
+				</TestWrapper>,
 			).then(() => expect(console.error, "was not called")),
 		);
 	});
 
 	it("errors out", () => {
 		const Comp = Loader(errorLoader);
+		const store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => ({}),
+		};
+
 		const loader = mount(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<ThemeProvider theme={{}}>
-					<div>
-						<Comp />
-					</div>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<Comp />
+				</div>
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -144,12 +143,12 @@ describe("Loader", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use href="#icon-loading" />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 		let load;
 		act(() => {
@@ -159,19 +158,11 @@ describe("Loader", () => {
 			expect(
 				loader,
 				"to satisfy",
-				<Provider
-					store={{
-						subscribe: () => {},
-						dispatch: () => {},
-						getState: () => ({}),
-					}}
-				>
-					<ThemeProvider theme={{}}>
-						<div>
-							<ErrorPlaceholder message="This is not right" />
-						</div>
-					</ThemeProvider>
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }}>
+					<div>
+						<ErrorPlaceholder message="This is not right" />
+					</div>
+				</TestWrapper>,
 			).then(() => expect(console.error, "was called")),
 		);
 	});

package/src/components/LoadingIcon.js

@@ -1,19 +1,32 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { makeStyles } from "@material-ui/core";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
+const useStyles = makeStyles(theme => ({
+	progressContainer: {
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		display: "flex",
+		position: "fixed",
+		alignItems: "center",
+		justifyContent: "center",
+		zIndex: 999,
+	},
+	progress: {
+		color: theme.palette.primary.main,
+	},
+}));
 
-const LoadingIcon = withTheme(props => (
-	<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-));
+const LoadingIcon = () => {
+	const classes = useStyles();
+
+	return (
+		<div className={classes.progressContainer}>
+			<CircularProgress className={classes.progress} size={100} color="inherit" />
+		</div>
+	);
+};
 
 export default LoadingIcon;

package/src/components/LoadingIcon.test.js

@@ -1,26 +1,22 @@
 import React from "react";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import LoadingIcon from "./LoadingIcon";
+import { createMuiTheme, TestWrapper } from "../utils/testUtils";
+
+const theme = createMuiTheme();
 
 describe("LoadingIcon", () => {
 	it("shows a spinning load icon", () =>
 		expect(
-			<ThemeProvider theme={{}}>
-				<LoadingIcon />
-			</ThemeProvider>,
-			"when mounted",
-			"to satisfy",
-			<Placeholder icon="loading" animate />,
-		));
-
-	it("gets icon from theme", () =>
-		expect(
-			<ThemeProvider theme={{ icons: { loading: "spinner" } }}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<LoadingIcon />
-			</ThemeProvider>,
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Placeholder icon="spinner" animate />,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<CircularProgress size={100} color="inherit" />
+				</div>
+			</TestWrapper>,
 		));
 });

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

@@ -165,7 +165,7 @@ const StepperModal = ({
 						<FormattedMessage {...sharedMessages.cancel} />
 					</Button>
 
-					{(currentStep < steps.length - 1 || steps[currentStep]?.isIntermediate) &&
+					{currentStep < steps.length - 1 &&
 						(steps[currentStep]?.actions?.length > 0 ? (
 							steps[currentStep].actions.map(action => (
 								<Button
@@ -191,7 +191,7 @@ const StepperModal = ({
 							</Button>
 						))}
 
-					{currentStep === steps.length - 1 && !steps[currentStep]?.isIntermediate && (
+					{currentStep === steps.length - 1 && (
 						<Button
 							variant="contained"
 							color="primary"

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

@@ -335,80 +335,6 @@ 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/Table.js

@@ -352,7 +352,11 @@ const DefaultFullTable = React.forwardRef((props, ref) => {
 					context={props.context}
 				/>
 			</TableMui>
-			{props.tableRows.length > 0 ? null : <div className={props.classes.placeholder}>{props.placeholder}</div>}
+			{props.tableRows.length > 0 ? null : (
+				<div className={classNames(props.classes.placeholder, props.customClasses.placeholderContainer)}>
+					{props.placeholder}
+				</div>
+			)}
 		</div>
 	);
 });
@@ -441,6 +445,7 @@ const Table = React.forwardRef(
 		customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
 		customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
 		customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
+		customClasses["placeholderContainer"] = tableProps?.getStyle(TableProps.ruleNames.placeholderContainer) || null;
 		customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
 		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
 

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -8,7 +8,7 @@ import TableMui from "@material-ui/core/Table";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import { buildHeaderAndRowFromConfig } from "./tableHelpers";
-import Placeholder from "../../Placeholder";
+import Placeholder from "./PredefinedElements/Placeholder";
 import TableInfoBar from "./PredefinedElements/TableInfoBar";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import TableProps from "./TableProps";
@@ -1102,6 +1102,26 @@ describe("Table", () => {
 		expect(placeHolder.length, "to equal", 1);
 	});
 
+	it("Renders Table with placeholder and custom class if rows are empty", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
+
+		const placeholder = <Placeholder />;
+
+		const tableProps = new TableProps();
+		tableProps.setStyle(TableProps.ruleNames.placeholderContainer, "placeholder-container-custom-class");
+
+		const component = <Table rows={rows} headers={headers} placeholder={placeholder} tableProps={tableProps} />;
+
+		const mountedComponent = mount(component);
+
+		const placeHolder = mountedComponent.find(Placeholder);
+		expect(placeHolder.exists(), "to be true");
+
+		const placeholderContainer = placeHolder.parent();
+		expect(placeholderContainer.exists(), "to be true");
+		expect(placeholderContainer.hasClass("placeholder-container-custom-class"), "to be true");
+	});
+
 	it("Renders Table with tableInfo if provided", () => {
 		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
 

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

@@ -24,6 +24,7 @@ class TableProps extends ComponentProps {
 		tableContainer: "tableContainer",
 		container: "container",
 		table: "table",
+		placeholderContainer: "placeholderContainer",
 	};
 
 	constructor() {
@@ -47,6 +48,7 @@ class TableProps extends ComponentProps {
 		this.componentClasses.set(this.constructor.ruleNames.tableCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.headerCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableContainer, null);
+		this.componentClasses.set(this.constructor.ruleNames.placeholderContainer, null);
 		this.componentClasses.set(this.constructor.ruleNames.container, null);
 		this.componentClasses.set(this.constructor.ruleNames.table, null);
 

package/src/components/MaterialUI/DataDisplay/TableProps.test.js

@@ -12,7 +12,16 @@ describe("TableProps Props", () => {
 			"constrained",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		expect(TableProps.propNames, "to have keys", propNames);
 		expect(TableProps.ruleNames, "to have keys", ruleNames);
@@ -34,7 +43,16 @@ describe("TableProps Props", () => {
 			"saveScrollbarPosition",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		const tableProps = new TableProps();
 

package/src/components/MaterialUI/Inputs/Select.js

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const renderMultipleValues = selected => selected?.join(", ");
+
 const selectEmptyValue = "~~#~~";
 
 const Select = ({ options, selectProps, children }) => {
@@ -169,6 +171,7 @@ const Select = ({ options, selectProps, children }) => {
 	const native = selectProps?.get(SelectProps.propNames.native);
 	const onClose = selectProps?.get(SelectProps.propNames.onClose);
 	const inputProps = selectProps?.get(SelectProps.propNames.inputProps);
+	const multiple = selectProps?.get(SelectProps.propNames.multiple);
 	const hasError = !!error;
 
 	if (sortType === sortTypeEnum.numeric) {
@@ -252,6 +255,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),
@@ -275,6 +280,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),

package/src/components/MaterialUI/Inputs/Select.test.js

@@ -669,4 +669,49 @@ describe("Select Component", () => {
 
 		expect(muiSelect.prop("open"), "to be true");
 	});
+
+	it("Renders Select component with multiple values", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.multiple, true);
+		selectProps.set(SelectProps.propNames.value, ["aValue"]);
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const ChevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					value={["aValue"]}
+					disableUnderline={true}
+					IconComponent={ChevronDown}
+					error={false}
+					multiple={true}
+					renderValue={selected => selected.join(", ")}
+				>
+					<MenuItem key="aValue" value="aValue">
+						<TooltippedTypography children="aLabel" titleValue="aLabel" />
+					</MenuItem>
+					<MenuItem key="anotherValue" value="anotherValue">
+						<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

package/src/components/MaterialUI/Inputs/SelectProps.js

@@ -21,6 +21,7 @@ class SelectProps extends ComponentProps {
 		onClose: "onClose",
 		native: "native",
 		inputProps: "inputProps",
+		multiple: "multiple",
 	};
 
 	static ruleNames = {
@@ -42,6 +43,7 @@ class SelectProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.onClose, null);
 		this.componentProps.set(this.constructor.propNames.native, null);
 		this.componentProps.set(this.constructor.propNames.inputProps, null);
+		this.componentProps.set(this.constructor.propNames.multiple, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.root, null);
 		this.componentClasses.set(this.constructor.ruleNames.paper, null);

package/src/components/MaterialUI/Inputs/SelectProps.test.js

@@ -15,6 +15,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		expect(SelectProps.propNames, "to have keys", propNames);
@@ -34,6 +35,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		const selectProps = new SelectProps();

package/src/components/MaterialUI/Navigation/DropDownMenu.js

@@ -1,9 +1,9 @@
 import React, { useState, isValidElement, cloneElement } from "react";
+import { FormattedMessage } from "react-intl";
 import { makeStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import Text from "../../Text";
 import DropDownMenuProps, { isDropDownMenuProps } from "./DropDownMenuProps";
 
 const useStyles = makeStyles(theme => ({
@@ -95,7 +95,7 @@ const DropDownMenu = ({ payload, menuItems, children, dropDownMenuProps = new Dr
 						onClick={onMenuItemClick(action, itemContext)}
 						disabled={disabled}
 					>
-						<Text message={title} />
+						{typeof title === "string" ? title : <FormattedMessage {...title} />}
 					</MenuItem>
 				))}
 			</Menu>

package/src/components/MaterialUI/Navigation/DropDownMenu.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Provider } from "react-redux";
 import ReactDOM from "react-dom";
 import sinon from "sinon";
 import { mount } from "enzyme";
@@ -14,7 +13,7 @@ describe("DropDownMenu", () => {
 	let store, menuItems, container;
 	beforeEach(() => {
 		menuItems = [
-			{ title: "asd", action: sinon.spy().named("action"), itemContext: "aContext" },
+			{ title: { id: "asd", defaultMessage: "asd" }, action: sinon.spy().named("action"), itemContext: "aContext" },
 			{ title: "asd2", action: sinon.spy().named("action"), itemContext: "myContext" },
 		];
 		store = {
@@ -73,9 +72,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		ReactDOM.render(
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>,
+			</TestWrapper>,
 			container,
 		);
 
@@ -98,9 +97,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>
+			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);