ExperimentList tests, use immer.js

frontend/package.json

@@ -11,6 +11,7 @@
     "d3-dsv": "^1.0.10",
     "dagre": "^0.8.2",
     "http-proxy-middleware": "^0.19.0",
+    "immer": "^1.7.4",
     "js-yaml": "^3.12.0",
     "portable-fetch": "^3.0.0",
     "re-resizable": "^4.9.0",

frontend/src/TestUtils.tsx

@@ -25,12 +25,12 @@ export default class TestUtils {
    * Mounts the given component with a fake router and returns the mounted tree
    */
   // tslint:disable-next-line:variable-name
-  public static mountWithRouter(ComponentClass: React.ComponentClass, props: any) {
+  public static mountWithRouter(component: React.ReactElement<any>) {
     const childContextTypes = {
       router: object,
     };
     const context = createRouterContext();
-    const tree = mount(<ComponentClass {...props} />, { context, childContextTypes });
+    const tree = mount(component, { context, childContextTypes });
     return tree;
   }
 

frontend/src/components/CustomTable.tsx

@@ -16,17 +16,18 @@
 
 import * as React from 'react';
 import ArrowRight from '@material-ui/icons/ArrowRight';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import IconButton from '@material-ui/core/IconButton';
 import MenuItem from '@material-ui/core/MenuItem';
 import Radio from '@material-ui/core/Radio';
+import Separator from '../atoms/Separator';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import TextField from '@material-ui/core/TextField';
 import Tooltip from '@material-ui/core/Tooltip';
 import WarningIcon from '@material-ui/icons/WarningRounded';
 import { ListRequest } from '../lib/Apis';
-import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { classes, stylesheet } from 'typestyle';
 import { fontsize, dimension, commonCss, color, padding } from '../Css';
@@ -248,6 +249,10 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
                 onChange={this.handleSelectAllClick.bind(this)} />
             </div>
           )}
+          {/* Shift cells to account for expand button */}
+          {!!this.props.getExpandComponent && (
+            <Separator orientation='horizontal' units={40} />
+          )}
           {this.props.columns.map((col, i) => {
             const isColumnSortable = !!this.props.columns[i].sortKey;
             const isCurrentSortColumn = sortBy === this.props.columns[i].sortKey;

frontend/src/components/__snapshots__/CustomTable.test.tsx.snap

@@ -234,6 +234,10 @@ exports[`CustomTable renders a collapsed row 1`] = `
         onChange={[Function]}
       />
     </div>
+    <Component
+      orientation="horizontal"
+      units={40}
+    />
     <div
       className="columnName"
       key="0"
@@ -399,6 +403,10 @@ exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
   <div
     className="header"
   >
+    <Component
+      orientation="horizontal"
+      units={40}
+    />
     <div
       className="columnName"
       key="0"
@@ -932,6 +940,10 @@ exports[`CustomTable renders an expanded row with expanded component below it 1`
         onChange={[Function]}
       />
     </div>
+    <Component
+      orientation="horizontal"
+      units={40}
+    />
     <div
       className="columnName"
       key="0"