From 080edb380d3b2b35fe9584b0d67783b8c2b4fe90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <decentralion@dandelion.io>
Date: Mon, 13 Aug 2018 19:11:19 -0700
Subject: [PATCH] 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
```
---
 .../credExplorer/pagerankTable/Connection.js  |  1 +
 src/app/credExplorer/pagerankTable/Node.js    |  1 +
 .../credExplorer/pagerankTable/TableRow.js    | 25 +++++--
 .../pagerankTable/TableRow.test.js            | 65 ++++++++++++++++++-
 4 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/src/app/credExplorer/pagerankTable/Connection.js b/src/app/credExplorer/pagerankTable/Connection.js
index eb2de89..3a882cd 100644
--- a/src/app/credExplorer/pagerankTable/Connection.js
+++ b/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
diff --git a/src/app/credExplorer/pagerankTable/Node.js b/src/app/credExplorer/pagerankTable/Node.js
index 5d29232..bca5ba2 100644
--- a/src/app/credExplorer/pagerankTable/Node.js
+++ b/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>
diff --git a/src/app/credExplorer/pagerankTable/TableRow.js b/src/app/credExplorer/pagerankTable/TableRow.js
index d7dc59f..764d348 100644
--- a/src/app/credExplorer/pagerankTable/TableRow.js
+++ b/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>
+  );
+}
diff --git a/src/app/credExplorer/pagerankTable/TableRow.test.js b/src/app/credExplorer/pagerankTable/TableRow.test.js
index 7488451..d234042 100644
--- a/src/app/credExplorer/pagerankTable/TableRow.test.js
+++ b/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);
+    });
+  });
 });