orc-shared 5.10.1-dev.7 → 5.10.1

package/src/components/List/Row.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import styled, { css } from "styled-components";
+import { ifFlag } from "../../utils";
+import DataCell from "./DataCell";
+
+export const stringifyFieldName = name => {
+	if (Array.isArray(name)) {
+		return name.join("_");
+	} else {
+		return name && name.toString();
+	}
+};
+
+export const TableRow = styled.tr`
+	${ifFlag(
+		"bgColor",
+		props =>
+			css`
+				background-color: ${props.bgColor};
+			`,
+		css`
+			transition: background-color 0.2s ease-in;
+			&:hover {
+				background-color: #f3f3f3;
+			}
+		`,
+	)}
+
+	${ifFlag(
+		"onClick",
+		css`
+			& td {
+				cursor: pointer;
+			}
+		`,
+	)}
+`;
+
+// Clicks on these elements will not be handled by the row onClick
+const formTags = ["INPUT", "SELECT", "LABEL"];
+
+export const Row = ({ columnDefs, row, rowId, selected, rowOnClick, bgColor }) => {
+	const onClick = useCallback(
+		event => {
+			if (formTags.indexOf(event.target.tagName) === -1) {
+				/* istanbul ignore else */
+				if (!event.target.dataset["rowId"]) {
+					event.target.dataset["rowId"] = rowId;
+				}
+				rowOnClick(event);
+			}
+		},
+		[rowOnClick, rowId],
+	);
+	return (
+		<TableRow onClick={rowOnClick ? onClick : undefined} bgColor={bgColor}>
+			{columnDefs.map(columnDef => (
+				<DataCell
+					key={stringifyFieldName(columnDef.fieldName)}
+					{...{
+						rowId,
+						row,
+						columnDef,
+						selected,
+					}}
+				/>
+			))}
+		</TableRow>
+	);
+};
+
+export default Row;

package/src/components/List/Row.test.js

