Refactor make bucket and upload components (#5521)

browser/app/js/buckets/MakeBucketModal.js

@@ -0,0 +1,90 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Modal, ModalBody } from "react-bootstrap"
+import * as actionsBuckets from "./actions"
+
+export class MakeBucketModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      bucketName: ""
+    }
+  }
+  onSubmit(e) {
+    e.preventDefault()
+    const { makeBucket } = this.props
+    const bucket = this.state.bucketName
+    if (bucket) {
+      makeBucket(bucket)
+      this.hideModal()
+    }
+  }
+  hideModal() {
+    this.setState({
+      bucketName: ""
+    })
+    this.props.hideMakeBucketModal()
+  }
+  render() {
+    const { showMakeBucketModal } = this.props
+    return (
+      <Modal
+        className="modal-create-bucket"
+        bsSize="small"
+        animation={false}
+        show={showMakeBucketModal}
+        onHide={this.hideModal.bind(this)}
+      >
+        <button className="close close-alt" onClick={this.hideModal.bind(this)}>
+          <span>×</span>
+        </button>
+        <ModalBody>
+          <form onSubmit={this.onSubmit.bind(this)}>
+            <div className="input-group">
+              <input
+                className="ig-text"
+                type="text"
+                placeholder="Bucket Name"
+                value={this.state.bucketName}
+                onChange={e => this.setState({ bucketName: e.target.value })}
+                autoFocus
+              />
+              <i className="ig-helpers" />
+            </div>
+          </form>
+        </ModalBody>
+      </Modal>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    showMakeBucketModal: state.buckets.showMakeBucketModal
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
+    hideMakeBucketModal: () => dispatch(actionsBuckets.hideMakeBucketModal())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MakeBucketModal)

browser/app/js/buckets/__tests__/MakeBucketModal.test.js

@@ -0,0 +1,80 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { MakeBucketModal } from "../MakeBucketModal"
+
+describe("MakeBucketModal", () => {
+  it("should render without crashing", () => {
+    shallow(<MakeBucketModal />)
+  })
+
+  it("should call hideMakeBucketModal when close button is clicked", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+  })
+
+  it("bucketName should be cleared before hiding the modal", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    expect(wrapper.state("bucketName")).toBe("test")
+    wrapper.find("button").simulate("click")
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+
+  it("should call makeBucket when the form is submitted", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(makeBucket).toHaveBeenCalledWith("test")
+  })
+
+  it("should call hideMakeBucketModal and clear bucketName after the form is submited", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+})

browser/app/js/buckets/__tests__/actions.test.js

@@ -17,13 +17,21 @@
 import configureStore from "redux-mock-store"
 import thunk from "redux-thunk"
 import * as actionsBuckets from "../actions"
+import * as objectActions from "../../objects/actions"
 
 jest.mock("../../web", () => ({
   ListBuckets: jest.fn(() => {
     return Promise.resolve({ buckets: [{ name: "test1" }, { name: "test2" }] })
+  }),
+  MakeBucket: jest.fn(() => {
+    return Promise.resolve()
   })
 }))
 
+jest.mock("../../objects/actions", () => ({
+  selectPrefix: () => dispatch => {}
+}))
+
 const middlewares = [thunk]
 const mockStore = configureStore(middlewares)
 
@@ -40,24 +48,6 @@ describe("Buckets actions", () => {
     })
   })
 
-  it("creates buckets/SET_LIST directly", () => {
-    const store = mockStore()
-    const expectedActions = [
-      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] }
-    ]
-    store.dispatch(actionsBuckets.setList(["test1", "test2"]))
-    const actions = store.getActions()
-    expect(actions).toEqual(expectedActions)
-  })
-
-  it("creates buckets/SET_FILTER directly", () => {
-    const store = mockStore()
-    const expectedActions = [{ type: "buckets/SET_FILTER", filter: "test" }]
-    store.dispatch(actionsBuckets.setFilter("test"))
-    const actions = store.getActions()
-    expect(actions).toEqual(expectedActions)
-  })
-
   it("should update browser url and creates buckets/SET_CURRENT_BUCKET action when selectBucket is called", () => {
     const store = mockStore()
     const expectedActions = [
@@ -68,4 +58,44 @@ describe("Buckets actions", () => {
     expect(actions).toEqual(expectedActions)
     expect(window.location.pathname).toBe("/test1")
   })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for showMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: true }
+    ]
+    store.dispatch(actionsBuckets.showMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for hideMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: false }
+    ]
+    store.dispatch(actionsBuckets.hideMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD action", () => {
+    const store = mockStore()
+    const expectedActions = [{ type: "buckets/ADD", bucket: "test" }]
+    store.dispatch(actionsBuckets.addBucket("test"))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD and buckets/SET_CURRENT_BUCKET after creating the bucket", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/ADD", bucket: "test1" },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    return store.dispatch(actionsBuckets.makeBucket("test1")).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
 })

