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

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

@@ -0,0 +1,145 @@
+import React, { useCallback, useRef } from "react";
+import TableProps from "./TableProps";
+import buildHeaderAndRowFromConfig from "./tableHelpers";
+import useInMemoryPaging from "../../../hooks/useInMemoryPaging";
+import Placeholder from "./PredefinedElements/Placeholder";
+import { doesObjectContainsTextCaseInsensitive } from "../../../utils/comparisonHelper";
+import { useIntl } from "react-intl";
+import sharedMessages from "../../../sharedMessages";
+import SearchControl from "../Inputs/PredefinedElements/SearchControl";
+import Table from "./Table";
+import SectionToolbar from "./PredefinedElements/SectionToolbar";
+import TableInfoBar from "./PredefinedElements/TableInfoBar";
+
+const listFilter = (list, searchTerm, searchProperties) => {
+	if (!searchTerm) {
+		return list;
+	}
+
+	return list.filter(item => doesObjectContainsTextCaseInsensitive(item, searchTerm, searchProperties));
+};
+
+function getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount) {
+	if (totalCountLabelId && noRowsTotalCountLabelId) {
+		if (totalCount) {
+			return (
+				<TableInfoBar
+					tableLabel={formatMessage(totalCountLabelId, {
+						quantity: totalCount,
+					})}
+				/>
+			);
+		}
+		return <TableInfoBar tableLabel={formatMessage(noRowsTotalCountLabelId)} />;
+	}
+
+	return null;
+}
+
+const TableWithInMemoryPaging = ({
+	sortedRows,
+	tableName,
+	searchProperties = [],
+	columnDefs,
+	toolbarRightContent,
+	pageSize = 20,
+	onItemClick = null,
+	isReadMode = true,
+	totalCountLabelId = null,
+	noRowsTotalCountLabelId = null,
+	placeholderIcon = null,
+	placeholderTitle = null,
+	placeholderSubtitle = null,
+	rowKeyField = "id",
+}) => {
+	const { formatMessage } = useIntl();
+	const tableRef = useRef(null);
+	const initialSearchProperties = useRef(searchProperties);
+	const searchPlaceholder = formatMessage(sharedMessages.search);
+	const sortAndFilter = useCallback(
+		({ list, filters }) => {
+			const { searchTerm } = filters;
+
+			return listFilter(list, searchTerm, initialSearchProperties.current);
+		},
+		[initialSearchProperties],
+	);
+
+	const {
+		rows: rowsSlice,
+		scrollLoader,
+		currentPage,
+		filters,
+		setFilter,
+		totalCount,
+	} = useInMemoryPaging({
+		viewStateName: tableName,
+		tableRef,
+		records: sortedRows,
+		pageSize: pageSize,
+		sortAndFilterFn: sortAndFilter,
+	});
+
+	const { headers, rows } = buildHeaderAndRowFromConfig(columnDefs, rowsSlice, isReadMode, rowKeyField);
+	const placeholder = (
+		<Placeholder
+			icon={placeholderIcon}
+			title={placeholderTitle}
+			subtitle={placeholderSubtitle}
+			cellList={columnDefs.map(col => col.placeholder)}
+		/>
+	);
+
+	const onSearch = (searchOption, searchText) => {
+		setFilter({
+			...filters,
+			searchTerm: searchText,
+		});
+	};
+
+	const tableProps = new TableProps();
+	tableProps.set(TableProps.propNames.stickyHeader, true);
+	tableProps.set(TableProps.propNames.withoutTopBorder, true);
+	tableProps.set(TableProps.propNames.deepPropsComparation, true);
+	tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+	tableProps.set(TableProps.propNames.tableName, tableName);
+	if (onItemClick) {
+		tableProps.set(TableProps.propNames.onRowClick, onItemClick);
+	}
+
+	const hasToolbar = toolbarRightContent || searchProperties.length > 0;
+	const toolbar = hasToolbar ? (
+		<SectionToolbar rightContent={toolbarRightContent}>
+			{searchProperties.length > 0 && (
+				<SearchControl
+					placeholder={searchPlaceholder}
+					defaultValue={filters.searchTerm}
+					onSearch={onSearch}
+					focusAndSelectSearchFieldOnLoad={false}
+				/>
+			)}
+		</SectionToolbar>
+	) : null;
+
+	const tableInfo = getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount);
+
+	return (
+		<>
+			{toolbar}
+
+			<Table
+				ref={tableRef}
+				headers={headers}
+				tableInfo={tableInfo}
+				rows={rows}
+				tableProps={tableProps}
+				placeholder={placeholder}
+				scrollLoader={scrollLoader}
+				latestPage={currentPage}
+				pageLength={pageSize}
+			/>
+		</>
+	);
+};
+
+export default TableWithInMemoryPaging;

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

