orc-shared 5.8.0-dev.2 → 5.8.0-dev.21

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

@@ -133,6 +133,208 @@ describe("StepperModal", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders StepperModal correctly with custom actions", () => {
+		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 }, { title: "step2" }];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+				<div>step2</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("Renders StepperModal correctly with disabled custom actions", () => {
+		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", nextDisabled: () => true, content: <div>content</div>, actions },
+			{ title: "step2" },
+		];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+				<div>step2</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={true} onClick={() => {}} disableElevation>
+						first action
+					</Button>
+					<Button variant="contained" color="primary" disabled={true} 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("Renders StepperModal correctly when custom action is clicked", () => {
+		const open = true;
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				handler: jest.fn(),
+			},
+			{
+				value: "second value",
+				label: "second action",
+				handler: jest.fn(),
+			},
+		];
+
+		const okCallback = sinon.spy();
+		const cancelCallback = sinon.spy();
+		const steps = [
+			{ title: "step1", content: "content", actions },
+			{ title: "step2", content: "content2" },
+		];
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal open={open} steps={steps} closeCallback={cancelCallback} confirmCallback={okCallback} />
+			</IntlProvider>
+		);
+
+		const mountedComponent = mount(component);
+
+		const firstAction = mountedComponent.find(Button).at(1);
+		firstAction.invoke("onClick")();
+
+		expect(mountedComponent.containsMatchingElement(steps[1].content), "to be truthy");
+
+		const back = mountedComponent.find(Button).at(0);
+		back.invoke("onClick")();
+
+		expect(mountedComponent.containsMatchingElement(steps[0].content), "to be truthy");
+
+		const secondAction = mountedComponent.find(Button).at(2);
+		secondAction.invoke("onClick")();
+
+		const okButton = mountedComponent.find(Button).at(2);
+		okButton.invoke("onClick")();
+
+		expect(okCallback, "was called");
+	});
+
 	it("Render closed modal", () => {
 		const open = false;
 

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

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import { ScrollableCustomList } from "./TransferList";
-import Divider from "./Divider";
-import DividerProps from "./dividerProps";
 
 const useStyles = makeStyles(theme => ({
 	title: {
@@ -14,6 +12,10 @@ const useStyles = makeStyles(theme => ({
 	listHeight: {
 		height: props => props.height && theme.spacing(props.height),
 	},
+	listHeightWithBorder: {
+		height: props => props.height && theme.spacing(props.height),
+		borderRight: `1px solid ${theme.palette.grey.borders}`,
+	},
 	paper: {
 		flexGrow: 1,
 		height: "1px", // forces the container to takes 100%
@@ -32,9 +34,6 @@ const useStyles = makeStyles(theme => ({
 			borderRadius: theme.spacing(1.5),
 		},
 	},
-	divider: {
-		margin: "auto",
-	},
 	paperLeft: {
 		border: `1px solid ${theme.palette.grey.borders}`,
 	},
@@ -45,6 +44,7 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: "column",
 		height: "100%",
+		boxSizing: "border-box",
 	},
 }));
 
@@ -98,16 +98,10 @@ const SelectionList = ({
 	};
 
 	const showDivider = infoPanel && divider;
-	const dividerProps = new DividerProps();
-	dividerProps.set(DividerProps.propNames.orientation, "vertical");
-	dividerProps.set(DividerProps.propNames.light, true);
-	dividerProps.setStyle(DividerProps.ruleNames.vertical, classes.divider);
 
 	infoPanelXs = infoPanelXs ?? defaultInfoPanelXs;
 	infoPanel = infoPanel ?? defaultPanel;
 
-	const dividerDiff = showDivider ? 1 : 0;
-
 	const listComponent = (
 		<div className={classes.listContainer}>
 			<div className={classes.title}>{listData.title}</div>
@@ -129,23 +123,15 @@ const SelectionList = ({
 		</div>
 	);
 
-	const dividerComponent = showDivider && (
-		<Grid item>
-			<Divider dividerProps={dividerProps} />
-		</Grid>
-	);
-
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12 - infoPanelXs - dividerDiff} className={classes.listHeight}>
+			<Grid item xs={12 - infoPanelXs} className={showDivider ? classes.listHeightWithBorder : classes.listHeight}>
 				{listComponent}
 			</Grid>
-			{dividerComponent}
 			<Grid item xs={infoPanelXs}>
 				{infoPanel}
 			</Grid>
 		</Grid>
 	);
 };
-
 export default SelectionList;

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

@@ -95,9 +95,6 @@ describe("SelectionList", () => {
 						<ScrollableCustomList checked={[]} items={list} classes={{}} />
 					</div>
 				</Grid>
-				<Grid>
-					<hr />
-				</Grid>
 				<Grid>
 					<div>Test</div>
 				</Grid>
@@ -129,9 +126,6 @@ describe("SelectionList", () => {
 						<div>{actionPanel}</div>
 					</div>
 				</Grid>
-				<Grid>
-					<hr />
-				</Grid>
 				<Grid>{infoPanel}</Grid>
 			</Grid>
 		);

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

@@ -66,7 +66,15 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			);
 			checkboxProps.set(CheckboxProps.propNames.metadata, { id: rowId, name: def.fieldName });
 
-			return [<Checkbox id={"select_" + transformedValue} data-row-id={rowId} checkboxProps={checkboxProps} />, null];
+			return [
+				<Checkbox
+					key={def.type + "_" + rowId}
+					id={"select_" + transformedValue}
+					data-row-id={rowId}
+					checkboxProps={checkboxProps}
+				/>,
+				null,
+			];
 
 		case "switch":
 			const switchProps = new SwitchProps();
@@ -85,7 +93,9 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			switchProps.set(SwitchProps.propNames.className, def.switch?.className);
 			switchProps.set(SwitchProps.propNames.metadata, { id: rowId, name: def.fieldName });
 
-			return transformedValue != null ? [<Switch data-row-id={rowId} switchProps={switchProps} />] : [null];
+			return transformedValue != null
+				? [<Switch key={def.type + "_" + rowId} data-row-id={rowId} switchProps={switchProps} />]
+				: [null];
 
 		case "radio":
 			const selectedValue = def.selectedValue;
@@ -107,7 +117,7 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 				StandaloneRadioProps.propNames.readOnly,
 				def.transform?.readOnly != null ? def.transform.readOnly(e, readOnly, def) : readOnly,
 			);
-			return [<StandaloneRadio radioProps={radioProps} />];
+			return [<StandaloneRadio key={def.type + "_" + rowId} radioProps={radioProps} />];
 
 		case "textInput":
 			const inputBaseProps = new InputBaseProps();
@@ -124,7 +134,7 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			);
 			inputBaseProps.set(InputBaseProps.propNames.inputAttributes, def.inputAttributes);
 			inputBaseProps.set(InputBaseProps.propNames.metadata, { id: rowId, name: def.fieldName });
-			return [<InputBase inputProps={inputBaseProps} />];
+			return [<InputBase key={def.type + "_" + rowId} inputProps={inputBaseProps} />];
 		default:
 			return [defaultRendering(e, def, rowId, readOnly, transformedValue)];
 	}

package/src/components/MaterialUI/Feedback/loadingScreen.test.js

@@ -70,6 +70,7 @@ describe("loadingScreen", () => {
 		const clock = sinon.useFakeTimers();
 		const menuNode = document.createElement("div");
 		document.body.appendChild(menuNode);
+		// eslint-disable-next-line react/no-render-return-value
 		const menu = ReactDOM.render(
 			<div>
 				<TestWrapper stylesProvider muiThemeProvider={{ theme }} provider={{ store }}>

package/src/components/MaterialUI/Feedback/useNotification.test.js

@@ -8,6 +8,7 @@ const TestComp = () => {
 	const addNotification = useNotification(snackPack, setSnackPack);
 	return (
 		<div>
+			{/* eslint-disable-next-line react/no-unknown-property */}
 			<div id="notification" snacks={snackPack} onClick={(message, type) => addNotification(message, type)} />
 		</div>
 	);

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

@@ -21,11 +21,11 @@ const useStyles = makeStyles(theme => ({
 	datePickerWrapper: {
 		display: "flex",
 		width: "auto",
-		padding: props => (props.readOnly ? "0" : theme.spacing(0.3, 0.5)),
-		border: props => (props.readOnly ? "none" : `1px solid ${theme.palette.grey.borders}`),
+		padding: theme.spacing(0.3, 0.5),
+		border: `1px solid ${theme.palette.grey.borders}`,
 		borderRadius: theme.shape.borderRadius,
 		alignItems: "center",
-		backgroundColor: props => (props.readOnly ? "inherit" : theme.palette.background.default),
+		backgroundColor: theme.palette.background.default,
 		"&:focus, &:focus-within": {
 			borderRadius: theme.shape.borderRadius,
 			borderColor: theme.palette.focus,
@@ -82,6 +82,11 @@ const useStyles = makeStyles(theme => ({
 			opacity: 0.4,
 		},
 	},
+	datePickerWrapperReadOnly: {
+		padding: "0",
+		border: "none",
+		backgroundColor: "inherit",
+	},
 	disabled: {
 		border: `1px solid ${theme.palette.grey.light} !important`,
 		backgroundColor: `${theme.palette.grey.light} !important`,
@@ -157,7 +162,14 @@ const WrappedDatePicker = ({
 
 	return (
 		<div className={classes.container}>
-			<label className={classNames(classes.datePickerWrapper, disabledCls, error ? classes.errorInput : null)}>
+			<label
+				className={classNames(
+					classes.datePickerWrapper,
+					readOnly ? classes.datePickerWrapperReadOnly : null,
+					disabledCls,
+					error ? classes.errorInput : null,
+				)}
+			>
 				<div className={classes.datePickerContainer}>
 					<DatePicker
 						{...props}

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

@@ -3,8 +3,10 @@ import DatePicker, { createFormat } from "./DatePicker";
 import { mount } from "enzyme";
 import sinon from "sinon";
 import Icon from "../DataDisplay/Icon";
-import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
+import { TestWrapper, createMuiTheme, generateClassName } from "./../../../utils/testUtils";
 import Immutable from "immutable";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
 
 describe("DatePicker", () => {
 	let updater, state, store;
@@ -426,6 +428,38 @@ describe("DatePicker", () => {
 		input.at(0).simulate("change", event);
 	});
 
+	it("should have readonly styles when readonly", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={true} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be true");
+	});
+
+	it("should have updatable styles when updatable", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={false} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be false");
+	});
+
 	it("should call onChange prop with useTimeZone", () => {
 		const onChangeMock = jest.fn();
 		const date = new Date("2020-06-30T00:00:00");

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

@@ -4,6 +4,7 @@ import InputBaseMUI from "@material-ui/core/InputBase";
 import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
 import { NumericFormat, numericFormatter } from "react-number-format";
+import { trimSpacesAndLeadingZeros } from "../../../utils/inputHelper";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -207,6 +208,7 @@ const InputBase = ({ inputProps }) => {
 				formattingProps.fixedDecimalScale = true;
 			}
 
+			updateValue = trimSpacesAndLeadingZeros(updateValue, numericInputProps?.defaultValue ?? "");
 			updateValue = numericFormatter(updateValue, formattingProps);
 		}
 

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

@@ -643,6 +643,55 @@ describe("AdvancedNumericInput", () => {
 		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
 	});
 
+	it("OnBlur trims spaces and leading zeros of values", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "012.2";
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 1 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		// Update is called twice, once from onChangeHandler (from React) and once from onBlurInternal
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }, { args: ["12.2", metadata] }]);
+	});
+
+	it("OnBlur use default value if trim spaces and leading zeroes returns empty ", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2, defaultValue: "84" });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["84.00", metadata] }]);
+	});
+
 	it("Onblur send a formatted string instead of a number", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";

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

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const selectEmptyValue = "~~#~~";
+
 const Select = ({ options, selectProps, children }) => {
 	if (isSelectProps(selectProps) === false) {
 		throw new TypeError("selectProps property is not of type SelectProps");
@@ -177,6 +179,16 @@ const Select = ({ options, selectProps, children }) => {
 		);
 	} else if (sortType === sortTypeEnum.default) {
 		options.sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1));
+	} else if (sortType === sortTypeEnum.alphabetical) {
+		options.sort((a, b) => {
+			if (a.value === selectEmptyValue) {
+				return -1;
+			}
+			if (b.value === selectEmptyValue) {
+				return 1;
+			}
+			return a.label.localeCompare(b.label);
+		});
 	}
 
 	if (showAllValue && showAllLabel) {
@@ -207,7 +219,7 @@ const Select = ({ options, selectProps, children }) => {
 		const appliedClasses = classNames(classes.baseItem, clss);
 		const labelClss = classNames({
 			[classes.label]: true,
-			[classes.emptyLabel]: option.value === "" || option.value === "~~#~~",
+			[classes.emptyLabel]: option.value === "" || option.value === selectEmptyValue,
 		});
 
 		const disabled = !!option.disabled;

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

@@ -496,6 +496,43 @@ describe("Select Component", () => {
 		expect(optionsKeys, "to equal", ["#All#", "a", "b", "c"]);
 	});
 
+	it("Sorts select options correctly with alphabetical sorting", () => {
+		const emptyValue = "~~#~~";
+
+		const options = [
+			{ value: "c", label: "c" },
+			{ value: "a", label: "a" },
+			{ value: "b", label: "b" },
+			{ value: "f", label: "f" },
+			{ value: emptyValue, label: "empty" },
+			{ value: "h", label: "h" },
+			{ value: "g", label: "g" },
+			{ value: "e", label: "e" },
+			{ value: "d", label: "[d]" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.sortType, sortTypeEnum.alphabetical);
+		selectProps.set(SelectProps.propNames.value, "b");
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const test = mountedComponent.find(SelectMUI);
+
+		const mountedOptions = test.props().children;
+
+		const optionsKeys = mountedOptions.map(option => option.key);
+
+		expect(optionsKeys, "to equal", [emptyValue, "d", "a", "b", "c", "e", "f", "g", "h"]);
+	});
+
 	it("Sorts select options correctly with numeric sorting", () => {
 		const options = [
 			{ value: "BRC-409 - BRC-PROMENADES", label: "BRC-409 - BRC-PROMENADES", sortOrder: "BRC-409 - BRC-PROMENADES" },

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

@@ -4,6 +4,7 @@ export const sortTypeEnum = {
 	none: 0,
 	default: 1,
 	numeric: 2,
+	alphabetical: 3,
 };
 
 class SelectProps extends ComponentProps {