Issue #69 - Allow folding & unfolding of files in the diff view

package.json

@@ -30,6 +30,7 @@
     "form-serialize": "^0.7.2",
     "localforage": ">=1.0",
     "lodash": "^4.17.4",
+    "mdi-react": "^3.3.0",
     "parse-diff": "^0.4.2",
     "prop-types": "^15.6.0",
     "query-string": "^5.0.1",

src/components/diffFile.jsx

@@ -1,31 +1,65 @@
+import { Component } from 'react';
 import { Link } from 'react-router-dom';
+import MenuRightIcon from 'mdi-react/MenuRightIcon';
+import MenuDownIcon from 'mdi-react/MenuDownIcon';
 import DiffBlock from './diffBlock';
 
 /* A DiffLine contains all diff changes for a specific file */
-const DiffFile = ({
-  buildRev, diffBlock, fileCoverageDiffs, path,
-}) => (
-  <div className="diff-file">
-    <div className="file-summary">
-      <div className="file-path">
-        <Link
-          className="diff-viewer-link"
-          to={`/file?revision=${buildRev}&path=${path}`}
-          href={`/file?revision=${buildRev}&path=${path}`}
+class DiffFile extends Component {
+  state = {
+    hiddenBlocks: false,
+  }
+
+  componentDidMount() {
+    // Collapse by default files which don't have any coverage information
+    if (!this.state.hiddenBlocks && !this.props.fileCoverageDiffs) {
+      // eslint-disable-next-line react/no-did-mount-set-state
+      this.setState({ hiddenBlocks: true });
+    }
+  }
+
+  onClickHideOrShow() {
+    this.setState({ hiddenBlocks: !this.state.hiddenBlocks });
+  }
+
+  render() {
+    const { hiddenBlocks } = this.state;
+    const { buildRev, diffBlock, fileCoverageDiffs, path } = this.props;
+
+    return (
+      <div className="diff-file">
+        <div
+          className="file-summary"
+          onClick={() => this.onClickHideOrShow()}
+          role="button"
+          tabIndex={0}
         >
-          {path}
-        </Link>
+          <div className="file-path">
+            {hiddenBlocks ? (
+              <MenuRightIcon />
+            ) : (
+              <MenuDownIcon />
+            )}
+            <Link
+              className="diff-viewer-link"
+              to={`/file?revision=${buildRev}&path=${path}`}
+              href={`/file?revision=${buildRev}&path=${path}`}
+            >
+              {path}
+            </Link>
+          </div>
+        </div>
+        {!hiddenBlocks && diffBlock.chunks.map(block => (
+          <DiffBlock
+            block={block}
+            filePath={path}
+            fileDiffs={fileCoverageDiffs}
+            key={block.content}
+          />
+        ))}
       </div>
-    </div>
-    {diffBlock.chunks.map(block => (
-      <DiffBlock
-        block={block}
-        filePath={path}
-        fileDiffs={fileCoverageDiffs}
-        key={block.content}
-      />
-    ))}
-  </div>
-);
+    );
+  }
+}
 
 export default DiffFile;

src/style.css

@@ -20,6 +20,9 @@ a {
 	color: white;
 	font-weight: bold;
 }
+.file-path .mdi-icon {
+	fill: white;
+}
 .file-summary {
 	background-color: black;
 	padding: 0.8em;
@@ -150,6 +153,10 @@ tr.changeset td{
 .loading {
 	text-align: center;
 }
+.mdi-icon {
+	height: 1em;
+	vertical-align: middle;
+}
 
 /* Changesets */
 .hidden-changeset {

yarn.lock

@@ -6024,6 +6024,10 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+mdi-react@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/mdi-react/-/mdi-react-3.3.0.tgz#65bcf00fb05e7b2792f39981689e460e3db8a493"
+
 mdn-data@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.0.tgz#a7056319da95a2d0881267d7263075042eb061e2"