Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

frontend/src/Components/Page/Toolbar/PageToolbar.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'toolbar': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Page/Toolbar/PageToolbarButton.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'isDisabled': string;
+  'label': string;
+  'labelContainer': string;
+  'toolbarButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Page/Toolbar/PageToolbarButton.js

@@ -45,7 +45,8 @@ PageToolbarButton.propTypes = {
   iconName: PropTypes.object.isRequired,
   spinningName: PropTypes.object,
   isSpinning: PropTypes.bool,
-  isDisabled: PropTypes.bool
+  isDisabled: PropTypes.bool,
+  onPress: PropTypes.func
 };
 
 PageToolbarButton.defaultProps = {

frontend/src/Components/Page/Toolbar/PageToolbarOverflowMenuItem.css

@@ -0,0 +1,3 @@
+.icon {
+  margin-right: 8px;
+}

frontend/src/Components/Page/Toolbar/PageToolbarOverflowMenuItem.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'icon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Page/Toolbar/PageToolbarOverflowMenuItem.tsx

@@ -0,0 +1,41 @@
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import React from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+import SpinnerIcon from 'Components/SpinnerIcon';
+import styles from './PageToolbarOverflowMenuItem.css';
+
+interface PageToolbarOverflowMenuItemProps {
+  iconName: IconDefinition;
+  spinningName?: IconDefinition;
+  isDisabled?: boolean;
+  isSpinning?: boolean;
+  showIndicator?: boolean;
+  label: string;
+  text?: string;
+  onPress: () => void;
+}
+
+function PageToolbarOverflowMenuItem(props: PageToolbarOverflowMenuItemProps) {
+  const {
+    iconName,
+    spinningName,
+    label,
+    isDisabled,
+    isSpinning = false,
+    ...otherProps
+  } = props;
+
+  return (
+    <MenuItem key={label} isDisabled={isDisabled || isSpinning} {...otherProps}>
+      <SpinnerIcon
+        className={styles.icon}
+        name={iconName}
+        spinningName={spinningName}
+        isSpinning={isSpinning}
+      />
+      {label}
+    </MenuItem>
+  );
+}
+
+export default PageToolbarOverflowMenuItem;

frontend/src/Components/Page/Toolbar/PageToolbarSection.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'center': string;
+  'left': string;
+  'overflowMenuButton': string;
+  'overflowMenuItemIcon': string;
+  'right': string;
+  'section': string;
+  'sectionContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Page/Toolbar/PageToolbarSection.js

@@ -4,12 +4,11 @@ import React, { Component } from 'react';
 import Measure from 'Components/Measure';
 import Menu from 'Components/Menu/Menu';
 import MenuContent from 'Components/Menu/MenuContent';
-import MenuItem from 'Components/Menu/MenuItem';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
-import SpinnerIcon from 'Components/SpinnerIcon';
 import { forEach } from 'Helpers/elementChildren';
 import { align, icons } from 'Helpers/Props';
 import dimensions from 'Styles/Variables/dimensions';
+import PageToolbarOverflowMenuItem from './PageToolbarOverflowMenuItem';
 import styles from './PageToolbarSection.css';
 
 const BUTTON_WIDTH = parseInt(dimensions.toolbarButtonWidth);
@@ -168,28 +167,15 @@ class PageToolbarSection extends Component {
                         {
                           overflowItems.map((item) => {
                             const {
-                              iconName,
-                              spinningName,
                               label,
-                              isDisabled,
-                              isSpinning,
-                              ...otherProps
+                              overflowComponent: OverflowComponent = PageToolbarOverflowMenuItem
                             } = item;
 
                             return (
-                              <MenuItem
+                              <OverflowComponent
                                 key={label}
-                                isDisabled={isDisabled || isSpinning}
-                                {...otherProps}
-                              >
-                                <SpinnerIcon
-                                  className={styles.overflowMenuItemIcon}
-                                  name={iconName}
-                                  spinningName={spinningName}
-                                  isSpinning={isSpinning}
-                                />
-                                {label}
-                              </MenuItem>
+                                {...item}
+                              />
                             );
                           })
                         }

frontend/src/Components/Page/Toolbar/PageToolbarSeparator.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'separator': string;
+}
+export const cssExports: CssExports;
+export default cssExports;