@@ -0,0 +1,457 @@
+import React from "react";
+import sinon from "sinon";
+import { mount } from "enzyme";
+import Table from "./Table";
+import { buildHeaderAndRowFromConfig } from "./tableHelpers";
+import TableInfoBar from "./PredefinedElements/TableInfoBar";
+import { extractMessages, spyOnConsole } from "../../../utils/testUtils";
+import TableProps from "./TableProps";
+import { createMuiTheme } from "./../../../utils/testUtils";
+import { TestWrapper } from "../../../utils/testUtils";
+import TableWithInMemoryPaging from "./TableWithInMemoryPaging";
+import sharedMessages from "../../../sharedMessages";
+import SearchControl from "../Inputs/PredefinedElements/SearchControl";
+import SectionToolbar from "./PredefinedElements/SectionToolbar";
+import buildStore from "../../../buildStore";
+import { fireEvent, render, getByPlaceholderText, getByTestId, queryAllByRole } from "@testing-library/react";
+import Placeholder from "./PredefinedElements/Placeholder";
+import { cloneDeep } from "lodash";
+
+const messages = extractMessages(sharedMessages);
+
+const getColumnDefs = () => [
+	{
+		fieldName: "name",
+		label: "name",
+		placeholder: "t",
+	},
+];
+
+const standardListRecords = Array.from(Array(50).keys()).map(k => ({ name: "n" + k, id: k }));
+
+describe("TableWithInMemoryPaging", () => {
+	const theme = createMuiTheme();
+
+	let store;
+
+	spyOnConsole(["error"]);
+
+	beforeEach(() => {
+		global.SUPPORTED_LOCALES = undefined;
+		store = buildStore([]); // use the real reducers
+	});
+
+	afterEach(() => {
+		delete process.env.SUPPORTED_LOCALES;
+	});
+
+	it("Renders TableWithInMemoryPaging", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<TableWithInMemoryPaging
+					sortedRows={standardListRecords}
+					tableName={"StateName"}
+					columnDefs={configDefs}
+					pageSize={20}
+				/>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper provider={{ store }} memoryRouter intlProvider stylesProvider>
+				<Table rows={rows} headers={headers} tableProps={tableProps} />
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with onItemClick", () => {
+		const configDefs = getColumnDefs();
+		const onItemClick = sinon.spy().named("onItemClick");
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<TableWithInMemoryPaging
+					sortedRows={standardListRecords}
+					tableName={"StateName"}
+					columnDefs={configDefs}
+					pageSize={20}
+					onItemClick={onItemClick}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const row = mountedComponent.find("td").first();
+
+		row.simulate("click");
+		expect(onItemClick, "was called once");
+	});
+
+	it("Renders TableWithInMemoryPaging with right toolbar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const toolbarRightContent = <div>hello</div>;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						toolbarRightContent={toolbarRightContent}
+						pageSize={20}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar rightContent={toolbarRightContent}></SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with search", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						pageSize={20}
+						searchProperties={["name"]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar>
+						<SearchControl placeholder="Search" />
+					</SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with search and right toolbar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+		const toolbarRightContent = <div>hello</div>;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						searchProperties={["name"]}
+						toolbarRightContent={toolbarRightContent}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar rightContent={toolbarRightContent}>
+						<SearchControl placeholder="Search" />
+					</SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging search for something", () => {
+		const configDefs = getColumnDefs();
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						searchProperties={["name"]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const { container } = render(component);
+
+		const searchInput = getByPlaceholderText(container, "Search");
+		const searchButton = getByTestId(container, "searchButton");
+
+		const beforeTableRowCount = queryAllByRole(container, "cell").length;
+		expect(beforeTableRowCount, "not to be", 0);
+
+		fireEvent.change(searchInput, {
+			target: {
+				value: "invalid text",
+			},
+		});
+		fireEvent.click(searchButton);
+
+		const afterTableRowCount = queryAllByRole(container, "getAllByRole").length;
+
+		expect(beforeTableRowCount, "not to be", afterTableRowCount);
+		expect(afterTableRowCount, "to be", 0);
+	});
+
+	it("Renders TableWithInMemoryPaging with filled count bar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						totalCountLabelId={sharedMessages.about}
+						noRowsTotalCountLabelId={sharedMessages.help}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const tableInfo = <TableInfoBar tableLabel={"About"} />;
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<Table rows={rows} headers={headers} tableProps={tableProps} tableInfo={tableInfo} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with empty count bar and with placeholder", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, []);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={[]}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						totalCountLabelId={sharedMessages.about}
+						noRowsTotalCountLabelId={sharedMessages.help}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const tableInfo = <TableInfoBar tableLabel={"Help"} />;
+
+		const placeholder = <Placeholder cellList={configDefs.map(col => col.placeholder)} />;
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<Table
+						rows={rows}
+						headers={headers}
+						tableProps={tableProps}
+						tableInfo={tableInfo}
+						placeholder={placeholder}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with a different key", () => {
+		const configDefs = getColumnDefs();
+		const records = cloneDeep(standardListRecords);
+		records.forEach(record => {
+			record.anotherId = record.id;
+			delete record.id;
+		});
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={records}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						searchProperties={["name"]}
+						rowKeyField="anotherId"
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		render(component);
+
+		expect(console.error, "was not called");
+	});
+});

