Fix regression issue where users couldn't click into folders (#6029)

This commit fixes the issue introduced in #6023

The clicks on folder names direct the users inside the folders; while
the clicks on file names don't download the files, and will open file
previews on a separate modal in the future. Additionally, when a file
has been selected using the checkbox, it can now be downloaded without
being inside a zip file.

Fixes #6026

browser/app/js/objects/ObjectItem.js

@@ -15,7 +15,6 @@
  */
 
 import React from "react"
-import classNames from "classnames"
 import { connect } from "react-redux"
 import humanize from "humanize"
 import Moment from "moment"
@@ -35,22 +34,19 @@ export const ObjectItem = ({
   onClick
 }) => {
   return (
-    <div 
-      className={
-        "fesl-row " + 
-        classNames({
-          "fesl-row-selected": checked
-        })
-      }
-      data-type={getDataType(name, contentType)}
-    >
+    <div className={"fesl-row"} data-type={getDataType(name, contentType)}>
       <div className="fesl-item fesl-item-icon">
         <div className="fi-select">
           <input
             type="checkbox"
             name={name}
+            checked={checked}
+            onChange={() => {
+              checked ? uncheckObject(name) : checkObject(name)
+            }}
           />
           <i className="fis-icon" />
+          <i className="fis-helper" />
         </div>
       </div>
       <div className="fesl-item fesl-item-name">
@@ -58,7 +54,9 @@ export const ObjectItem = ({
           href="#"
           onClick={e => {
             e.preventDefault()
-            checked ? uncheckObject(name) : checkObject(name)
+            if (onClick) {
+              onClick()
+            }
           }}
         >
           {name}

browser/app/js/objects/ObjectsBulkActions.js

@@ -29,10 +29,10 @@ export class ObjectsBulkActions extends React.Component {
     }
   }
   handleDownload() {
-    const { checkedObjects, resetCheckedList, downloadChecked, downloadObject } = this.props
-    if (checkedObjects.length === 1) {
+    const { checkedObjects, clearChecked, downloadChecked, downloadObject } = this.props
+    if (checkedObjects.length === 1 && !checkedObjects[0].endsWith('/')) {
       downloadObject(checkedObjects[0])
-      resetCheckedList()
+      clearChecked()
     } else {
       downloadChecked()
     }
@@ -59,17 +59,16 @@ export class ObjectsBulkActions extends React.Component {
         }
       >
         <span className="la-label">
-          <i className="fa fa-check-circle" /> {checkedObjects.length} 
+          <i className="fa fa-check-circle" /> {checkedObjects.length}
           {checkedObjects.length === 1 ? " Object " : " Objects "}
           selected
         </span>
         <span className="la-actions pull-right">
-          <button 
-            id="download-checked" 
-            onClick={this.handleDownload.bind(this)}
-          >
+          <button id="download-checked" onClick={this.handleDownload.bind(this)}>
             {" "}
-            Download {checkedObjects.length === 1 ? "object" : "all as zip"}{" "}
+            Download
+            {(checkedObjects.length === 1 && !checkedObjects[0].endsWith('/')) ? 
+            " object" : " all as zip" }{" "}
           </button>
         </span>
         <span className="la-actions pull-right">
@@ -105,6 +104,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    downloadObject: object => dispatch(actions.downloadObject(object)),
     downloadChecked: () => dispatch(actions.downloadCheckedObjects()),
     downloadObject: object => dispatch(actions.downloadObject(object)),
     resetCheckedList: () => dispatch(actions.resetCheckedList()),

browser/app/js/objects/__tests__/ObjectItem.test.js

@@ -28,22 +28,40 @@ describe("ObjectItem", () => {
     expect(wrapper.prop("data-type")).toBe("image")
   })
 
-  it("should call checkObject when the object is selected", () => {
-    const checkObject = jest.fn()
-    const wrapper = shallow(<ObjectItem name={"test"} checked={false} checkObject={checkObject} />)
+  it("shouldn't call onClick when the object isclicked", () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<ObjectItem name={"test"} />)
     wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it("should call onClick when the folder isclicked", () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<ObjectItem name={"test/"} onClick={onClick} />)
+    wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it("should call checkObject when the object/prefix is checked", () => {
+    const checkObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectItem name={"test"} checked={false} checkObject={checkObject} />
+    )
+    wrapper.find("input[type='checkbox']").simulate("change")
     expect(checkObject).toHaveBeenCalledWith("test")
   })
 
-  it("should render highlighted row when object is selected", () => {
+  it("should render checked checkbox", () => {
     const wrapper = shallow(<ObjectItem name={"test"} checked={true} />)
-    expect(wrapper.find(".fesl-row").hasClass("fesl-row-selected")).toBeTruthy()
+    expect(wrapper.find("input[type='checkbox']").prop("checked")).toBeTruthy()
   })
 
-  it("should call uncheckObject when the object is deselected", () => {
+  it("should call uncheckObject when the object/prefix is unchecked", () => {
     const uncheckObject = jest.fn()
-    const wrapper = shallow(<ObjectItem name={"test"} checked={true} uncheckObject={uncheckObject} />)
-    wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    const wrapper = shallow(
+      <ObjectItem name={"test"} checked={true} uncheckObject={uncheckObject} />
+    )
+    wrapper.find("input[type='checkbox']").simulate("change")
     expect(uncheckObject).toHaveBeenCalledWith("test")
   })
 })

browser/app/js/objects/__tests__/ObjectsBulkActions.test.js

@@ -20,7 +20,7 @@ import { ObjectsBulkActions } from "../ObjectsBulkActions"
 
 describe("ObjectsBulkActions", () => {
   it("should render without crashing", () => {
-    shallow(<ObjectsBulkActions checkedObjects={0} />)
+    shallow(<ObjectsBulkActions checkedObjects={[]} />)
   })
 
   it("should show actions when checkObjectsCount is more than 0", () => {
@@ -28,21 +28,33 @@ describe("ObjectsBulkActions", () => {
     expect(wrapper.hasClass("list-actions-toggled")).toBeTruthy()
   })
 
-  it("should call downloadObject for single object when download button is clicked", () => {
+  it("should call downloadObject when single object is selected and download button is clicked", () => {
     const downloadObject = jest.fn()
-    const resetCheckedList = jest.fn()
+    const clearChecked = jest.fn()
     const wrapper = shallow(
       <ObjectsBulkActions
-        checkedObjects={["test1"]}
+        checkedObjects={["test"]}
         downloadObject={downloadObject}
-        resetCheckedList={resetCheckedList}
+        clearChecked={clearChecked}
       />
     )
     wrapper.find("#download-checked").simulate("click")
     expect(downloadObject).toHaveBeenCalled()
   })
 
-  it("should call downloadChecked for multiple objects when download button is clicked", () => {
+  it("should call downloadChecked when a folder is selected and download button is clicked", () => {
+    const downloadChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions
+        checkedObjects={["test/"]}
+        downloadChecked={downloadChecked}
+      />
+    )
+    wrapper.find("#download-checked").simulate("click")
+    expect(downloadChecked).toHaveBeenCalled()
+  })
+
+  it("should call downloadChecked when multiple objects are selected and download button is clicked", () => {
     const downloadChecked = jest.fn()
     const wrapper = shallow(
       <ObjectsBulkActions