@@ -0,0 +1,194 @@
+import React from "react";
+import { Provider } from "react-redux";
+import sinon from "sinon";
+import { Row, TableRow, stringifyFieldName } from "./Row";
+import DataCell from "./DataCell";
+
+const TestComp = () => (
+	<div>
+		<input />
+		<select />
+		<label />
+	</div>
+);
+
+describe("Row", () => {
+	let rowOnClick, columnDefs, row;
+	beforeEach(() => {
+		rowOnClick = sinon.spy().named("rowOnClick");
+		columnDefs = [{ fieldName: "a" }, { fieldName: "b" }, { fieldName: "test", type: "custom", component: TestComp }];
+		row = { a: "foo", b: "bar" };
+	});
+
+	it("it renders a data cell for each column definition", () =>
+		expect(
+			<Provider
+				store={{
+					subscribe: () => {},
+					dispatch: () => {},
+					getState: () => ({}),
+				}}
+			>
+				<table>
+					<tbody>
+						<Row row={row} rowId="rowIdentifier" columnDefs={columnDefs} rowOnClick={rowOnClick} bgColor="#ff0000" />
+					</tbody>
+				</table>
+			</Provider>,
+			"when mounted",
+			"with event",
+			{ type: "click", target: "tr" },
+			"to satisfy",
+			<Provider
+				store={{
+					subscribe: () => {},
+					dispatch: () => {},
+					getState: () => ({}),
+				}}
+			>
+				<table>
+					<tbody>
+						<TableRow bgColor="#ff0000" onClick={() => {}}>
+							<DataCell key="a" rowId="rowIdentifier" row={row} columnDef={columnDefs[0]} />
+							<DataCell key="b" rowId="rowIdentifier" row={row} columnDef={columnDefs[1]} />
+							<DataCell key="test" rowId="rowIdentifier" row={row} columnDef={columnDefs[2]} />
+						</TableRow>
+					</tbody>
+				</table>
+			</Provider>,
+		).then(() => expect(rowOnClick, "was called")));
+
+	it("wraps row onClick handler to add rowId to event target, and not to fire if target is form element", () =>
+		expect(
+			<Provider
+				store={{
+					subscribe: () => {},
+					dispatch: () => {},
+					getState: () => ({}),
+				}}
+			>
+				<table>
+					<tbody>
+						<Row row={row} rowId="rowIdentifier" columnDefs={columnDefs} rowOnClick={rowOnClick} />
+					</tbody>
+				</table>
+			</Provider>,
+			"when mounted",
+			"with event",
+			"click",
+			"with event",
+			{
+				type: "click",
+				target: "input",
+				// don't fire
+			},
+			"with event",
+			{
+				type: "click",
+				target: "select",
+				// don't fire
+			},
+			"with event",
+			{
+				type: "click",
+				target: "label",
+				// don't fire
+			},
+			"with event",
+			{
+				type: "click",
+				target: "tr",
+			},
+			"to contain",
+			<TestComp />,
+		).then(() =>
+			expect(rowOnClick, "to have calls satisfying", [
+				{
+					args: [
+						{
+							target: expect.it("to have attributes", {
+								"data-row-id": "rowIdentifier",
+							}),
+						},
+					],
+				},
+			]),
+		));
+});
+
+describe("TableRow", () => {
+	it("renders with a hover transition", () =>
+		expect(
+			<table>
+				<tbody>
+					<TableRow />
+				</tbody>
+			</table>,
+			"when mounted",
+			"queried for first",
+			"tr",
+			"to have style rules satisfying",
+			expect
+				.it("to contain", "transition: background-color 0.2s ease-in;")
+				.and("to contain", ":hover {background-color: #f3f3f3;}"),
+		));
+
+	it("renders a specific background color when given", () =>
+		expect(
+			<table>
+				<tbody>
+					<TableRow bgColor="#ff0000" />
+				</tbody>
+			</table>,
+			"when mounted",
+			"queried for first",
+			"tr",
+			"to have style rules satisfying",
+			"to contain",
+			"background-color: #ff0000;",
+		));
+
+	it("renders no transition if given a bgColor prop", () =>
+		expect(
+			<table>
+				<tbody>
+					<TableRow bgColor="#ff0000" />
+				</tbody>
+			</table>,
+			"when mounted",
+			"queried for first",
+			"tr",
+			"to have style rules satisfying",
+			expect
+				.it("not to match", /transition: background-color/)
+				.and("not to match", /:hover \{[^}]*background-color:[^}]*\}/),
+		));
+
+	it("sets cursor type if given click handler", () =>
+		expect(
+			<table>
+				<tbody>
+					<TableRow onClick={() => {}} />
+				</tbody>
+			</table>,
+			"when mounted",
+			"queried for first",
+			"tr",
+			"to have style rules satisfying",
+			expect.it("to contain", "td {cursor: pointer;}"),
+		));
+});
+
+describe("stringifyFieldName", () => {
+	it("does nothing to a string", () =>
+		expect(stringifyFieldName, "when called with", ["FieldName"], "to equal", "FieldName"));
+
+	it("converts an array to a string", () =>
+		expect(stringifyFieldName, "when called with", [["fieldA", "foo"]], "to equal", "fieldA_foo"));
+
+	it("handles arrays with non-string types", () =>
+		expect(stringifyFieldName, "when called with", [["fieldA", 0, "foo"]], "to equal", "fieldA_0_foo"));
+
+	it("returns undefined if given undefined", () =>
+		expect(stringifyFieldName, "when called with", [undefined], "to equal", undefined));
+});

package/src/components/List/enhanceColumnDefs.js

@@ -0,0 +1,54 @@
+const toggleInArray = (nameList, name) => {
+	if (nameList.indexOf(name) !== -1) {
+		return nameList.filter(n => n !== name);
+	} else {
+		return nameList.concat(name);
+	}
+};
+
+const enhanceSelectColumn = (selection, updateViewState, def) => {
+	return {
+		fieldName: "selection",
+		...def,
+		onChange: eventOrSelection => {
+			if (Array.isArray(eventOrSelection)) {
+				updateViewState("selection", eventOrSelection);
+			} else {
+				updateViewState("selection", toggleInArray(selection, eventOrSelection.target.dataset.rowId));
+				eventOrSelection.stopPropagation();
+			}
+		},
+	};
+};
+
+const enhanceSortableColumn = (sorting, updateViewState, def) => {
+	const isSortColumn = sorting.column && def.fieldName && sorting.column.toString() === def.fieldName.toString();
+	const isAscending = isSortColumn && sorting.direction === "asc";
+	const newDef = {
+		...def,
+		sort: () => {
+			updateViewState("sorting", {
+				column: def.fieldName,
+				direction: isAscending ? "desc" : "asc",
+			});
+			def.sort(isAscending, def.fieldName, def.type);
+		},
+	};
+	if (isSortColumn) {
+		newDef.sortDirection = sorting.direction;
+	}
+	return newDef;
+};
+
+const enhanceColumnDef = (sorting, selection, updateViewState, columnDefs) =>
+	columnDefs.map(def => {
+		if (def.type === "select") {
+			return enhanceSelectColumn(selection, updateViewState, def);
+		}
+		if (def.sort) {
+			return enhanceSortableColumn(sorting, updateViewState, def);
+		}
+		return def;
+	});
+
+export default enhanceColumnDef;

