TableRows can create vertical padding (#656)

This commit adds the `showPadding` prop to `TableRow`s. If showPadding
is true, then the row will have vertical padding above the row, and
below the last child of the row. The padding will match the background
color of the given row. The padding is implemented as extra `tr`
elements that themselves contain empty tds.

Test plan: The new behavior is pretty thoroughly covered by new unit
tests. Additionally, if you want to see padding in the live UI, you can
apply the following (slightly contrived) diff.

```
diff --git a/src/app/credExplorer/pagerankTable/Connection.js b/src/app/credExplorer/pagerankTable/Connection.js
index 3a882cd..633525b 100644
--- a/src/app/credExplorer/pagerankTable/Connection.js
+++ b/src/app/credExplorer/pagerankTable/Connection.js
@@ -70,7 +70,7 @@ export class ConnectionRow extends React.PureComponent<ConnectionRowProps> {
         depth={depth}
         description={connectionView}
         connectionProportion={connectionProportion}
-        showPadding={false}
+        showPadding={depth % 3 === 0}
         score={sourceScore}
       >
         <ConnectionRowList
```

src/app/credExplorer/pagerankTable/Connection.js

@@ -70,6 +70,7 @@ export class ConnectionRow extends React.PureComponent<ConnectionRowProps> {
         depth={depth}
         description={connectionView}
         connectionProportion={connectionProportion}
+        showPadding={false}
         score={sourceScore}
       >
         <ConnectionRowList

src/app/credExplorer/pagerankTable/Node.js

@@ -50,6 +50,7 @@ export class NodeRow extends React.PureComponent<NodeRowProps> {
         description={description}
         connectionProportion={null}
         score={score}
+        showPadding={false}
       >
         <ConnectionRowList depth={1} node={node} sharedProps={sharedProps} />
       </TableRow>

src/app/credExplorer/pagerankTable/TableRow.js

@@ -15,6 +15,7 @@ type TableRowProps = {|
   +score: number,
   // Children to show when the row is expanded
   +children: ReactNode,
+  +showPadding: boolean,
 |};
 type TableRowState = {|
   expanded: boolean,
@@ -40,18 +41,18 @@ export class TableRow extends React.PureComponent<
       connectionProportion,
       score,
       children,
+      showPadding,
     } = this.props;
     const {expanded} = this.state;
     const percent =
       connectionProportion == null
         ? ""
         : (connectionProportion * 100).toFixed(2) + "%";
+    const backgroundColor = `rgba(0,143.4375,0,${1 - 0.9 ** depth})`;
     return (
       <React.Fragment>
-        <tr
-          key="self"
-          style={{backgroundColor: `rgba(0,143.4375,0,${1 - 0.9 ** depth})`}}
-        >
+        {showPadding && <PaddingRow backgroundColor={backgroundColor} />}
+        <tr key="self" style={{backgroundColor}}>
           <td style={{display: "flex", alignItems: "flex-start"}}>
             <button
               style={{
@@ -72,7 +73,23 @@ export class TableRow extends React.PureComponent<
           <td style={{textAlign: "right"}}>{scoreDisplay(score)}</td>
         </tr>
         {expanded && children}
+        {showPadding && <PaddingRow backgroundColor={backgroundColor} />}
       </React.Fragment>
     );
   }
 }
+
+export function PaddingRow(props: {|+backgroundColor: string|}) {
+  return (
+    <tr
+      style={{
+        height: 12,
+        backgroundColor: props.backgroundColor,
+      }}
+    >
+      <td />
+      <td />
+      <td />
+    </tr>
+  );
+}

src/app/credExplorer/pagerankTable/TableRow.test.js

@@ -2,7 +2,7 @@
 
 import React from "react";
 import {shallow} from "enzyme";
-import {TableRow} from "./TableRow";
+import {TableRow, PaddingRow} from "./TableRow";
 
 import {COLUMNS} from "./sharedTestUtils";
 require("../../testUtil").configureEnzyme();
@@ -17,6 +17,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
         connectionProportion={0.5}
         score={133.7}
         children={<div data-test-children={true} />}
+        showPadding={false}
       />
     );
   }
@@ -26,6 +27,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
         <TableRow
           depth={depth}
           indent={1}
+          showPadding={false}
           description={<span data-test-description={true} />}
           connectionProportion={0.5}
           score={133.7}
@@ -43,6 +45,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
         <TableRow
           depth={3}
           indent={indent}
+          showPadding={false}
           description={<span data-test-description={true} />}
           connectionProportion={0.5}
           score={133.7}
@@ -116,4 +119,64 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
       .at(index);
     expect(td.find({"data-test-description": true})).toHaveLength(1);
   });
+  it("doesn't create extra padding rows if showPadding=false", () => {
+    const el = example();
+    expect(el.find("tr")).toHaveLength(1);
+  });
+  describe("can add padding rows above and below the row", () => {
+    function paddingExample() {
+      return shallow(
+        <TableRow
+          depth={2}
+          indent={1}
+          description={<span data-test-description={true} />}
+          connectionProportion={0.5}
+          score={133.7}
+          children={<div data-test-children={true} />}
+          showPadding={true}
+        />
+      );
+    }
+    it("has two identical padding rows", () => {
+      const paddingRows = paddingExample().find(PaddingRow);
+      expect(paddingRows).toHaveLength(2);
+      expect(paddingRows.at(0)).toEqual(paddingRows.at(1));
+    });
+    it("padding rows are first and last children", () => {
+      const children = paddingExample().children();
+      expect(children.first().is(PaddingRow)).toBe(true);
+      expect(children.last().is(PaddingRow)).toBe(true);
+    });
+    it("padding rows are first and last children after expansion", () => {
+      const el = paddingExample();
+      el.setState({expanded: true});
+      const children = el.children();
+      expect(children.first().is(PaddingRow)).toBe(true);
+      expect(children.last().is(PaddingRow)).toBe(true);
+    });
+    it("padding rows have the right number of tds", () => {
+      const el = paddingExample();
+      const paddingRow = shallow(
+        <PaddingRow backgroundColor="rgba(0,0,0,0)" />
+      );
+      expect(paddingRow.find("td")).toHaveLength(el.find("td").length);
+    });
+    it("padding rows were passed the right color", () => {
+      const el = paddingExample();
+      const pr = el.find(PaddingRow).at(0);
+      const tr = el.find("tr");
+      expect(pr.props().backgroundColor).toEqual(
+        tr.props().style.backgroundColor
+      );
+    });
+    it("padding rows properly set the background color", () => {
+      const bgColor = "rgba(3, 13, 37, 0.1337)";
+      const pr = shallow(<PaddingRow backgroundColor={bgColor} />);
+      expect(pr.find("tr").props().style.backgroundColor).toEqual(bgColor);
+    });
+    it("padding rows set height > 0", () => {
+      const pr = shallow(<PaddingRow backgroundColor="rgba(0, 0, 0, 0)" />);
+      expect(pr.find("tr").props().style.height).toBeGreaterThan(0);
+    });
+  });
 });