orc-shared 5.10.0-dev.4 → 5.10.0-dev.6

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

@@ -14,6 +14,7 @@ var _TableProps = _interopRequireWildcard(require("./TableProps"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactResizeDetector = _interopRequireDefault(require("react-resize-detector"));
 var _lodash = require("lodash");
+var _useViewState3 = _interopRequireDefault(require("../../../hooks/useViewState"));
 var _excluded = ["deepPropsComparation", "dataRows", "isEditingMode"],
   _excluded2 = ["deepPropsComparation", "isEditingMode"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -318,16 +319,25 @@ var buildTableRows = function buildTableRows(rows, classes, customClasses, selec
   return mappedRows;
 };
 var FullTable = _react.default.forwardRef(function (props, ref) {
+  return props.saveScrollbarPosition ? /*#__PURE__*/_react.default.createElement(FullTableWithSavedScrollbar, _extends({}, props, {
+    ref: ref
+  })) : /*#__PURE__*/_react.default.createElement(DefaultFullTable, _extends({}, props, {
+    ref: ref
+  }));
+});
+var DefaultFullTable = _react.default.forwardRef(function (props, ref) {
   var scrollEvent = function scrollEvent(evt) {
     if (evt.target.scrollHeight - (evt.target.scrollTop + evt.target.offsetHeight) < 100 && props.dataRows.length === props.latestPage * props.pageLength) {
       props.scrollLoader(props.latestPage + 1);
     }
+    props.saveScrollBarPosition == null || props.saveScrollBarPosition(evt);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     key: "actualTable",
     className: (0, _classnames.default)(props.classes.tableContainer, props.customClasses.tableContainer),
     ref: ref,
-    onScroll: scrollEvent
+    onScroll: scrollEvent,
+    "data-qa": "scrollable-table-div"
   }, /*#__PURE__*/_react.default.createElement(_reactResizeDetector.default, {
     onResize: props.onResize
   }), /*#__PURE__*/_react.default.createElement(_Table.default, {
@@ -346,6 +356,46 @@ var FullTable = _react.default.forwardRef(function (props, ref) {
     className: props.classes.placeholder
   }, props.placeholder));
 });
+var FullTableWithSavedScrollbar = _react.default.forwardRef(__signature__(__signature__(function (props, ref) {
+  if (props.saveScrollbarPosition && !props.tableName) {
+    throw new Error("prop 'tableName' is required if 'saveScrollbarPosition' is set to true.");
+  }
+  var _useViewState = (0, _useViewState3.default)(props.tableName + "ScrollbarPosition"),
+    _useViewState2 = _slicedToArray(_useViewState, 2),
+    scrollbarViewState = _useViewState2[0],
+    updateScrollbarViewState = _useViewState2[1];
+  var _useState = (0, _react.useState)(scrollbarViewState.scrollBarPosition),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollbar = _useState2[0],
+    setScrollbarPosition = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handler = setTimeout(function () {
+      updateScrollbarViewState("scrollBarPosition", scrollbar);
+    }, 500);
+    return function () {
+      clearTimeout(handler);
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [scrollbar]);
+  var saveScrollBarPosition = function saveScrollBarPosition(evt) {
+    setScrollbarPosition(evt.target.scrollTop);
+  };
+  (0, _react.useEffect)(function () {
+    if (scrollbarViewState.scrollBarPosition > 0) {
+      ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(DefaultFullTable, _extends({}, props, {
+    ref: ref,
+    saveScrollBarPosition: saveScrollBarPosition
+  }));
+}, "useViewState{[scrollbarViewState, updateScrollbarViewState]}\nuseState{[scrollbar, setScrollbarPosition](scrollbarViewState.scrollBarPosition)}\nuseEffect{}\nuseEffect{}", function () {
+  return [_useViewState3.default];
+}), "useViewState{[scrollbarViewState, updateScrollbarViewState]}\nuseState{[scrollbar, setScrollbarPosition](scrollbarViewState.scrollBarPosition)}\nuseEffect{}\nuseEffect{}", function () {
+  return [_useViewState3.default];
+}));
 var Table = function Table(_ref4) {
   var tableInfo = _ref4.tableInfo,
     headers = _ref4.headers,
@@ -369,6 +419,8 @@ var Table = function Table(_ref4) {
   var selectedRows = (tableProps == null ? void 0 : tableProps.get(_TableProps.default.propNames.selectedRows)) || null;
   var selectedRowsChanged = (tableProps == null ? void 0 : tableProps.get(_TableProps.default.propNames.selectedRowsChanged)) || null;
   var constrained = (tableProps == null ? void 0 : tableProps.get(_TableProps.default.propNames.constrained)) || false;
+  var tableName = (tableProps == null ? void 0 : tableProps.get(_TableProps.default.propNames.tableName)) || null;
+  var saveScrollbarPosition = (tableProps == null ? void 0 : tableProps.get(_TableProps.default.propNames.saveScrollbarPosition)) || false;
   customClasses["tableHeader"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.tableHeader)) || null;
   customClasses["tableRow"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.tableRow)) || null;
   customClasses["tableCell"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.tableCell)) || null;
@@ -378,17 +430,17 @@ var Table = function Table(_ref4) {
   customClasses["table"] = (tableProps == null ? void 0 : tableProps.getStyle(_TableProps.default.ruleNames.table)) || null;
   if (selectedRows && !selectedRowsChanged || !selectedRows && selectedRowsChanged) throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");
   var refScrolled = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    scrolled = _useState2[0],
-    setScrolled = _useState2[1];
-  var _useState3 = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrolled = _useState4[0],
+    setScrolled = _useState4[1];
+  var _useState5 = (0, _react.useState)({
       width: 0,
       height: 0
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tableSize = _useState4[0],
-    setTableSize = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    tableSize = _useState6[0],
+    setTableSize = _useState6[1];
   var _useTableSelection = (0, _useTableSelection3.useTableSelection)(rows, selectedRows, selectedRowsChanged),
     _useTableSelection2 = _slicedToArray(_useTableSelection, 3),
     selectedNumber = _useTableSelection2[0],
@@ -447,7 +499,9 @@ var Table = function Table(_ref4) {
     placeholder: placeholder,
     deepPropsComparation: deepPropsComparation,
     isEditingMode: isEditingMode,
-    context: context
+    context: context,
+    tableName: tableName,
+    saveScrollbarPosition: saveScrollbarPosition
   }));
 };
 __signature__(Table, "useRef{refScrolled}\nuseState{[scrolled, setScrolled](0)}\nuseState{[tableSize, setTableSize]({ width: 0, height: 0 })}\nuseTableSelection{[selectedNumber, tableSelectionStatus, selectionMethods]}\nuseStyles{classes}\nuseEffect{}\nuseCallback{onResize}", function () {
@@ -487,6 +541,8 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(buildTableHeaders, "buildTableHeaders", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(buildTableRows, "buildTableRows", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(FullTable, "FullTable", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
+  reactHotLoader.register(DefaultFullTable, "DefaultFullTable", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
+  reactHotLoader.register(FullTableWithSavedScrollbar, "FullTableWithSavedScrollbar", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(Table, "Table", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
 })();
@@ -521,6 +577,8 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(buildTableHeaders, "buildTableHeaders", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(buildTableRows, "buildTableRows", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(FullTable, "FullTable", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
+  reactHotLoader.register(DefaultFullTable, "DefaultFullTable", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
+  reactHotLoader.register(FullTableWithSavedScrollbar, "FullTableWithSavedScrollbar", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(Table, "Table", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/Table.js");
 })();

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

@@ -37,6 +37,8 @@ var TableProps = /*#__PURE__*/function (_ComponentProps) {
     _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.componentProps.set(_this.constructor.propNames.tableName, null);
+    _this.componentProps.set(_this.constructor.propNames.saveScrollbarPosition, null);
     _this.componentClasses.set(_this.constructor.ruleNames.tableHeader, null);
     _this.componentClasses.set(_this.constructor.ruleNames.tableRow, null);
     _this.componentClasses.set(_this.constructor.ruleNames.tableCell, null);
@@ -66,7 +68,9 @@ _defineProperty(TableProps, "propNames", {
   isEditingMode: "isEditingMode",
   selectedRows: "selectedRows",
   selectedRowsChanged: "selectedRowsChanged",
-  constrained: "constrained"
+  constrained: "constrained",
+  tableName: "tableName",
+  saveScrollbarPosition: "saveScrollbarPosition"
 });
 _defineProperty(TableProps, "ruleNames", {
   tableHeader: "tableHeader",

package/dist/constants.js

@@ -33,7 +33,8 @@ var platformRoles = exports.platformRoles = {
   Administrator: "Administrator",
   Editor: "Editor",
   Reader: "Reader",
-  Recipient: "Recipient"
+  Recipient: "Recipient",
+  PasswordReset: "PasswordReset"
 };
 var roleGroups = exports.roleGroups = {
   Products: "Products",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.0-dev.4",
+	"version": "5.10.0-dev.6",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

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

@@ -10,6 +10,7 @@ import TableProps, { isTableProps } from "./TableProps";
 import classNames from "classnames";
 import ResizeDetector from "react-resize-detector";
 import { isEqual } from "lodash";
+import useViewState from "../../../hooks/useViewState";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -303,6 +304,14 @@ const buildTableRows = (
 };
 
 const FullTable = React.forwardRef((props, ref) => {
+	return props.saveScrollbarPosition ? (
+		<FullTableWithSavedScrollbar {...props} ref={ref} />
+	) : (
+		<DefaultFullTable {...props} ref={ref} />
+	);
+});
+
+const DefaultFullTable = React.forwardRef((props, ref) => {
 	const scrollEvent = evt => {
 		if (
 			evt.target.scrollHeight - (evt.target.scrollTop + evt.target.offsetHeight) < 100 &&
@@ -310,6 +319,8 @@ const FullTable = React.forwardRef((props, ref) => {
 		) {
 			props.scrollLoader(props.latestPage + 1);
 		}
+
+		props.saveScrollBarPosition?.(evt);
 	};
 
 	return (
@@ -318,6 +329,7 @@ const FullTable = React.forwardRef((props, ref) => {
 			className={classNames(props.classes.tableContainer, props.customClasses.tableContainer)}
 			ref={ref}
 			onScroll={scrollEvent}
+			data-qa="scrollable-table-div"
 		>
 			<ResizeDetector onResize={props.onResize} />
 			<TableMui
@@ -345,6 +357,41 @@ const FullTable = React.forwardRef((props, ref) => {
 	);
 });
 
+const FullTableWithSavedScrollbar = React.forwardRef((props, ref) => {
+	if (props.saveScrollbarPosition && !props.tableName) {
+		throw new Error("prop 'tableName' is required if 'saveScrollbarPosition' is set to true.");
+	}
+
+	const [scrollbarViewState, updateScrollbarViewState] = useViewState(props.tableName + "ScrollbarPosition");
+	const [scrollbar, setScrollbarPosition] = useState(scrollbarViewState.scrollBarPosition);
+
+	useEffect(
+		() => {
+			const handler = setTimeout(() => {
+				updateScrollbarViewState("scrollBarPosition", scrollbar);
+			}, 500);
+			return () => {
+				clearTimeout(handler);
+			};
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[scrollbar],
+	);
+
+	const saveScrollBarPosition = evt => {
+		setScrollbarPosition(evt.target.scrollTop);
+	};
+
+	useEffect(() => {
+		if (scrollbarViewState.scrollBarPosition > 0) {
+			ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return <DefaultFullTable {...props} ref={ref} saveScrollBarPosition={saveScrollBarPosition} />;
+});
+
 const Table = ({
 	tableInfo,
 	headers,
@@ -370,6 +417,8 @@ const Table = ({
 	const selectedRows = tableProps?.get(TableProps.propNames.selectedRows) || null;
 	const selectedRowsChanged = tableProps?.get(TableProps.propNames.selectedRowsChanged) || null;
 	const constrained = tableProps?.get(TableProps.propNames.constrained) || false;
+	const tableName = tableProps?.get(TableProps.propNames.tableName) || null;
+	const saveScrollbarPosition = tableProps?.get(TableProps.propNames.saveScrollbarPosition) || false;
 
 	customClasses["tableHeader"] = tableProps?.getStyle(TableProps.ruleNames.tableHeader) || null;
 	customClasses["tableRow"] = tableProps?.getStyle(TableProps.ruleNames.tableRow) || null;
@@ -467,6 +516,8 @@ const Table = ({
 				deepPropsComparation={deepPropsComparation}
 				isEditingMode={isEditingMode}
 				context={context}
+				tableName={tableName}
+				saveScrollbarPosition={saveScrollbarPosition}
 			/>
 		</TableContainer>
 	);

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

@@ -19,6 +19,8 @@ import ResizeDetector from "react-resize-detector";
 import CheckboxMui from "../Inputs/Checkbox";
 import { cloneDeep } from "lodash";
 import TooltippedTypography from "./TooltippedElements/TooltippedTypography";
+import Immutable from "immutable";
+import { TestWrapper } from "../../../utils/testUtils";
 
 const TestComp = ({ classToTest, styleProps }) => {
 	const classes = useStyles({ ...styleProps });
@@ -507,6 +509,22 @@ describe("Table", () => {
 		{ fieldName: "a2", label: headerLabels.column2 },
 	];
 
+	let store, state;
+
+	beforeEach(() => {
+		state = Immutable.fromJS({
+			modules: {
+				tree: {},
+			},
+			view: {},
+		});
+		store = {
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: sinon.spy().named("dispatch"),
+		};
+	});
+
 	it("Fails if tableProps has wrong type", () => {
 		ignoreConsoleError(() => {
 			const component = <Table rows={[]} headers={[]} tableProps="Wrong type" />;
@@ -1113,4 +1131,117 @@ describe("Table", () => {
 
 		expect(style.customClass, "to equal", "specialClass");
 	});
+
+	it("Table throws if saveScrollbar is true but tableName is falsy", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.tableName, null);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		ignoreConsoleError(() => {
+			const component = <Table rows={rows} headers={headers} tableProps={tableProps} />;
+			expect(() => mount(component), "to throw a", Error).then(error => {
+				expect(error, "to have message", "prop 'tableName' is required if 'saveScrollbarPosition' is set to true.");
+			});
+		});
+	});
+
+	it("handle scrolling event with save ", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<Table
+					rows={rows}
+					headers={headers}
+					pageLength={2}
+					latestPage={1}
+					tableProps={tableProps}
+					scrollLoader={scrollLoader}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const scrollEvent = document.createEvent("MouseEvents");
+		scrollEvent.initEvent("scroll", true, false);
+
+		const table = mountedComponent.find(TableMui);
+
+		table.simulate("scroll", {
+			target: { scrollHeight: 1000, scrollTop: 40, offsetHeight: 100 },
+		});
+
+		expect(scrollLoader, "was not called");
+
+		table.simulate("scroll", {
+			target: { scrollHeight: 1000, scrollTop: 850, offsetHeight: 100 },
+		});
+
+		return expect(scrollLoader, "to have calls satisfying", [{ args: [2] }])
+			.then(() => new Promise(r => setTimeout(r, 600)))
+			.then(() =>
+				expect(store.dispatch, "to have calls satisfying", [
+					{
+						args: [
+							{
+								type: "VIEW_STATE_SET_FIELD",
+								payload: {
+									name: "testScrollbarPosition",
+									field: "scrollBarPosition",
+									value: 850,
+								},
+							},
+						],
+					},
+				]),
+			);
+	});
+
+	it("should initialize scrollbar to saved state", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 800,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<Table
+					rows={rows}
+					headers={headers}
+					pageLength={2}
+					latestPage={1}
+					tableProps={tableProps}
+					scrollLoader={scrollLoader}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 800);
+	});
 });

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

@@ -12,6 +12,8 @@ class TableProps extends ComponentProps {
 		selectedRows: "selectedRows",
 		selectedRowsChanged: "selectedRowsChanged",
 		constrained: "constrained",
+		tableName: "tableName",
+		saveScrollbarPosition: "saveScrollbarPosition",
 	};
 
 	static ruleNames = {
@@ -37,6 +39,8 @@ class TableProps extends ComponentProps {
 		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.componentProps.set(this.constructor.propNames.tableName, null);
+		this.componentProps.set(this.constructor.propNames.saveScrollbarPosition, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.tableHeader, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableRow, null);

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

@@ -30,6 +30,8 @@ describe("TableProps Props", () => {
 			"selectedRows",
 			"selectedRowsChanged",
 			"constrained",
+			"tableName",
+			"saveScrollbarPosition",
 		];
 
 		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];

package/src/constants.js

@@ -19,6 +19,7 @@ export const platformRoles = {
 	Editor: "Editor",
 	Reader: "Reader",
 	Recipient: "Recipient",
+	PasswordReset: "PasswordReset",
 };
 
 export const roleGroups = {