orc-shared 1.1.0-dev.9 → 1.2.0-dev.10

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

@@ -11,10 +11,13 @@ const useStyles = makeStyles(theme => ({
 		fontSize: theme.spacing(1.2),
 		marginBottom: theme.spacing(0.6),
 	},
-
+	listHeight: {
+		height: props => props.height && theme.spacing(props.height),
+	},
 	paper: {
+		flexGrow: 1,
+		height: "1px", // forces the container to takes 100%
 		overflow: "auto",
-		height: props => theme.spacing(props.height),
 		border: `1px solid ${theme.palette.primary.light}`,
 		borderRadius: theme.shape.borderRadius,
 		boxShadow: "none",
@@ -38,6 +41,11 @@ const useStyles = makeStyles(theme => ({
 	actionPanel: {
 		paddingTop: theme.spacing(2),
 	},
+	listContainer: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+	},
 }));
 
 const defaultInfoPanelXs = 6;
@@ -74,7 +82,7 @@ const SelectionList = ({
 	useEffect(() => {
 		const listDataIds = listData.data.map(d => d.id);
 		const checkedFromList = listDataIds.filter(l => checked.includes(l));
-		if (defaultSelection && checkedFromList.length === 0) {
+		if (defaultSelection && checkedFromList.length === 0 && checked[0] !== defaultSelection) {
 			setChecked([defaultSelection]);
 		}
 	}, [defaultSelection, checked, listData.data]);
@@ -101,7 +109,7 @@ const SelectionList = ({
 	const dividerDiff = showDivider ? 1 : 0;
 
 	const listComponent = (
-		<>
+		<div className={classes.listContainer}>
 			<div className={classes.title}>{listData.title}</div>
 			<ScrollableCustomList
 				ref={refScrollableList}
@@ -118,7 +126,7 @@ const SelectionList = ({
 				onChange={onChangeEvent}
 			/>
 			{actionPanel ? <div className={classes.actionPanel}>{actionPanel}</div> : null}
-		</>
+		</div>
 	);
 
 	const dividerComponent = showDivider && (
@@ -129,7 +137,7 @@ const SelectionList = ({
 
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12 - infoPanelXs - dividerDiff}>
+			<Grid item xs={12 - infoPanelXs - dividerDiff} className={classes.listHeight}>
 				{listComponent}
 			</Grid>
 			{dividerComponent}

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

@@ -33,8 +33,10 @@ describe("SelectionList", () => {
 			<TestWrapper intlProvider={{ messages }}>
 				<Grid>
 					<Grid>
-						<div>{listTitle}</div>
-						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>
+							<div>{listTitle}</div>
+							<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						</div>
 					</Grid>
 					<Grid>
 						<div></div>
@@ -60,8 +62,10 @@ describe("SelectionList", () => {
 			<TestWrapper intlProvider={{ messages }}>
 				<Grid>
 					<Grid>
-						<div>{listTitle}</div>
-						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>
+							<div>{listTitle}</div>
+							<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						</div>
 					</Grid>
 					<Grid>
 						<div></div>
@@ -86,8 +90,10 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					</div>
 				</Grid>
 				<Grid>
 					<hr />
@@ -117,9 +123,11 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
-					<div>{actionPanel}</div>
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>{actionPanel}</div>
+					</div>
 				</Grid>
 				<Grid>
 					<hr />
@@ -145,8 +153,10 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					</div>
 				</Grid>
 				<Grid>
 					<div>Test</div>

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

@@ -24,6 +24,10 @@ export const useStyles = makeStyles(theme => ({
 	},
 	table: {
 		tableLayout: "fixed",
+		minWidth: "auto",
+	},
+	tableConstrained: {
+		minWidth: theme.spacing(83),
 	},
 	stickyHeaderHead: {
 		borderTop: props => (props.withoutTopBorder ? "none" : "1px solid " + theme.palette.grey.borders),
@@ -62,22 +66,34 @@ export const useStyles = makeStyles(theme => ({
 		},
 	},
 	tableCell: {
-		padding: theme.spacing(2),
+		padding: theme.spacing(2, 0.5),
+		"&:first-child": {
+			padding: theme.spacing(2, 0.5, 2, 2),
+		},
 	},
 	tableCellSelect: {
-		padding: theme.spacing(2),
+		padding: theme.spacing(2, 0.5),
 		width: theme.spacing(3),
+		"&:first-child": {
+			padding: theme.spacing(2, 0.5, 2, 2),
+		},
 	},
 	headerCell: {
-		padding: theme.spacing(1, 2),
+		padding: theme.spacing(1, 0.5),
 		textAlign: "left",
 		fontWeight: theme.typography.fontWeightSemiBold,
+		"&:first-child": {
+			padding: theme.spacing(2, 0.5, 2, 2),
+		},
 	},
 	headerCellSelect: {
-		padding: theme.spacing(1, 2),
+		padding: theme.spacing(1, 0.5),
 		width: theme.spacing(3),
 		textAlign: "left",
 		fontWeight: theme.typography.fontWeightSemiBold,
+		"&:first-child": {
+			padding: theme.spacing(2, 0.5, 2, 2),
+		},
 	},
 	rowSelectCheckbox: {
 		padding: 0,
@@ -304,7 +320,13 @@ const FullTable = React.forwardRef((props, ref) => {
 			onScroll={scrollEvent}
 		>
 			<ResizeDetector onResize={props.onResize} />
-			<TableMui className={classNames(props.classes.table, props.customClasses.table)}>
+			<TableMui
+				className={classNames(
+					props.classes.table,
+					props.customClasses.table,
+					props.constrained ? props.classes.tableConstrained : "",
+				)}
+			>
 				<TableHead className={classNames(props.classes.tableHeader, props.customClasses.tableHeader)}>
 					<TableRow>{props.tableHeaders}</TableRow>
 				</TableHead>
@@ -347,6 +369,7 @@ const Table = ({
 	const isEditingMode = tableProps?.get(TableProps.propNames.isEditingMode) || false;
 	const selectedRows = tableProps?.get(TableProps.propNames.selectedRows) || null;
 	const selectedRowsChanged = tableProps?.get(TableProps.propNames.selectedRowsChanged) || null;
+	const constrained = tableProps?.get(TableProps.propNames.constrained) || false;
 
 	customClasses["tableHeader"] = tableProps?.getStyle(TableProps.ruleNames.tableHeader) || null;
 	customClasses["tableRow"] = tableProps?.getStyle(TableProps.ruleNames.tableRow) || null;
@@ -430,6 +453,7 @@ const Table = ({
 				ref={refScrolled}
 				classes={classes}
 				customClasses={customClasses}
+				constrained={constrained}
 				onResize={onResize}
 				selectedNumber={selectedNumber}
 				scrollLoader={scrollLoader}

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

@@ -136,6 +136,15 @@ describe("useStyles", () => {
 			expect.it("to contain", "cursor: pointer").and("to contain", ":hover {background-color: #F7F7F7;}"),
 		);
 	});
+
+	it("build constrained styles as expected", () => {
+		expect(
+			<MuiThemeContainer classToTest="tableConstrained" styleProps={{ constrained: true }} />,
+			"when mounted",
+			"to have style rules satisfying",
+			expect.it("to contain", "min-width: 51.875rem"),
+		);
+	});
 });
 
 describe("Memoize components", () => {
@@ -641,6 +650,20 @@ describe("Table", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders Table with constrained property set to true", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.constrained, true);
+
+		const component = <Table rows={rows} headers={headers} tableProps={tableProps} />;
+
+		const mountedComponent = mount(component);
+
+		expect(mountedComponent.exists(".makeStyles-tableConstrained-277"), "to be truthy");
+	});
+
 	it("Renders Table with enabled sticky header and select mode", () => {
 		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
 

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

@@ -11,6 +11,7 @@ class TableProps extends ComponentProps {
 		isEditingMode: "isEditingMode",
 		selectedRows: "selectedRows",
 		selectedRowsChanged: "selectedRowsChanged",
+		constrained: "constrained",
 	};
 
 	static ruleNames = {
@@ -35,6 +36,7 @@ class TableProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.isEditingMode, null);
 		this.componentProps.set(this.constructor.propNames.selectedRows, null);
 		this.componentProps.set(this.constructor.propNames.selectedRowsChanged, null);
+		this.componentProps.set(this.constructor.propNames.constrained, false);
 
 		this.componentClasses.set(this.constructor.ruleNames.tableHeader, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableRow, null);

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

@@ -9,6 +9,7 @@ describe("TableProps Props", () => {
 			"onRowClick",
 			"classes",
 			"deepPropsComparation",
+			"constrained",
 		];
 
 		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
@@ -28,6 +29,7 @@ describe("TableProps Props", () => {
 			"isEditingMode",
 			"selectedRows",
 			"selectedRowsChanged",
+			"constrained",
 		];
 
 		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];

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

@@ -41,6 +41,9 @@ const useStyles = makeStyles(theme => ({
 
 	customContainer: {
 		margin: theme.spacing(1.5, 1),
+		"& .MuiTreeView-root li:last-child:before, & .MuiTreeItem-iconontainer:before": {
+			backgroundColor: theme.palette.background.paper,
+		},
 	},
 
 	button: {

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

@@ -69,6 +69,17 @@ const useStyles = makeStyles(theme => ({
 		"& .react-datepicker__input-time-container .react-datepicker-time__input-container": {
 			display: "block",
 		},
+		"& .react-datepicker__day.disabledDay": {
+			color: theme.palette.grey.borders,
+			pointerEvents: "none",
+		},
+		"& .react-datepicker__day.alreadySelectedDay": {
+			backgroundColor: theme.palette.background.selectedDate,
+			color: theme.palette.primary.contrastText,
+			borderRadius: "0.3rem",
+			pointerEvents: "none",
+			opacity: 0.4,
+		},
 	},
 	disabled: {
 		border: `1px solid ${theme.palette.grey.light} !important`,

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

@@ -100,6 +100,8 @@ const InputBase = ({ inputProps }) => {
 	const metadata = inputProps?.get(InputBaseProps.propNames.metadata);
 	const autoComplete = inputProps?.get(InputBaseProps.propNames.autoComplete);
 
+	const tooltipText = type === "text" ? value : "";
+
 	const onClick = item => {
 		// Fixes FireFox issue, where the input number buttons do not focus on input control,
 		// causing onBlur to never fire
@@ -141,7 +143,7 @@ const InputBase = ({ inputProps }) => {
 					startAdornment={startAdornment}
 					endAdornment={endAdornment}
 					rows={4}
-					title={value}
+					title={tooltipText}
 					autoComplete={autoComplete}
 				/>
 			</div>

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

@@ -53,6 +53,44 @@ describe("InputBase Component", () => {
 		expect(mountedComponent.prop("inputProps").get(InputBaseProps.propNames.value), "to equal", aValue + aValue);
 	});
 
+	it("Renders InputBase component with title attribute for input of type text", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "text");
+		inputProps.set(InputBaseProps.propNames.disabled, true);
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+		const expected = <InputBaseMUI value={aValue} title={aValue} />;
+
+		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
+	});
+
+	it("Renders InputBase component with title attribute for input types other than text", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "number");
+		inputProps.set(InputBaseProps.propNames.disabled, true);
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+		const expected = <InputBaseMUI value={aValue} title="" />;
+
+		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
+	});
+
 	it("Renders InputBase component without labels", () => {
 		const inputProps = new InputBaseProps();
 		const aValue = "value";

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

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Select from "./Select";
 import SelectProps from "./SelectProps";
+import { getTimeZoneName } from "../../../utils/timezoneHelper";
+import { namedLookupLocalizedSelector } from "../../../selectors/metadata";
+import { useSelector } from "react-redux";
 
 const useStyles = makeStyles(theme => ({
 	timeWrapper: {
@@ -177,6 +180,9 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 	showAMPM = showAMPM ?? isBrowserUsingAMPM();
 	const [time, setTime] = useState(parseTime(value || "00:00"));
 
+	const userTimeZone = getTimeZoneName();
+	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", userTimeZone, null));
+
 	const onTimeChange = datetime => {
 		if (onChange) {
 			// DatePicker expects 24 hour time format, or else things go wonky!
@@ -209,12 +215,12 @@ const TimePicker = ({ value, onChange, showTimeZone, showAMPM, requestedTimeZone
 	};
 
 	const getTimeZone = requestedTimeZone => {
-		if (requestedTimeZone) {
-			return requestedTimeZone;
-		} else {
+		if (requestedTimeZone) return requestedTimeZone;
+		if (!localizedTimeZoneName) {
 			var timezone = new Date().toString().match(/GMT(\S+) \(([^)]+)\)/i);
 			return `${timezone[2]} (GMT${timezone[1]})`;
 		}
+		return localizedTimeZoneName;
 	};
 
 	return (