package/src/components/List/enhanceColumnDefs.test.js

@@ -0,0 +1,179 @@
+import sinon from "sinon";
+import enhanceColumnDefs from "./enhanceColumnDefs";
+
+describe("enhanceColumnDefs", () => {
+	let sorting, selection, updateViewState, columnDefs, mockEvent, stopPropagations;
+	beforeEach(() => {
+		sorting = {};
+		selection = [];
+		updateViewState = sinon.spy().named("updateViewState");
+		columnDefs = [{ fieldName: "a" }];
+		stopPropagations = {};
+		mockEvent = id => {
+			stopPropagations[id] = sinon.spy().named("stopPropagation:" + id);
+			return {
+				target: { dataset: { rowId: id } },
+				stopPropagation: stopPropagations[id],
+			};
+		};
+	});
+
+	it("does not change column definitions without cause", () =>
+		expect(enhanceColumnDefs, "called with", [sorting, selection, updateViewState, columnDefs], "to satisfy", [
+			{
+				fieldName: "a",
+			},
+		]));
+
+	describe("column selection", () => {
+		beforeEach(() => {
+			columnDefs = [{ type: "select" }, { fieldName: "a" }];
+			selection = ["selectedRow"];
+		});
+
+		it("adds field name and onChange to select columns", () =>
+			expect(
+				enhanceColumnDefs,
+				"called with",
+				[sorting, selection, updateViewState, columnDefs],
+				"to exhaustively satisfy",
+				[
+					{
+						type: "select",
+						fieldName: "selection",
+						onChange: expect
+							.it("to be a function")
+							// Add name to selection
+							.and("called with", [mockEvent("myRow")])
+							// remove name from selection
+							.and("called with", [mockEvent("selectedRow")])
+							// Replace selection
+							.and("called with", [["list", "of", "row", "ids"]]),
+					},
+					{ fieldName: "a" },
+				],
+			).then(() => {
+				expect(stopPropagations["myRow"], "was called");
+				expect(stopPropagations["selectedRow"], "was called");
+				expect(updateViewState, "to have calls satisfying", [
+					{
+						args: [
+							// Add name to selection
+							"selection",
+							["selectedRow", "myRow"],
+						],
+					},
+					{
+						args: [
+							// remove name from selection
+							"selection",
+							[],
+						],
+					},
+					{
+						args: [
+							// Replace selection
+							"selection",
+							["list", "of", "row", "ids"],
+						],
+					},
+				]);
+			}));
+
+		it("handles missing selection", () =>
+			expect(enhanceColumnDefs, "called with", [sorting, [], updateViewState, columnDefs], "to exhaustively satisfy", [
+				{
+					type: "select",
+					fieldName: "selection",
+					onChange: expect.it("to be a function"),
+				},
+				{ fieldName: "a" },
+			]));
+	});
+
+	describe("column sorting", () => {
+		let sorterSpies;
+		beforeEach(() => {
+			sorting = { column: "b", direction: "asc" };
+			sorterSpies = [sinon.spy().named("sorter-a"), sinon.spy().named("sorter-b"), sinon.spy().named("sorter-c")];
+			columnDefs = [
+				{
+					fieldName: "a",
+					sort: sorterSpies[0],
+					type: "currency",
+					onChange: () => {},
+				},
+				{ fieldName: "b", sort: sorterSpies[1], type: "date" },
+				{ fieldName: "c", sort: sorterSpies[2], type: "switch" },
+			];
+		});
+
+		it("wraps sort functions to set view state", () =>
+			expect(
+				enhanceColumnDefs,
+				"called with",
+				[sorting, selection, updateViewState, columnDefs],
+				"to exhaustively satisfy",
+				[
+					{
+						fieldName: "a",
+						sort: expect.it("to be a function").and("called"),
+						type: "currency",
+						onChange: expect.it("to be a function"),
+					},
+					{
+						fieldName: "b",
+						sort: expect.it("to be a function"),
+						type: "date",
+						sortDirection: "asc",
+					},
+					{
+						fieldName: "c",
+						sort: expect.it("to be a function"),
+						type: "switch",
+					},
+				],
+			).then(() => {
+				expect(sorterSpies, "to have calls satisfying", [{ spy: sorterSpies[0], args: [false, "a", "currency"] }]);
+				expect(updateViewState, "to have calls satisfying", [
+					{
+						args: ["sorting", { column: "a", direction: "asc" }],
+					},
+				]);
+			}));
+
+		it("wraps sort functions to handle flipping sort direction", () =>
+			expect(
+				enhanceColumnDefs,
+				"called with",
+				[sorting, selection, updateViewState, columnDefs],
+				"to exhaustively satisfy",
+				[
+					{
+						fieldName: "a",
+						sort: expect.it("to be a function"),
+						type: "currency",
+						onChange: expect.it("to be a function"),
+					},
+					{
+						fieldName: "b",
+						sort: expect.it("to be a function").and("called"),
+						type: "date",
+						sortDirection: "asc",
+					},
+					{
+						fieldName: "c",
+						sort: expect.it("to be a function"),
+						type: "switch",
+					},
+				],
+			).then(() => {
+				expect(sorterSpies, "to have calls satisfying", [{ spy: sorterSpies[1], args: [true, "b", "date"] }]);
+				expect(updateViewState, "to have calls satisfying", [
+					{
+						args: ["sorting", { column: "b", direction: "desc" }],
+					},
+				]);
+			}));
+	});
+});