browser/app/js/buckets/__tests__/reducer.test.js

@@ -23,7 +23,8 @@ describe("buckets reducer", () => {
     expect(initialState).toEqual({
       list: [],
       filter: "",
-      currentBucket: ""
+      currentBucket: "",
+      showMakeBucketModal: false
     })
   })
 
@@ -35,6 +36,17 @@ describe("buckets reducer", () => {
     expect(newState.list).toEqual(["bk1", "bk2"])
   })
 
+  it("should handle ADD", () => {
+    const newState = reducer(
+      { list: ["test1", "test2"] },
+      {
+        type: actions.ADD,
+        bucket: "test3"
+      }
+    )
+    expect(newState.list).toEqual(["test3", "test1", "test2"])
+  })
+
   it("should handle SET_FILTER", () => {
     const newState = reducer(undefined, {
       type: actions.SET_FILTER,
@@ -50,4 +62,12 @@ describe("buckets reducer", () => {
     })
     expect(newState.currentBucket).toEqual("test")
   })
+
+  it("should handle SHOW_MAKE_BUCKET_MODAL", () => {
+    const newState = reducer(undefined, {
+      type: actions.SHOW_MAKE_BUCKET_MODAL,
+      show: true
+    })
+    expect(newState.showMakeBucketModal).toBeTruthy()
+  })
 })

browser/app/js/buckets/actions.js

@@ -16,10 +16,14 @@
 
 import web from "../web"
 import history from "../history"
+import * as alertActions from "../alert/actions"
+import * as objectsActions from "../objects/actions"
 
 export const SET_LIST = "buckets/SET_LIST"
+export const ADD = "buckets/ADD"
 export const SET_FILTER = "buckets/SET_FILTER"
 export const SET_CURRENT_BUCKET = "buckets/SET_CURRENT_BUCKET"
+export const SHOW_MAKE_BUCKET_MODAL = "buckets/SHOW_MAKE_BUCKET_MODAL"
 
 export const fetchBuckets = () => {
   return function(dispatch) {
@@ -50,6 +54,7 @@ export const setFilter = filter => {
 export const selectBucket = bucket => {
   return function(dispatch) {
     dispatch(setCurrentBucket(bucket))
+    dispatch(objectsActions.selectPrefix(""))
     history.push(`/${bucket}`)
   }
 }
@@ -60,3 +65,39 @@ export const setCurrentBucket = bucket => {
     bucket
   }
 }
+
+export const makeBucket = bucket => {
+  return function(dispatch) {
+    return web
+      .MakeBucket({
+        bucketName: bucket
+      })
+      .then(() => {
+        dispatch(addBucket(bucket))
+        dispatch(selectBucket(bucket))
+      })
+      .catch(err =>
+        dispatch(
+          alertActions.set({
+            type: "danger",
+            message: err.message
+          })
+        )
+      )
+  }
+}
+
+export const addBucket = bucket => ({
+  type: ADD,
+  bucket
+})
+
+export const showMakeBucketModal = () => ({
+  type: SHOW_MAKE_BUCKET_MODAL,
+  show: true
+})
+
+export const hideMakeBucketModal = () => ({
+  type: SHOW_MAKE_BUCKET_MODAL,
+  show: false
+})

browser/app/js/buckets/reducer.js

@@ -17,7 +17,12 @@
 import * as actionsBuckets from "./actions"
 
 export default (
-  state = { list: [], filter: "", currentBucket: "" },
+  state = {
+    list: [],
+    filter: "",
+    currentBucket: "",
+    showMakeBucketModal: false
+  },
   action
 ) => {
   switch (action.type) {
@@ -26,6 +31,11 @@ export default (
         ...state,
         list: action.buckets
       }
+    case actionsBuckets.ADD:
+      return {
+        ...state,
+        list: [action.bucket, ...state.list]
+      }
     case actionsBuckets.SET_FILTER:
       return {
         ...state,
@@ -36,6 +46,11 @@ export default (
         ...state,
         currentBucket: action.bucket
       }
+    case actionsBuckets.SHOW_MAKE_BUCKET_MODAL:
+      return {
+        ...state,
+        showMakeBucketModal: action.show
+      }
     default:
       return state
   }