Make directory path in the header editable (#8018)

This change will allow users to navigate to their desired locations, including buckets and directories that haven't been "created" yet Fixes #7883 Add tests Change tooltip wording Migrate to Font Awesome 5 to use path icon Fix sidebar not closing on mobile
2025-11-20 18:06:10 -05:00 · 2019-08-12 22:36:19 -07:00
parent bf8ec8ad73
commit a48a034e5a
27 changed files with 368 additions and 135 deletions
--- a/browser/app/js/objects/DeleteObjectConfirmModal.js
+++ b/browser/app/js/objects/DeleteObjectConfirmModal.js
@@ -23,7 +23,7 @@ export const DeleteObjectConfirmModal = ({
 }) => (
  <ConfirmModal
    show={true}
-    icon="fa fa-exclamation-triangle mci-red"
+    icon="fas fa-exclamation-triangle mci-red"
    text="Are you sure you want to delete?"
    sub="This cannot be undone!"
    okText="Delete"
--- a/browser/app/js/objects/ObjectActions.js
+++ b/browser/app/js/objects/ObjectActions.js
@@ -67,14 +67,14 @@ export class ObjectActions extends React.Component {
            className="fiad-action"
            onClick={this.shareObject.bind(this)}
          >
-            <i className="fa fa-share-alt" />
+            <i className="fas fa-share-alt" />
          </a>
          <a
            href=""
            className="fiad-action"
            onClick={this.showDeleteConfirmModal.bind(this)}
          >
-            <i className="fa fa-trash" />
+            <i className="fas fa-trash-alt" />
          </a>
        </Dropdown.Menu>
        {(showShareObjectModal && shareObjectName === object.name) &&
--- a/browser/app/js/objects/ObjectsBulkActions.js
+++ b/browser/app/js/objects/ObjectsBulkActions.js
@@ -59,7 +59,7 @@ export class ObjectsBulkActions extends React.Component {
        }
      >
        <span className="la-label">
-          <i className="fa fa-check-circle" /> {checkedObjects.length}
+          <i className="fas fa-check-circle" /> {checkedObjects.length}
          {checkedObjects.length === 1 ? " Object " : " Objects "}
          selected
        </span>
@@ -81,7 +81,7 @@ export class ObjectsBulkActions extends React.Component {
          </button>
        </span>
        <i
-          className="la-close fa fa-times"
+          className="la-close fas fa-times"
          id="close-bulk-actions"
          onClick={clearChecked}
        />
--- a/browser/app/js/objects/ObjectsHeader.js
+++ b/browser/app/js/objects/ObjectsHeader.js
@@ -47,9 +47,9 @@ export const ObjectsHeader = ({
          className={classNames({
            "fesli-sort": true,
            "fesli-sort--active": sortedByName,
-            fa: true,
-            "fa-sort-alpha-desc": sortedByName && sortOrder === SORT_ORDER_DESC,
-            "fa-sort-alpha-asc": sortedByName && sortOrder === SORT_ORDER_ASC
+            fas: true,
+            "fa-sort-alpha-down-alt": sortedByName && sortOrder === SORT_ORDER_DESC,
+            "fa-sort-alpha-down": sortedByName && sortOrder === SORT_ORDER_ASC
          })}
        />
      </div>
@@ -64,10 +64,10 @@ export const ObjectsHeader = ({
          className={classNames({
            "fesli-sort": true,
            "fesli-sort--active": sortedBySize,
-            fa: true,
-            "fa-sort-amount-desc":
+            fas: true,
+            "fa-sort-amount-down":
              sortedBySize && sortOrder === SORT_ORDER_DESC,
-            "fa-sort-amount-asc": sortedBySize && sortOrder === SORT_ORDER_ASC
+            "fa-sort-amount-down-alt": sortedBySize && sortOrder === SORT_ORDER_ASC
          })}
        />
      </div>
@@ -82,10 +82,10 @@ export const ObjectsHeader = ({
          className={classNames({
            "fesli-sort": true,
            "fesli-sort--active": sortedByLastModified,
-            fa: true,
-            "fa-sort-numeric-desc":
+            fas: true,
+            "fa-sort-numeric-down-alt":
              sortedByLastModified && sortOrder === SORT_ORDER_DESC,
-            "fa-sort-numeric-asc":
+            "fa-sort-numeric-down":
              sortedByLastModified && sortOrder === SORT_ORDER_ASC
          })}
        />
--- a/browser/app/js/objects/Path.js
+++ b/browser/app/js/objects/Path.js
@@ -1,5 +1,5 @@
 /*
- * MinIO Cloud Storage (C) 2016 MinIO, Inc.
+ * MinIO Cloud Storage (C) 2016, 2018, 2019 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -16,46 +16,146 @@

 import React from "react"
 import { connect } from "react-redux"
+import ClickOutHandler from "react-onclickout"
+import { OverlayTrigger, Tooltip } from "react-bootstrap"
 import { getCurrentBucket } from "../buckets/selectors"
 import * as actionsObjects from "./actions"
+import * as actionsBuckets from "../buckets/actions"

-export const Path = ({ currentBucket, currentPrefix, selectPrefix }) => {
-  const onPrefixClick = (e, prefix) => {
-    e.preventDefault()
-    selectPrefix(prefix)
+export class Path extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isEditing: false,
+      path: ""
+    }
  }
-  let dirPath = []
-  let path = ""
-  if (currentPrefix) {
-    path = currentPrefix.split("/").map((dir, i) => {
-      if (dir) {
-        dirPath.push(dir)
-        let dirPath_ = dirPath.join("/") + "/"
-        return (
-          <span key={i}>
-            <a href="" onClick={e => onPrefixClick(e, dirPath_)}>
-              {dir}
-            </a>
-          </span>
-        )
-      }
+  stopEditing() {
+    this.setState({
+      isEditing: false
    })
  }
-
-  return (
-    <h2>
-      <span className="main">
-        <a onClick={e => onPrefixClick(e, "")} href="">
-          {currentBucket}
-        </a>
-      </span>
-      {path}
-    </h2>
-  )
+  onPrefixClick(e, prefix) {
+    e.preventDefault()
+    const { selectPrefix } = this.props
+    selectPrefix(prefix)
+  }
+  onEditClick(e) {
+    e.preventDefault()
+    const { currentBucket, currentPrefix } = this.props
+    this.setState(
+      {
+        isEditing: true,
+        path: `${currentBucket}/${currentPrefix}`
+      },
+      () => {
+        // focus on input and move cursor to the end
+        this.pathInput.focus()
+        this.pathInput.setSelectionRange(
+          this.state.path.length,
+          this.state.path.length
+        )
+      }
+    )
+  }
+  onKeyDown(e) {
+    // When Esc key is pressed
+    if (e.keyCode === 27) {
+      this.stopEditing()
+    }
+  }
+  onInputClickOut() {
+    this.stopEditing()
+  }
+  bucketExists(bucketName) {
+    const { buckets } = this.props
+    return buckets.includes(bucketName)
+  }
+  async onSubmit(e) {
+    e.preventDefault()
+    const { makeBucket, selectBucket } = this.props
+    // all paths need to end in slash to display contents properly
+    let path = this.state.path
+    if (!path.endsWith("/")) {
+      path += "/"
+    }
+    const splittedPath = path.split("/")
+    if (splittedPath.length > 0) {
+      // prevent bucket name from being empty
+      if (splittedPath[0]) {
+        const bucketName = splittedPath[0]
+        const prefix = splittedPath.slice(1).join("/")
+        if (!this.bucketExists(bucketName)) {
+          await makeBucket(bucketName)
+        }
+        // check updated buckets and don't proceed on invalid inputs
+        if (this.bucketExists(bucketName)) {
+          // then select bucket with prefix
+          selectBucket(bucketName, prefix)
+        }
+        this.stopEditing()
+      }
+    }
+  }
+  render() {
+    const pathTooltip = <Tooltip id="tt-path">Choose or create new path</Tooltip>
+    const { currentBucket, currentPrefix } = this.props
+    let dirPath = []
+    let path = ""
+    if (currentPrefix) {
+      path = currentPrefix.split("/").map((dir, i) => {
+        if (dir) {
+          dirPath.push(dir)
+          let dirPath_ = dirPath.join("/") + "/"
+          return (
+            <span key={i}>
+              <a href="" onClick={e => this.onPrefixClick(e, dirPath_)}>
+                {dir}
+              </a>
+            </span>
+          )
+        }
+      })
+    }
+    return (
+      <h2>
+        {this.state.isEditing ? (
+          <ClickOutHandler onClickOut={() => this.onInputClickOut()}>
+            <form onSubmit={e => this.onSubmit(e)}>
+              <input
+                className="form-control form-control--path"
+                type="text"
+                placeholder="Choose or create new path"
+                ref={node => (this.pathInput = node)}
+                onKeyDown={e => this.onKeyDown(e)}
+                value={this.state.path}
+                onChange={e => this.setState({ path: e.target.value })}
+              />
+            </form>
+          </ClickOutHandler>
+        ) : (
+          <React.Fragment>
+            <span className="main">
+              <a href="" onClick={e => this.onPrefixClick(e, "")}>
+                {currentBucket}
+              </a>
+            </span>
+            {path}
+            <OverlayTrigger placement="bottom" overlay={pathTooltip}>
+              <a href="" onClick={e => this.onEditClick(e)} className="fe-edit">
+                <i className="fas fa-folder-plus" />
+              </a>
+            </OverlayTrigger>
+          </React.Fragment>
+        )}
+      </h2>
+    )
+  }
 }

 const mapStateToProps = state => {
  return {
+    buckets: state.buckets.list,
    currentBucket: getCurrentBucket(state),
    currentPrefix: state.objects.currentPrefix
  }
@@ -63,8 +163,14 @@ const mapStateToProps = state => {

 const mapDispatchToProps = dispatch => {
  return {
+    makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
+    selectBucket: (bucket, prefix) =>
+      dispatch(actionsBuckets.selectBucket(bucket, prefix)),
    selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix))
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(Path)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Path)
--- a/browser/app/js/objects/tests/ObjectsHeader.test.js
+++ b/browser/app/js/objects/tests/ObjectsHeader.test.js
@@ -35,7 +35,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-down")
    ).toBeTruthy()
  })

@@ -49,7 +49,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-down-alt")
    ).toBeTruthy()
  })

@@ -63,7 +63,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-down-alt")
    ).toBeTruthy()
  })

@@ -77,7 +77,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc")
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-down")
    ).toBeTruthy()
  })

@@ -91,7 +91,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-down")
    ).toBeTruthy()
  })

@@ -105,7 +105,7 @@ describe("ObjectsHeader", () => {
      />
    )
    expect(
-      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc")
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-down-alt")
    ).toBeTruthy()
  })

--- a/browser/app/js/objects/tests/Path.test.js
+++ b/browser/app/js/objects/tests/Path.test.js
@@ -15,7 +15,7 @@
 */

 import React from "react"
-import { shallow } from "enzyme"
+import { shallow, mount } from "enzyme"
 import { Path } from "../Path"

 describe("Path", () => {
@@ -26,7 +26,12 @@ describe("Path", () => {
  it("should render only bucket if there is no prefix", () => {
    const wrapper = shallow(<Path currentBucket={"test1"} currentPrefix={""} />)
    expect(wrapper.find("span").length).toBe(1)
-    expect(wrapper.text()).toBe("test1")
+    expect(
+      wrapper
+        .find("span")
+        .at(0)
+        .text()
+    ).toBe("test1")
  })

  it("should render bucket and prefix", () => {
@@ -69,4 +74,70 @@ describe("Path", () => {
      .simulate("click", { preventDefault: jest.fn() })
    expect(selectPrefix).toHaveBeenCalledWith("a/b/")
  })
+
+  it("should switch to input mode when edit icon is clicked", () => {
+    const wrapper = mount(<Path currentBucket={"test1"} currentPrefix={""} />)
+    wrapper.find(".fe-edit").simulate("click", { preventDefault: jest.fn() })
+    expect(wrapper.find(".form-control--path").exists()).toBeTruthy()
+  })
+
+  it("should navigate to prefix when user types path for existing bucket", () => {
+    const selectBucket = jest.fn()
+    const buckets = ["test1", "test2"]
+    const wrapper = mount(
+      <Path
+        buckets={buckets}
+        currentBucket={"test1"}
+        currentPrefix={""}
+        selectBucket={selectBucket}
+      />
+    )
+    wrapper.setState({
+      isEditing: true,
+      path: "test2/dir1/"
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(selectBucket).toHaveBeenCalledWith("test2", "dir1/")
+  })
+
+  it("should create a new bucket if bucket typed in path doesn't exist", () => {
+    const makeBucket = jest.fn()
+    const buckets = ["test1", "test2"]
+    const wrapper = mount(
+      <Path
+        buckets={buckets}
+        currentBucket={"test1"}
+        currentPrefix={""}
+        makeBucket={makeBucket}
+      />
+    )
+    wrapper.setState({
+      isEditing: true,
+      path: "test3/dir1/"
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(makeBucket).toHaveBeenCalledWith("test3")
+  })
+
+  it("should not make or select bucket if path doesn't point to bucket", () => {
+    const makeBucket = jest.fn()
+    const selectBucket = jest.fn()
+    const buckets = ["test1", "test2"]
+    const wrapper = mount(
+      <Path
+        buckets={buckets}
+        currentBucket={"test1"}
+        currentPrefix={""}
+        makeBucket={makeBucket}
+        selectBucket={selectBucket}
+      />
+    )
+    wrapper.setState({
+      isEditing: true,
+      path: "//dir1/dir2/"
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(makeBucket).not.toHaveBeenCalled()
+    expect(selectBucket).not.toHaveBeenCalled()
+  })
 })