orc-shared 5.10.0-dev.7 → 5.10.0-dev.9

package/src/components/AppFrame/Preferences.test.js

@@ -1,7 +1,5 @@
 import React from "react";
 import Immutable from "immutable";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
 import { RSAA } from "redux-api-middleware";
 import sinon from "sinon";
 import { Ignore } from "unexpected-reaction";
@@ -23,14 +21,15 @@ import Preferences, {
 	PrefForm,
 	Footer,
 	PrefButton,
-	createGetUpdater,
 	PREFS_NAME,
 	clickOutsideHandler,
+	stateEventUpdater,
 } from "./Preferences";
 import { RESET_VERSION_INFO } from "../../actions/versionInfo";
-import { extractMessages } from "./../../utils/testUtils";
+import { extractMessages, TestWrapper } from "./../../utils/testUtils";
 import sharedMessages from "./../../sharedMessages";
 import { stringifyWithoutQuotes } from "./../../utils/parseHelper";
+import InformationItem from "../MaterialUI/DataDisplay/PredefinedElements/InformationItem";
 
 const messages = extractMessages(sharedMessages);
 
@@ -148,11 +147,9 @@ describe("Preferences", () => {
 
 	it("renders a form dialog", () => {
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -166,29 +163,29 @@ describe("Preferences", () => {
 						target: getStyledClassSelector(PrefButton) + ":last-child",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
 							<div>
-								<Header>{stringifyWithoutQuotes(messages["orc-shared.preferences"])}</Header>
-								<PrefForm>
-									<div>
-										<label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</label>
-										<Ignore />
-									</div>
-									<div>
-										<label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</label>
-										<Ignore />
-									</div>
-								</PrefForm>
-								<Footer>
-									<PrefButton id="cancelPrefs">{stringifyWithoutQuotes(messages["orc-shared.cancel"])}</PrefButton>
-									<PrefButton id="savePrefs" primary>
-										{stringifyWithoutQuotes(messages["orc-shared.save"])}
-									</PrefButton>
-								</Footer>
+								<div>
+									<Header>{stringifyWithoutQuotes(messages["orc-shared.preferences"])}</Header>
+									<PrefForm>
+										<InformationItem label={sharedMessages.displayLanguage}>
+											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
+											<Ignore />
+										</InformationItem>
+									</PrefForm>
+									<Footer>
+										<PrefButton id="cancelPrefs">{stringifyWithoutQuotes(messages["orc-shared.cancel"])}</PrefButton>
+										<PrefButton id="savePrefs" primary>
+											{stringifyWithoutQuotes(messages["orc-shared.save"])}
+										</PrefButton>
+									</Footer>
+								</div>
 							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -203,11 +200,9 @@ describe("Preferences", () => {
 	it("shows view state fields, saves language change", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, language: "fr-CA" }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -221,24 +216,24 @@ describe("Preferences", () => {
 						target: getStyledClassSelector(PrefButton) + ":last-child",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
 							<div>
-								<Ignore />
-								<PrefForm>
-									<div>
-										<label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</label>
-										<Ignore />
-									</div>
-									<div>
-										<label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</label>
-										<Ignore />
-									</div>
-								</PrefForm>
-								<Ignore />
+								<div>
+									<Ignore />
+									<PrefForm>
+										<InformationItem label={sharedMessages.displayLanguage}>
+											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
+											<Ignore />
+										</InformationItem>
+									</PrefForm>
+									<Ignore />
+								</div>
 							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -316,11 +311,9 @@ describe("Preferences", () => {
 	it("shows view state fields, saves application change", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, application: 3 }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -334,24 +327,24 @@ describe("Preferences", () => {
 						target: getStyledClassSelector(PrefButton) + ":last-child",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
 							<div>
-								<Ignore />
-								<PrefForm>
-									<div>
-										<label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</label>
-										<Ignore />
-									</div>
-									<div>
-										<label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</label>
-										<Ignore />
-									</div>
-								</PrefForm>
-								<Ignore />
+								<div>
+									<Ignore />
+									<PrefForm>
+										<InformationItem label={sharedMessages.displayLanguage}>
+											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
+											<Ignore />
+										</InformationItem>
+									</PrefForm>
+									<Ignore />
+								</div>
 							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -393,11 +386,9 @@ describe("Preferences", () => {
 	it("clears and closes", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, language: "fr-CA", application: 3 }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -411,24 +402,24 @@ describe("Preferences", () => {
 						target: getStyledClassSelector(PrefButton) + ":first-child",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
 							<div>
-								<Ignore />
-								<PrefForm>
-									<div>
-										<label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</label>
-										<Ignore />
-									</div>
-									<div>
-										<label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</label>
-										<Ignore />
-									</div>
-								</PrefForm>
-								<Ignore />
+								<div>
+									<Ignore />
+									<PrefForm>
+										<InformationItem label={sharedMessages.displayLanguage}>
+											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
+											<Ignore />
+										</InformationItem>
+									</PrefForm>
+									<Ignore />
+								</div>
 							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -451,11 +442,9 @@ describe("Preferences", () => {
 			.deleteIn(["locale", "defaultCulture"])
 			.deleteIn(["settings", "defaultApp"]);
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -463,50 +452,46 @@ describe("Preferences", () => {
 			expect(
 				modalRoot,
 				"to satisfy",
-				<div>
+				<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 					<div>
 						<div>
-							<Ignore />
-							<PrefForm>
-								<div>
-									<label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</label>
-									<Ignore />
-								</div>
-								<div>
-									<label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</label>
-									<Ignore />
-								</div>
-							</PrefForm>
-							<Ignore />
+							<div>
+								<Ignore />
+								<PrefForm>
+									<InformationItem label={sharedMessages.displayLanguage}>
+										<Ignore />
+									</InformationItem>
+									<InformationItem label={sharedMessages.defaultApp}>
+										<Ignore />
+									</InformationItem>
+								</PrefForm>
+								<Ignore />
+							</div>
 						</div>
 					</div>
-				</div>,
+				</TestWrapper>,
 			),
 		);
 	});
 
-	describe("createGetUpdater", () => {
-		let update, update2;
+	describe("stateEventUpdater", () => {
+		let update;
 		beforeEach(() => {
 			update = sinon.spy().named("update");
-			update2 = () => {};
 		});
-		it("returns an update function", () =>
-			expect(createGetUpdater, "when called with", [update], "called with", ["testField"], "called with", [
-				"testValue",
-			]).then(() => expect(update, "to have calls satisfying", [{ args: ["testField", "testValue"] }])));
 
-		it("memoizes on update function and field name", () => {
-			const update1_1 = createGetUpdater(update)("111");
-			const update1_2 = createGetUpdater(update)("222");
-			const update2_1 = createGetUpdater(update2)("111");
-			const update2_2 = createGetUpdater(update2)("222");
-			expect(createGetUpdater, "called with", [update]).then(f =>
-				expect(f, "called with", ["111"], "to be", update1_1).and("called with", ["222"], "to be", update1_2),
-			);
-			expect(createGetUpdater, "called with", [update2]).then(f =>
-				expect(f, "called with", ["111"], "to be", update2_1).and("called with", ["222"], "to be", update2_2),
-			);
-		});
+		it("creates a handler for an event and calls update with the value of the target", () =>
+			expect(stateEventUpdater, "called with", [update, "application"], "called with", ["foo"]).then(() =>
+				expect(update, "to have calls satisfying", [{ args: ["application", "foo"] }]),
+			));
+
+		it("is memoized", () =>
+			expect(
+				stateEventUpdater,
+				"called with",
+				[update, "application"],
+				"to be",
+				stateEventUpdater(update, "application"),
+			));
 	});
 });

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js

@@ -60,10 +60,20 @@ const useStyles = makeStyles(theme => ({
 	},
 	root: {
 		flexGrow: 1,
+		display: "flex",
+	},
+	animatePlaceholderImage: {
+		animation: "$rotate 4s linear infinite",
+		margin: "auto",
+	},
+	"@keyframes rotate": {
+		to: {
+			transform: "rotate(1turn)",
+		},
 	},
 }));
 
-const Placeholder = ({ icon, title, subtitle, cellList = [], error = false }) => {
+const Placeholder = ({ icon, title, subtitle, cellList = [], error = false, animateIcon = false }) => {
 	const classes = useStyles();
 	return (
 		<>
@@ -101,7 +111,12 @@ const Placeholder = ({ icon, title, subtitle, cellList = [], error = false }) =>
 						alignItems="center"
 						className={`${classes.placeholder} ${error ? classes.placeholderError : ""}`}
 					>
-						{icon ? <Icon className={classes.placeholderImage} id={icon} /> : null}
+						{icon ? (
+							<Icon
+								className={`${classes.placeholderImage} ${animateIcon ? classes.animatePlaceholderImage : ""}`}
+								id={icon}
+							/>
+						) : null}
 						{title ? <Typography className={classes.placeholderTitle}>{title}</Typography> : null}
 						{subtitle ? <Typography className={classes.placeholderSubtitle}>{subtitle}</Typography> : null}
 					</Grid>

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

@@ -151,7 +151,9 @@ describe("Placeholder", () => {
 	});
 
 	it("Renders placeholder with all parametres", () => {
-		const component = <Placeholder icon={icon} title={title} subtitle={subtitle} cellList={cellList} error={true} />;
+		const component = (
+			<Placeholder icon={icon} animateIcon title={title} subtitle={subtitle} cellList={cellList} error={true} />
+		);
 
 		const mountedComponent = mount(component);
 		const expected = (

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, useImperativeHandle } from "react";
 import TableMui from "@material-ui/core/Table";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
@@ -392,136 +392,136 @@ const FullTableWithSavedScrollbar = React.forwardRef((props, ref) => {
 	return <DefaultFullTable {...props} ref={ref} saveScrollBarPosition={saveScrollBarPosition} />;
 });
 
-const Table = ({
-	tableInfo,
-	headers,
-	rows,
-	scrollLoader,
-	latestPage,
-	pageLength,
-	placeholder,
-	tableProps,
-	context,
-}) => {
-	if (isTableProps(tableProps) === false) {
-		throw new TypeError("tableProps property is not of type TableProps");
-	}
+const Table = React.forwardRef(
+	({ tableInfo, headers, rows, scrollLoader, latestPage, pageLength, placeholder, tableProps, context }, ref) => {
+		if (isTableProps(tableProps) === false) {
+			throw new TypeError("tableProps property is not of type TableProps");
+		}
 
-	const customClasses = tableProps?.get(TableProps.propNames.classes) || {};
-	const selectMode = tableProps?.get(TableProps.propNames.selectMode) || false;
-	const stickyHeader = tableProps?.get(TableProps.propNames.stickyHeader) || false;
-	const withoutTopBorder = tableProps?.get(TableProps.propNames.withoutTopBorder) || false;
-	const onRowClick = tableProps?.get(TableProps.propNames.onRowClick) || null;
-	const deepPropsComparation = tableProps?.get(TableProps.propNames.deepPropsComparation) || false;
-	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;
-	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;
-	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["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
-	customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
-
-	if ((selectedRows && !selectedRowsChanged) || (!selectedRows && selectedRowsChanged))
-		throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");
-
-	const refScrolled = useRef();
-
-	const [scrolled, setScrolled] = useState(0);
-	const [tableSize, setTableSize] = useState({ width: 0, height: 0 });
-
-	const [selectedNumber, tableSelectionStatus, selectionMethods] = useTableSelection(
-		rows,
-		selectedRows,
-		selectedRowsChanged,
-	);
+		const customClasses = tableProps?.get(TableProps.propNames.classes) || {};
+		const selectMode = tableProps?.get(TableProps.propNames.selectMode) || false;
+		const stickyHeader = tableProps?.get(TableProps.propNames.stickyHeader) || false;
+		const withoutTopBorder = tableProps?.get(TableProps.propNames.withoutTopBorder) || false;
+		const onRowClick = tableProps?.get(TableProps.propNames.onRowClick) || null;
+		const deepPropsComparation = tableProps?.get(TableProps.propNames.deepPropsComparation) || false;
+		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;
+		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;
+		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["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
+		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
+
+		if ((selectedRows && !selectedRowsChanged) || (!selectedRows && selectedRowsChanged))
+			throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");
+
+		const refScrolled = useRef();
+
+		useImperativeHandle(ref, () => ({
+			scrollToTop: () => {
+				if (refScrolled.current.scrollTop > 0) {
+					refScrolled.current.scrollTop = 0;
+				}
+			},
+		}));
+
+		const [scrolled, setScrolled] = useState(0);
+		const [tableSize, setTableSize] = useState({ width: 0, height: 0 });
+
+		const [selectedNumber, tableSelectionStatus, selectionMethods] = useTableSelection(
+			rows,
+			selectedRows,
+			selectedRowsChanged,
+		);
 
-	const classes = useStyles({
-		withoutTopBorder,
-		selectMode,
-		stickyHeader,
-		scrolled,
-		onRowClick,
-	});
+		const classes = useStyles({
+			withoutTopBorder,
+			selectMode,
+			stickyHeader,
+			scrolled,
+			onRowClick,
+		});
+
+		useEffect(() => {
+			const handleResize = () => {
+				if (refScrolled.current.offsetHeight < refScrolled.current.scrollHeight)
+					setScrolled(refScrolled.current.offsetWidth - refScrolled.current.clientWidth);
+				else setScrolled(0);
+			};
 
-	useEffect(() => {
-		const handleResize = () => {
-			if (refScrolled.current.offsetHeight < refScrolled.current.scrollHeight)
-				setScrolled(refScrolled.current.offsetWidth - refScrolled.current.clientWidth);
-			else setScrolled(0);
-		};
+			handleResize();
 
-		handleResize();
+			window.addEventListener("resize", handleResize);
 
-		window.addEventListener("resize", handleResize);
+			/* istanbul ignore next */
+			return () => window.removeEventListener("resize", handleResize);
+		}, [refScrolled, tableSize.width, tableSize.height]);
 
-		/* istanbul ignore next */
-		return () => window.removeEventListener("resize", handleResize);
-	}, [refScrolled, tableSize.width, tableSize.height]);
-
-	const tableHeaders = buildTableHeaders(
-		headers,
-		classes,
-		customClasses,
-		selectMode,
-		tableSelectionStatus,
-		selectionMethods,
-	);
+		const tableHeaders = buildTableHeaders(
+			headers,
+			classes,
+			customClasses,
+			selectMode,
+			tableSelectionStatus,
+			selectionMethods,
+		);
 
-	const tableRows = buildTableRows(
-		rows,
-		classes,
-		customClasses,
-		selectMode,
-		onRowClick,
-		selectionMethods,
-		deepPropsComparation,
-		context,
-		isEditingMode,
-	);
+		const tableRows = buildTableRows(
+			rows,
+			classes,
+			customClasses,
+			selectMode,
+			onRowClick,
+			selectionMethods,
+			deepPropsComparation,
+			context,
+			isEditingMode,
+		);
 
-	const stickerTableHeader =
-		stickyHeader === true ? (
-			<StickerTableHeader selectMode={selectMode} classes={classes} tableHeaders={tableHeaders} />
-		) : null;
+		const stickerTableHeader =
+			stickyHeader === true ? (
+				<StickerTableHeader selectMode={selectMode} classes={classes} tableHeaders={tableHeaders} />
+			) : null;
 
-	/* istanbul ignore next */
-	const onResize = useCallback((width, height) => setTableSize({ width: width, height: height }), [setTableSize]);
+		/* istanbul ignore next */
+		const onResize = useCallback((width, height) => setTableSize({ width: width, height: height }), [setTableSize]);
 
-	return (
-		<TableContainer className={classNames(classes.container, customClasses.container)}>
-			{tableInfo}
-			{stickerTableHeader}
-			<FullTable
-				ref={refScrolled}
-				classes={classes}
-				customClasses={customClasses}
-				constrained={constrained}
-				onResize={onResize}
-				selectedNumber={selectedNumber}
-				scrollLoader={scrollLoader}
-				tableHeaders={tableHeaders}
-				dataRows={rows}
-				tableRows={tableRows}
-				stickyHeader={stickyHeader}
-				latestPage={latestPage}
-				pageLength={pageLength}
-				placeholder={placeholder}
-				deepPropsComparation={deepPropsComparation}
-				isEditingMode={isEditingMode}
-				context={context}
-				tableName={tableName}
-				saveScrollbarPosition={saveScrollbarPosition}
-			/>
-		</TableContainer>
-	);
-};
+		return (
+			<TableContainer className={classNames(classes.container, customClasses.container)}>
+				{tableInfo}
+				{stickerTableHeader}
+				<FullTable
+					ref={refScrolled}
+					classes={classes}
+					customClasses={customClasses}
+					constrained={constrained}
+					onResize={onResize}
+					selectedNumber={selectedNumber}
+					scrollLoader={scrollLoader}
+					tableHeaders={tableHeaders}
+					dataRows={rows}
+					tableRows={tableRows}
+					stickyHeader={stickyHeader}
+					latestPage={latestPage}
+					pageLength={pageLength}
+					placeholder={placeholder}
+					deepPropsComparation={deepPropsComparation}
+					isEditingMode={isEditingMode}
+					context={context}
+					tableName={tableName}
+					saveScrollbarPosition={saveScrollbarPosition}
+				/>
+			</TableContainer>
+		);
+	},
+);
 
 export default React.memo(
 	Table,