Typings cleanup and improvements

Appease linter

(cherry picked from commit b2c43fb2a67965d68d3d35b72302b0cddb5aca23)
(cherry picked from commit 3b5e83670b844cf7c20bf7d744d9fbc96fde6902)

Closes #3516
Closes #3510
Closes #2778

frontend/src/Components/Page/PageContentBody.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, ReactNode, useCallback } from 'react';
-import Scroller from 'Components/Scroller/Scroller';
+import React, { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';
+import Scroller, { OnScroll } from 'Components/Scroller/Scroller';
 import ScrollDirection from 'Helpers/Props/ScrollDirection';
 import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
@@ -9,14 +9,11 @@ interface PageContentBodyProps {
   innerClassName?: string;
   children: ReactNode;
   initialScrollTop?: number;
-  onScroll?: (payload) => void;
+  onScroll?: (payload: OnScroll) => void;
 }
 
 const PageContentBody = forwardRef(
-  (
-    props: PageContentBodyProps,
-    ref: React.MutableRefObject<HTMLDivElement>
-  ) => {
+  (props: PageContentBodyProps, ref: ForwardedRef<HTMLDivElement>) => {
     const {
       className = styles.contentBody,
       innerClassName = styles.innerContentBody,
@@ -26,7 +23,7 @@ const PageContentBody = forwardRef(
     } = props;
 
     const onScrollWrapper = useCallback(
-      (payload) => {
+      (payload: OnScroll) => {
         if (onScroll && !isLocked()) {
           onScroll(payload);
         }

frontend/src/Components/Scroller/Scroller.tsx

@@ -1,9 +1,21 @@
 import classNames from 'classnames';
 import { throttle } from 'lodash';
-import React, { forwardRef, ReactNode, useEffect, useRef } from 'react';
+import React, {
+  ForwardedRef,
+  forwardRef,
+  MutableRefObject,
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react';
 import ScrollDirection from 'Helpers/Props/ScrollDirection';
 import styles from './Scroller.css';
 
+export interface OnScroll {
+  scrollLeft: number;
+  scrollTop: number;
+}
+
 interface ScrollerProps {
   className?: string;
   scrollDirection?: ScrollDirection;
@@ -12,11 +24,11 @@ interface ScrollerProps {
   scrollTop?: number;
   initialScrollTop?: number;
   children?: ReactNode;
-  onScroll?: (payload) => void;
+  onScroll?: (payload: OnScroll) => void;
 }
 
 const Scroller = forwardRef(
-  (props: ScrollerProps, ref: React.MutableRefObject<HTMLDivElement>) => {
+  (props: ScrollerProps, ref: ForwardedRef<HTMLDivElement>) => {
     const {
       className,
       autoFocus = false,
@@ -30,7 +42,7 @@ const Scroller = forwardRef(
     } = props;
 
     const internalRef = useRef();
-    const currentRef = ref ?? internalRef;
+    const currentRef = (ref as MutableRefObject<HTMLDivElement>) ?? internalRef;
 
     useEffect(
       () => {

frontend/src/Components/Table/VirtualTable.js

@@ -7,6 +7,8 @@ import { scrollDirections } from 'Helpers/Props';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import styles from './VirtualTable.css';
 
+const ROW_HEIGHT = 38;
+
 function overscanIndicesGetter(options) {
   const {
     cellCount,
@@ -48,8 +50,7 @@ class VirtualTable extends Component {
     const {
       items,
       scrollIndex,
-      scrollTop,
-      onRecompute
+      scrollTop
     } = this.props;
 
     const {
@@ -57,10 +58,7 @@ class VirtualTable extends Component {
       scrollRestored
     } = this.state;
 
-    if (this._grid &&
-        (prevState.width !== width ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
-      onRecompute(width);
+    if (this._grid && (prevState.width !== width || hasDifferentItemsOrOrder(prevProps.items, items))) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
@@ -103,7 +101,6 @@ class VirtualTable extends Component {
       className,
       items,
       scroller,
-      scrollTop: ignored,
       header,
       headerHeight,
       rowHeight,
@@ -149,6 +146,7 @@ class VirtualTable extends Component {
                 {header}
                 <div ref={registerChild}>
                   <Grid
+                    {...otherProps}
                     ref={this.setGridRef}
                     autoContainerWidth={true}
                     autoHeight={true}
@@ -170,7 +168,6 @@ class VirtualTable extends Component {
                     className={styles.tableBodyContainer}
                     style={gridStyle}
                     containerStyle={containerStyle}
-                    {...otherProps}
                   />
                 </div>
               </Scroller>
@@ -192,16 +189,14 @@ VirtualTable.propTypes = {
   scroller: PropTypes.instanceOf(Element).isRequired,
   header: PropTypes.node.isRequired,
   headerHeight: PropTypes.number.isRequired,
-  rowHeight: PropTypes.oneOfType([PropTypes.func, PropTypes.number]).isRequired,
   rowRenderer: PropTypes.func.isRequired,
-  onRecompute: PropTypes.func.isRequired
+  rowHeight: PropTypes.number.isRequired
 };
 
 VirtualTable.defaultProps = {
   className: styles.tableContainer,
   headerHeight: 38,
-  rowHeight: 38,
-  onRecompute: () => {}
+  rowHeight: ROW_HEIGHT
 };
 
 export default VirtualTable;

frontend/src/Components/withScrollPosition.tsx

@@ -1,24 +1,30 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import scrollPositions from 'Store/scrollPositions';
 
-function withScrollPosition(WrappedComponent, scrollPositionKey) {
-  function ScrollPosition(props) {
+interface WrappedComponentProps {
+  initialScrollTop: number;
+}
+
+interface ScrollPositionProps {
+  history: RouteComponentProps['history'];
+  location: RouteComponentProps['location'];
+  match: RouteComponentProps['match'];
+}
+
+function withScrollPosition(
+  WrappedComponent: React.FC<WrappedComponentProps>,
+  scrollPositionKey: string
+) {
+  function ScrollPosition(props: ScrollPositionProps) {
     const { history } = props;
 
     const initialScrollTop =
-      history.action === 'POP' ||
-      (history.location.state && history.location.state.restoreScrollPosition)
-        ? scrollPositions[scrollPositionKey]
-        : 0;
+      history.action === 'POP' ? scrollPositions[scrollPositionKey] : 0;
 
     return <WrappedComponent {...props} initialScrollTop={initialScrollTop} />;
   }
 
-  ScrollPosition.propTypes = {
-    history: PropTypes.object.isRequired,
-  };
-
   return ScrollPosition;
 }