package/src/components/List/index.js

@@ -0,0 +1,6 @@
+import Loader from "../Loader";
+
+/* istanbul ignore next */
+const LoadableList = Loader(() => import("./List"));
+
+export default LoadableList;

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

@@ -352,11 +352,7 @@ const DefaultFullTable = React.forwardRef((props, ref) => {
 					context={props.context}
 				/>
 			</TableMui>
-			{props.tableRows.length > 0 ? null : (
-				<div className={classNames(props.classes.placeholder, props.customClasses.placeholderContainer)}>
-					{props.placeholder}
-				</div>
-			)}
+			{props.tableRows.length > 0 ? null : <div className={props.classes.placeholder}>{props.placeholder}</div>}
 		</div>
 	);
 });
@@ -445,7 +441,6 @@ 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

@@ -1102,26 +1102,6 @@ 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,7 +24,6 @@ class TableProps extends ComponentProps {
 		tableContainer: "tableContainer",
 		container: "container",
 		table: "table",
-		placeholderContainer: "placeholderContainer",
 	};
 
 	constructor() {
@@ -48,7 +47,6 @@ 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,16 +12,7 @@ describe("TableProps Props", () => {
 			"constrained",
 		];
 
-		const ruleNames = [
-			"tableHeader",
-			"tableRow",
-			"tableCell",
-			"headerCell",
-			"tableContainer",
-			"placeholderContainer",
-			"container",
-			"table",
-		];
+		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
 
 		expect(TableProps.propNames, "to have keys", propNames);
 		expect(TableProps.ruleNames, "to have keys", ruleNames);
@@ -43,16 +34,7 @@ describe("TableProps Props", () => {
 			"saveScrollbarPosition",
 		];
 
-		const ruleNames = [
-			"tableHeader",
-			"tableRow",
-			"tableCell",
-			"headerCell",
-			"tableContainer",
-			"placeholderContainer",
-			"container",
-			"table",
-		];
+		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
 
 		const tableProps = new TableProps();
 

package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js

@@ -69,7 +69,6 @@ const SectionExpansionPanel = ({
 	expansionPanelId,
 	expansionPanelProps,
 	expansionPanelActionsProps,
-	headerClassName,
 }) => {
 	if (isExpansionPanelProps(expansionPanelProps) === false) {
 		throw new TypeError("expansionPanelProps property is not of type ExpansionPanelProps");
@@ -123,7 +122,7 @@ const SectionExpansionPanel = ({
 				expandIcon={<Icon id="dropdown-chevron-down" />}
 				IconButtonProps={defaultSummaryStyles}
 				classes={{
-					root: classNames(classes.summaryRoot, headerClassName, constrained ? classes.constrainedSummaryRoot : ""),
+					root: classNames(classes.summaryRoot, constrained ? classes.constrainedSummaryRoot : ""),
 					expanded: classNames(classes.panelExpanded),
 					content: classNames(classes.summaryContent, constrained ? classes.constrainedSummaryContent : ""),
 					expandIcon: classNames(classes.summaryExpandIconRoot),