Add collapse all and expand all to the tree control (#204)

I have added two icons to the tree control icon area. The first collapses
all the directories in the tree except the root directory and the other
expands all the directories in the tree.

This makes it much easier to find a test file to work on.
I also put the icons on the right side because that is where the
"show failing tests only" icon appears and it seemed that they were
similar types of operations. Then I realized that the collapse / expand
don't make sense when the show failing test only icon is toggled
so in that case I hide the icons.

And then because the icons vanish and appear, I rearranged their
position to what I thought made more sense.
Refresh: is always present and always in a fixed location on the right
The most important button is show only failed so it shows up on the
left as the first in the list when there are failed tests.
Then the collapse/expand
Then the coverage (which I think is the least likely to be used) and
therefore in the "hardest spot to hit"
#203

Co-authored-by: Greg Veres <[email protected]>

ui/sidebar/index.tsx

@@ -20,7 +20,9 @@ import {
   ZapOff,
   StopCircle,
   FileText,
-  Layers
+  Layers,
+  ChevronDown,
+  ChevronRight
 } from "react-feather";
 import Button from "../components/button";
 import { RunnerStatus } from "../../server/api/runner/status";
@@ -73,7 +75,7 @@ interface Props {
   onShowCoverage: () => void;
 }
 
-export default function TestExplorer({
+export default function TestExplorer ({
   selectedFile,
   workspace,
   onSelectedFileChange,
@@ -113,6 +115,19 @@ export default function TestExplorer({
     items
   );
 
+  const onCollapseAll = () => {
+    const newCollapsedItems = {};
+    files.forEach(file => {
+      if (file.type === "directory" && file.parent) {
+        newCollapsedItems[file.path] = true;
+      }
+    });
+    setCollapsedItems(newCollapsedItems)
+  }
+  const onExpandAll = () => {
+    setCollapsedItems({})
+  }
+
   if (showFailedTests && failedItems.length) {
     files = filterFailure(files);
   }
@@ -214,51 +229,73 @@ export default function TestExplorer({
       <FileHeader mt={4} mb={3}>
         <FilesHeader>Tests</FilesHeader>
         <RightFilesAction>
-          <Tooltip title="Refresh files" position="bottom" size="small">
-            <Button
-              size="sm"
-              minimal
-              onClick={() => {
-                onRefreshFiles();
-              }}
-            >
-              <RefreshCw size={10} />
-            </Button>
-          </Tooltip>
-          {summary && summary.haveCoverageReport && (
+          {summary && summary.failedTests && summary.failedTests.length > 0 && (
             <Tooltip
-              title="Show coverage report"
-              position="bottom"
+              title="Show only failed tests"
+              position="top"
               size="small"
             >
               <Button
                 size="sm"
-                minimal={!showCoverage}
+                minimal={!showFailedTests}
                 onClick={() => {
-                  onShowCoverage();
+                  setShowFailedTests(!showFailedTests);
                 }}
               >
-                <Layers size={10} />
+                <ZapOff size={10} />
               </Button>
             </Tooltip>
           )}
-          {summary && summary.failedTests && summary.failedTests.length > 0 && (
+          {!showFailedTests && (
+            <Tooltip title="Collapse All Tests" position="top" size="small">
+              <Button
+                size="sm"
+                minimal
+                onClick={onCollapseAll}
+              >
+                <ChevronRight size={10} />
+              </Button>
+            </Tooltip>
+          )}
+          {!showFailedTests && (
+            <Tooltip title="Expand All Tests" position="top" size="small">
+              <Button
+                size="sm"
+                minimal
+                onClick={onExpandAll}
+              >
+                <ChevronDown size={10} />
+              </Button>
+            </Tooltip>
+          )}
+          {summary && summary.haveCoverageReport && (
             <Tooltip
-              title="Show only failed tests"
-              position="bottom"
+              title="Show coverage report"
+              position="top"
               size="small"
             >
               <Button
                 size="sm"
-                minimal={!showFailedTests}
+                minimal={!showCoverage}
                 onClick={() => {
-                  setShowFailedTests(!showFailedTests);
+                  onShowCoverage();
                 }}
               >
-                <ZapOff size={10} />
+                <Layers size={10} />
               </Button>
             </Tooltip>
           )}
+          <Tooltip title="Refresh files" position="top" size="small">
+            <Button
+              size="sm"
+              minimal
+              onClick={() => {
+                onRefreshFiles();
+              }}
+            >
+              <RefreshCw size={10} />
+            </Button>
+          </Tooltip>
         </RightFilesAction>
       </FileHeader>
       <Tree