desktop-gui: Add toggle buttons to root specs to expand/collaps… (#6541)

* desktop-gui: add toggle buttons to expand/collapse all sub folders. #6282

* lint code changes

* hide collapse/expand buttons when root spec has no folders

* fix indentation

* fix lint issue and refactor a bit

* Move collapse/expand links to right side of folder header

Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com>
Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>

packages/desktop-gui/cypress/integration/specs_list_spec.js

@@ -279,6 +279,87 @@ describe('Specs List', function () {
       })
     })
 
+    context('expand/collapse root specs', function () {
+      describe('with folders', function () {
+        beforeEach(function () {
+          this.ipc.getSpecs.yields(null, this.specs)
+
+          this.openProject.resolve(this.config)
+        })
+
+        it('collapsing root spec will keep root itself expanded', function () {
+          cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+          cy.get('.folder.folder-collapsed').should('have.length', 3)
+          cy.get('.folder.folder-expanded').should('have.length', 2)
+        })
+
+        it('collapses all children folders', function () {
+          cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+
+          const lastCollapsedFolderSelector = '.folder-collapsed:last .folder-name'
+          const rootSpecCollapsedFoldersSelector = '.folder-collapsed'
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 2)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 2)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 1)
+
+          cy.get(lastCollapsedFolderSelector).click()
+          cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 0)
+        })
+
+        it('expand all expands all sub folders', function () {
+          cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+          cy.get('.folder-expanded').should('have.length', 2)
+          cy.get('.folder-collapsed').should('have.length', 3)
+
+          cy.get('.level-0 .folder-name').find('a:last').click({ multiple: true })
+          cy.get('.folder-expanded').should('have.length', 10)
+          cy.get('.folder-collapsed').should('have.length', 0)
+        })
+      })
+
+      describe('without folders', function () {
+        beforeEach(function () {
+          this.ipc.getSpecs.yields(null, {
+            integration: [
+              {
+                name: 'app_spec.coffee',
+                relative: 'app_spec.coffee',
+              },
+              {
+                name: 'account_new_spec.coffee',
+                relative: 'account_new_spec.coffee',
+              },
+            ],
+            unit: [],
+          })
+
+          this.openProject.resolve(this.config)
+        })
+
+        it('hides expand/collapse buttons when there are no folders', function () {
+          cy.get('.level-0 .folder-name a').should('not.exist')
+        })
+      })
+    })
+
     context('filtering specs', function () {
       it('scrolls the specs and not the filter', function () {
         this.ipc.getSpecs.yields(null, this.specs)

packages/desktop-gui/src/specs/folder-model.js

@@ -1,11 +1,13 @@
 import { action, computed, observable } from 'mobx'
 
-export default class Directory {
+export default class Folder {
   @observable path
   @observable displayName
   @observable isExpanded = true
   @observable children = []
 
+  isFolder = true
+
   constructor ({ path, displayName }) {
     this.path = path
     this.displayName = displayName

packages/desktop-gui/src/specs/specs-list.jsx

@@ -117,10 +117,18 @@ class SpecsList extends Component {
     return projectsApi.runSpec(project, spec, project.chosenBrowser)
   }
 
+  _setExpandRootFolder (specFolderPath, isExpanded, e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    specsStore.setExpandSpecChildren(specFolderPath, isExpanded)
+    specsStore.setExpandSpecFolder(specFolderPath, true)
+  }
+
   _selectSpecFolder (specFolderPath, e) {
     e.preventDefault()
 
-    specsStore.setExpandSpecFolder(specFolderPath)
+    specsStore.toggleExpandSpecFolder(specFolderPath)
   }
 
   _folderContent (spec, nestingLevel) {
@@ -132,7 +140,20 @@ class SpecsList extends Component {
           <div className="folder-name" onClick={this._selectSpecFolder.bind(this, spec)}>
             <i className={`folder-collapse-icon fas fa-fw ${isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}></i>
             <i className={`far fa-fw ${isExpanded ? 'fa-folder-open' : 'fa-folder'}`}></i>
-            {nestingLevel === 0 ? `${spec.displayName} tests` : spec.displayName}
+            {
+              nestingLevel === 0 ?
+                <>
+                  {spec.displayName} tests
+                  {specsStore.specHasFolders(spec) ?
+                    <span>
+                      <a onClick={this._setExpandRootFolder.bind(this, spec, false)}>collapse all</a>{' | '}
+                      <a onClick={this._setExpandRootFolder.bind(this, spec, true)}>expand all</a>
+                    </span> :
+                    null
+                  }
+                </> :
+                spec.displayName
+            }
           </div>
           {
             isExpanded ?

packages/desktop-gui/src/specs/specs-store.js

@@ -58,10 +58,22 @@ export class SpecsStore {
     this.chosenSpecPath = relativePath
   }
 
-  @action setExpandSpecFolder (spec) {
+  @action setExpandSpecFolder (spec, isExpanded) {
+    spec.setExpanded(isExpanded)
+  }
+
+  @action toggleExpandSpecFolder (spec) {
     spec.setExpanded(!spec.isExpanded)
   }
 
+  @action setExpandSpecChildren (spec, isExpanded) {
+    this._depthFirstIterateSpecs(spec, (specOrFolder) => {
+      if (specOrFolder.isFolder) {
+        specOrFolder.setExpanded(isExpanded)
+      }
+    })
+  }
+
   @action setFilter (project, filter = null) {
     if (!filter) return this.clearFilter(project)
 
@@ -86,6 +98,14 @@ export class SpecsStore {
     return `specsFilter-${id}-${shortenedPath}`
   }
 
+  specHasFolders (specOrFolder) {
+    if (!specOrFolder.isFolder) {
+      return false
+    }
+
+    return specOrFolder.children.some((child) => child.isFolder)
+  }
+
   _tree (files) {
     if (this.filter) {
       files = _.filter(files, (spec) => {
@@ -125,6 +145,15 @@ export class SpecsStore {
 
     return tree
   }
+
+  _depthFirstIterateSpecs (root, func) {
+    _.each(root.children, (child) => {
+      func(child)
+      if (child.isFolder) {
+        this._depthFirstIterateSpecs(child, func)
+      }
+    })
+  }
 }
 
 export default new SpecsStore()

packages/desktop-gui/src/specs/specs.scss

@@ -144,7 +144,7 @@ $max-nesting-level: 14;
 
     &.level-0 {
       >div>.folder-name {
-        padding: 5px 20px;
+        padding: 5px 10px 5px 20px;
         background-color: #F9F9F9;
         font-weight: normal;
         text-transform: uppercase;
@@ -153,11 +153,19 @@ $max-nesting-level: 14;
         color: #777;
         line-height: 18px;
         font-family: $font-sans;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
         i {
           display: none;
           margin-right: 5px;
         }
+
+        span {
+          font-size: 10px;
+          margin-left: 10px;
+        }
       }
     }
   }