package/src/components/MaterialUI/DataDisplay/TooltippedElements/MultipleLinesText.js

@@ -39,9 +39,13 @@ const MultipleLinesText = ({ children, titleValue, textProps, tooltipClasses })
 		[isClamped, setIsClamped],
 	);
 
+	if (!children) {
+		return null;
+	}
+
 	return (
 		<TooltippedTextClamp
-			disableCssClamp={true}
+			disableCssClamp={false}
 			clamp={lineCount}
 			className={classNames(classes.clampedText, customStyles)}
 			children={children.toString()}

package/src/components/MaterialUI/DataDisplay/TooltippedElements/MultipleLinesText.test.js

@@ -17,7 +17,7 @@ describe("MultipleLinesText", () => {
 
 		const mountedComponent = mount(component);
 		const expected = (
-			<TextClamp disableCssClamp={true} clamp={lineCount}>
+			<TextClamp disableCssClamp={false} clamp={lineCount}>
 				{text}
 			</TextClamp>
 		);
@@ -89,4 +89,10 @@ describe("MultipleLinesText", () => {
 			expect(() => mount(component), "to throw a", TypeError);
 		});
 	});
+
+	it("Returns null if children is null", () => {
+		const component = <MultipleLinesText>{null}</MultipleLinesText>;
+		const mountedComponent = shallow(component);
+		expect(mountedComponent.isEmptyRender(), "to be true");
+	});
 });

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

@@ -6,12 +6,10 @@ import "react-datepicker/dist/react-datepicker.css";
 import TimePicker from "./TimePicker";
 import { makeStyles } from "@material-ui/core/styles";
 import {
-	getTimeZoneByName,
-	convertTimeToOtherTimeZone,
+	getIanaTimeZoneFromWindowsName,
 	convertTimeToLocalTimeZone,
+	getWindowsTimeZone,
 } from "../../../utils/timezoneHelper";
-import { namedLookupLocalizedSelector } from "../../../selectors/metadata";
-import { useSelector } from "react-redux";
 
 const useStyles = makeStyles(theme => ({
 	container: {
@@ -139,24 +137,31 @@ const WrappedDatePicker = ({
 	readOnly,
 	showTimeSelectOnly,
 	metadata,
-	timePickerTimeZone,
+	timePickerWindowsTimeZone,
 	error,
 	timeOption,
 	...props
 }) => {
 	const classes = useStyles({ readOnly });
-	const timeZoneName = getTimeZoneByName(timePickerTimeZone);
-	const startDate = value
-		? timePickerTimeZone && useTimeZone
-			? convertTimeToLocalTimeZone(new Date(value), timeZoneName)
-			: new Date(value)
-		: null;
+
+	const ianaTimeZone =
+		useTimeZone && timePickerWindowsTimeZone ? getIanaTimeZoneFromWindowsName(timePickerWindowsTimeZone) : null;
+
+	const computeDateWithTimezone = React.useCallback(
+		date => {
+			return date ? (ianaTimeZone ? convertTimeToLocalTimeZone(new Date(date), ianaTimeZone) : new Date(date)) : null;
+		},
+		[ianaTimeZone],
+	);
+
+	const startDate = computeDateWithTimezone(value);
 	const disabledCls = classNames({ [classes.disabled]: props.disabled });
-	const localizedTimeZoneName = useSelector(namedLookupLocalizedSelector("customer", "TimeZone", timePickerTimeZone));
+
+	const windowsTimeZoneName = useTime && showTimeZone ? (timePickerWindowsTimeZone ?? getWindowsTimeZone()) : null;
 
 	const updateDate = (date, metadata) => {
 		if (onChange) {
-			onChange(useTimeZone && timePickerTimeZone ? convertTimeToOtherTimeZone(date, timeZoneName) : date, metadata);
+			onChange(computeDateWithTimezone(date), metadata);
 		}
 	};
 
@@ -179,13 +184,7 @@ const WrappedDatePicker = ({
 						showTimeInput={useTime ?? false}
 						useTime={useTime ?? false}
 						customTimeInput={
-							useTime ? (
-								<TimePicker
-									showTimeZone={showTimeZone}
-									requestedTimeZone={localizedTimeZoneName}
-									timeOption={timeOption}
-								/>
-							) : null
+							useTime ? <TimePicker windowsTimeZone={windowsTimeZoneName} timeOption={timeOption} /> : null
 						}
 						timeInputLabel={timeInputLabel ?? ""}
 						readOnly={readOnly}