MyFavMirrors/minio
1
0
Fork 0
mirror of https://github.com/minio/minio.git synced 2025-11-20 18:06:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Browser: Update UI with new components and elements (#5671)

Browse Source
This commit is contained in:
Rushan
2018-03-21 23:39:23 +05:30
committed by Harshavardhana
parent 384b4fdf28
commit 1459c4be1e
199 changed files with 10549 additions and 4702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/app/js/objects/DeleteObjectConfirmModal.js
View File

@@ -19,11 +19,11 @@ import ConfirmModal from "../browser/ConfirmModal"
export const DeleteObjectConfirmModal = ({
deleteObject,
hideDeleteConfirmModal
hideDeleteConfirmModal,
}) => (
<ConfirmModal
show={true}
icon="fa fa-exclamation-triangle mci-red"
icon="zmdi zmdi-alert-octagon"
text="Are you sure you want to delete?"
sub="This cannot be undone!"
okText="Delete"

107
browser/app/js/objects/ObjectActions.js
View File

@@ -1,107 +0,0 @@
/*
* 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 { Dropdown } from "react-bootstrap"
import ShareObjectModal from "./ShareObjectModal"
import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
import * as objectsActions from "./actions"
import {
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
} from "../constants"
export class ObjectActions extends React.Component {
constructor(props) {
super(props)
this.state = {
showDeleteConfirmation: false
}
}
shareObject(e) {
e.preventDefault()
const { object, shareObject } = this.props
shareObject(
object.name,
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
)
}
deleteObject() {
const { object, deleteObject } = this.props
deleteObject(object.name)
}
showDeleteConfirmModal(e) {
e.preventDefault()
this.setState({ showDeleteConfirmation: true })
}
hideDeleteConfirmModal() {
this.setState({
showDeleteConfirmation: false
})
}
render() {
const { object, showShareObjectModal } = this.props
return (
<Dropdown id={`obj-actions-${object.name}`}>
<Dropdown.Toggle noCaret className="fia-toggle" />
<Dropdown.Menu>
<a
href=""
className="fiad-action"
onClick={this.shareObject.bind(this)}
>
<i className="fa fa-copy" />
</a>
<a
href=""
className="fiad-action"
onClick={this.showDeleteConfirmModal.bind(this)}
>
<i className="fa fa-trash" />
</a>
</Dropdown.Menu>
{showShareObjectModal && <ShareObjectModal object={object} />}
{this.state.showDeleteConfirmation && (
<DeleteObjectConfirmModal
deleteObject={this.deleteObject.bind(this)}
hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
/>
)}
</Dropdown>
)
}
}
const mapStateToProps = (state, ownProps) => {
return {
object: ownProps.object,
showShareObjectModal: state.objects.shareObject.show
}
}
const mapDispatchToProps = dispatch => {
return {
shareObject: (object, days, hours, minutes) =>
dispatch(objectsActions.shareObject(object, days, hours, minutes)),
deleteObject: object => dispatch(objectsActions.deleteObject(object))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ObjectActions)

22
browser/app/js/objects/ObjectContainer.js
View File

@@ -19,37 +19,23 @@ import { connect } from "react-redux"
import humanize from "humanize"
import Moment from "moment"
import ObjectItem from "./ObjectItem"
import ObjectActions from "./ObjectActions"
import * as actionsObjects from "./actions"
import { getCheckedList } from "./selectors"
export const ObjectContainer = ({
object,
checkedObjectsCount,
downloadObject
}) => {
export const ObjectContainer = ({ object, downloadObject }) => {
let props = {
name: object.name,
contentType: object.contentType,
size: humanize.filesize(object.size),
lastModified: Moment(object.lastModified).format("lll")
}
if (checkedObjectsCount == 0) {
props.actionButtons = <ObjectActions object={object} />
lastModified: Moment(object.lastModified).format("lll"),
}
return <ObjectItem {...props} onClick={() => downloadObject(object.name)} />
}
const mapStateToProps = state => {
return {
checkedObjectsCount: getCheckedList(state).length
}
}
const mapDispatchToProps = dispatch => {
return {
downloadObject: object => dispatch(actionsObjects.downloadObject(object))
downloadObject: object => dispatch(actionsObjects.downloadObject(object)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ObjectContainer)
export default connect(undefined, mapDispatchToProps)(ObjectContainer)

36
browser/app/js/objects/ObjectItem.js
View File

@@ -15,9 +15,8 @@
*/
import React from "react"
import classNames from "classnames"
import { connect } from "react-redux"
import humanize from "humanize"
import Moment from "moment"
import { getDataType } from "../mime"
import * as actions from "./actions"
import { getCheckedList } from "./selectors"
@@ -30,13 +29,20 @@ export const ObjectItem = ({
checked,
checkObject,
uncheckObject,
actionButtons,
onClick
onClick,
}) => {
return (
<div className={"fesl-row"} data-type={getDataType(name, contentType)}>
<div className="fesl-item fesl-item-icon">
<div className="fi-select">
<div
className={classNames({
objects__row: true,
"objects__row--directory": getDataType(name, contentType) == "folder",
})}
>
<div
className="objects__column objects__column--select"
data-object-type={getDataType(name, contentType)}
>
<div className="objects__select">
<input
type="checkbox"
name={name}
@@ -45,11 +51,10 @@ export const ObjectItem = ({
checked ? uncheckObject(name) : checkObject(name)
}}
/>
<i className="fis-icon" />
<i className="fis-helper" />
<i />
</div>
</div>
<div className="fesl-item fesl-item-name">
<div className="objects__column objects__column--name">
<a
href="#"
onClick={e => {
@@ -60,23 +65,24 @@ export const ObjectItem = ({
{name}
</a>
</div>
<div className="fesl-item fesl-item-size">{size}</div>
<div className="fesl-item fesl-item-modified">{lastModified}</div>
<div className="fesl-item fesl-item-actions">{actionButtons}</div>
<div className="objects__column objects__column--size">{size}</div>
<div className="objects__column objects__column--date">
{lastModified}
</div>
</div>
)
}
const mapStateToProps = (state, ownProps) => {
return {
checked: getCheckedList(state).indexOf(ownProps.name) >= 0
checked: getCheckedList(state).indexOf(ownProps.name) >= 0,
}
}
const mapDispatchToProps = dispatch => {
return {
checkObject: name => dispatch(actions.checkObject(name)),
uncheckObject: name => dispatch(actions.uncheckObject(name))
uncheckObject: name => dispatch(actions.uncheckObject(name)),
}
}

117
browser/app/js/objects/ObjectsBulkActions.js
View File

@@ -16,16 +16,26 @@
import React from "react"
import { connect } from "react-redux"
import classNames from "classnames"
import * as actions from "./actions"
import { getCheckedList } from "./selectors"
import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
import BrowserDropdown from "../browser/BrowserDropdown"
import SidebarToggle from "../browser/SidebarToggle"
import { minioBrowserPrefix } from "../constants"
import ShareObjectModal from "./ShareObjectModal"
import web from "../web"
import * as objectsActions from "./actions"
import {
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES,
} from "../constants"
export class ObjectsBulkActions extends React.Component {
constructor(props) {
super(props)
this.state = {
showDeleteConfirmation: false
showDeleteConfirmation: false,
}
}
deleteChecked() {
@@ -35,44 +45,72 @@ export class ObjectsBulkActions extends React.Component {
}
hideDeleteConfirmModal() {
this.setState({
showDeleteConfirmation: false
showDeleteConfirmation: false,
})
}
shareObject(e) {
e.preventDefault()
const { checkedObjects, shareObject } = this.props
if (checkedObjects.length != 1) {
return
}
const object = checkedObjects[0]
shareObject(
object,
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES,
)
}
render() {
const { checkedObjectsCount, downloadChecked, clearChecked } = this.props
const {
checkedObjectsCount,
downloadChecked,
object,
showShareObjectModal,
} = this.props
const loggedIn = web.LoggedIn()
return (
<div
className={
"list-actions" +
classNames({
" list-actions-toggled": checkedObjectsCount > 0
})
}
>
<span className="la-label">
<i className="fa fa-check-circle" /> {checkedObjectsCount} Objects
selected
</span>
<span className="la-actions pull-right">
<button id="download-checked" onClick={downloadChecked}>
{" "}
Download all as zip{" "}
</button>
</span>
<span className="la-actions pull-right">
<button
id="delete-checked"
onClick={() => this.setState({ showDeleteConfirmation: true })}
>
{" "}
Delete selected{" "}
</button>
</span>
<i
className="la-close fa fa-times"
id="close-bulk-actions"
onClick={clearChecked}
<div className="toolbar">
<SidebarToggle />
<button
className="toolbar__item zmdi zmdi-delete"
onClick={() =>
this.setState({
showDeleteConfirmation: true,
})
}
disabled={!checkedObjectsCount}
/>
{loggedIn ? (
<button
className="toolbar__item zmdi zmdi-share"
onClick={this.shareObject.bind(this)}
disabled={checkedObjectsCount != 1}
/>
) : (
""
)}
<button
className="toolbar__item zmdi zmdi-download"
onClick={downloadChecked}
disabled={!checkedObjectsCount}
/>
{showShareObjectModal && <ShareObjectModal object={object} />}
<div className="toolbar__end">
{loggedIn ? (
<BrowserDropdown />
) : (
<a
className="toolbar__item toolbar__item--alt btn btn--danger"
href={minioBrowserPrefix + "/login"}
>
Login
</a>
)}
</div>
{this.state.showDeleteConfirmation && (
<DeleteObjectConfirmModal
deleteObject={this.deleteChecked.bind(this)}
@@ -86,7 +124,9 @@ export class ObjectsBulkActions extends React.Component {
const mapStateToProps = state => {
return {
checkedObjectsCount: getCheckedList(state).length
checkedObjects: getCheckedList(state),
checkedObjectsCount: getCheckedList(state).length,
showShareObjectModal: state.objects.shareObject.show,
}
}
@@ -94,7 +134,10 @@ const mapDispatchToProps = dispatch => {
return {
downloadChecked: () => dispatch(actions.downloadCheckedObjects()),
clearChecked: () => dispatch(actions.resetCheckedList()),
deleteChecked: () => dispatch(actions.deleteCheckedObjects())
deleteChecked: () => dispatch(actions.deleteCheckedObjects()),
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar()),
shareObject: (object, days, hours, minutes) =>
dispatch(objectsActions.shareObject(object, days, hours, minutes)),
}
}

108
browser/app/js/objects/ObjectsHeader.js
View File

@@ -23,61 +23,57 @@ export const ObjectsHeader = ({
sortNameOrder,
sortSizeOrder,
sortLastModifiedOrder,
sortObjects
sortObjects,
}) => (
<div className="feb-container">
<header className="fesl-row" data-type="folder">
<div className="fesl-item fesl-item-icon" />
<div
className="fesl-item fesl-item-name"
id="sort-by-name"
onClick={() => sortObjects("name")}
data-sort="name"
>
Name
<i
className={classNames({
"fesli-sort": true,
fa: true,
"fa-sort-alpha-desc": sortNameOrder,
"fa-sort-alpha-asc": !sortNameOrder
})}
/>
</div>
<div
className="fesl-item fesl-item-size"
id="sort-by-size"
onClick={() => sortObjects("size")}
data-sort="size"
>
Size
<i
className={classNames({
"fesli-sort": true,
fa: true,
"fa-sort-amount-desc": sortSizeOrder,
"fa-sort-amount-asc": !sortSizeOrder
})}
/>
</div>
<div
className="fesl-item fesl-item-modified"
id="sort-by-last-modified"
onClick={() => sortObjects("last-modified")}
data-sort="last-modified"
>
Last Modified
<i
className={classNames({
"fesli-sort": true,
fa: true,
"fa-sort-numeric-desc": sortLastModifiedOrder,
"fa-sort-numeric-asc": !sortLastModifiedOrder
})}
/>
</div>
<div className="fesl-item fesl-item-actions" />
</header>
<div className="objects__row objects__header hidden-xs">
<div
className="objects__column objects__column--name"
id="sort-by-name"
onClick={() => sortObjects("name")}
data-sort="name"
>
Name
<i
className={classNames({
objects__sort: true,
zmdi: true,
"zmdi-sort-desc": sortNameOrder,
"zmdi-sort-asc": !sortNameOrder,
})}
/>
</div>
<div
className="objects__column objects__column--size"
id="sort-by-size"
onClick={() => sortObjects("size")}
data-sort="size"
>
Size
<i
className={classNames({
objects__sort: true,
zmdi: true,
"zmdi-sort-amount-desc": sortSizeOrder,
"zmdi-sort-amount-asc": !sortSizeOrder,
})}
/>
</div>
<div
className="objects__column objects__column--date"
id="sort-by-last-modified"
onClick={() => sortObjects("last-modified")}
data-sort="last-modified"
>
Last Modified
<i
className={classNames({
objects__sort: true,
zmdi: true,
"zmdi-sort-amount-desc": sortLastModifiedOrder,
"zmdi-sort-amount-asc": !sortLastModifiedOrder,
})}
/>
</div>
</div>
)
@@ -86,13 +82,13 @@ const mapStateToProps = state => {
sortNameOrder: state.objects.sortBy == "name" && state.objects.sortOrder,
sortSizeOrder: state.objects.sortBy == "size" && state.objects.sortOrder,
sortLastModifiedOrder:
state.objects.sortBy == "last-modified" && state.objects.sortOrder
state.objects.sortBy == "last-modified" && state.objects.sortOrder,
}
}
const mapDispatchToProps = dispatch => {
return {
sortObjects: sortBy => dispatch(actionsObjects.sortObjects(sortBy))
sortObjects: sortBy => dispatch(actionsObjects.sortObjects(sortBy)),
}
}

4
browser/app/js/objects/ObjectsList.js
View File

@@ -18,6 +18,8 @@ import React from "react"
import ObjectContainer from "./ObjectContainer"
import PrefixContainer from "./PrefixContainer"
const Aux = props => props.children
export const ObjectsList = ({ objects }) => {
const list = objects.map(object => {
if (object.name.endsWith("/")) {
@@ -26,7 +28,7 @@ export const ObjectsList = ({ objects }) => {
return <ObjectContainer object={object} key={object.name} />
}
})
return <div>{list}</div>
return <Aux>{list}</Aux>
}
export default ObjectsList

17
browser/app/js/objects/ObjectsListContainer.js
View File

@@ -15,22 +15,25 @@
*/
import React from "react"
import classNames from "classnames"
import { connect } from "react-redux"
import InfiniteScroll from "react-infinite-scroller"
import * as actionsObjects from "./actions"
import ObjectsList from "./ObjectsList"
const Aux = props => props.children
export class ObjectsListContainer extends React.Component {
render() {
const { objects, isTruncated, currentBucket, loadObjects } = this.props
return (
<div className="feb-container">
<Aux>
<InfiniteScroll
pageStart={0}
loadMore={() => loadObjects(true)}
hasMore={isTruncated}
useWindow={true}
useWindow={false}
element="div"
className="objects__lists"
initialLoad={false}
>
<ObjectsList objects={objects} />
@@ -41,7 +44,7 @@ export class ObjectsListContainer extends React.Component {
>
<span>Loading...</span>
</div>
</div>
</Aux>
)
}
}
@@ -51,16 +54,16 @@ const mapStateToProps = state => {
currentBucket: state.buckets.currentBucket,
currentPrefix: state.objects.currentPrefix,
objects: state.objects.list,
isTruncated: state.objects.isTruncated
isTruncated: state.objects.isTruncated,
}
}
const mapDispatchToProps = dispatch => {
return {
loadObjects: append => dispatch(actionsObjects.fetchObjects(append))
loadObjects: append => dispatch(actionsObjects.fetchObjects(append)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(
ObjectsListContainer
ObjectsListContainer,
)

6
browser/app/js/objects/ObjectsSection.js
View File

@@ -18,11 +18,13 @@ import React from "react"
import ObjectsHeader from "./ObjectsHeader"
import ObjectsListContainer from "./ObjectsListContainer"
const Aux = props => props.children
export const ObjectsSection = () => (
<div>
<Aux>
<ObjectsHeader />
<ObjectsListContainer />
</div>
</Aux>
)
export default ObjectsSection

24
browser/app/js/objects/Path.js
View File

@@ -32,38 +32,34 @@ export const Path = ({ currentBucket, currentPrefix, selectPrefix }) => {
dirPath.push(dir)
let dirPath_ = dirPath.join("/") + "/"
return (
<span key={i}>
<a href="" onClick={e => onPrefixClick(e, dirPath_)}>
{dir}
</a>
</span>
<a key={i} href="" onClick={e => onPrefixClick(e, dirPath_)}>
{dir}
</a>
)
}
})
}
return (
<h2>
<span className="main">
<a onClick={e => onPrefixClick(e, "")} href="">
{currentBucket}
</a>
</span>
<nav className="path hidden-xs">
<a onClick={e => onPrefixClick(e, "")} href="">
{currentBucket}
</a>
{path}
</h2>
</nav>
)
}
const mapStateToProps = state => {
return {
currentBucket: getCurrentBucket(state),
currentPrefix: state.objects.currentPrefix
currentPrefix: state.objects.currentPrefix,
}
}
const mapDispatchToProps = dispatch => {
return {
selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix))
selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix)),
}
}

6
browser/app/js/objects/PrefixContainer.js
View File

@@ -23,7 +23,7 @@ export const PrefixContainer = ({ object, currentPrefix, selectPrefix }) => {
const props = {
name: object.name,
contentType: object.contentType,
onClick: () => selectPrefix(`${currentPrefix}${object.name}`)
onClick: () => selectPrefix(`${currentPrefix}${object.name}`),
}
return <ObjectItem {...props} />
@@ -32,13 +32,13 @@ export const PrefixContainer = ({ object, currentPrefix, selectPrefix }) => {
const mapStateToProps = (state, ownProps) => {
return {
object: ownProps.object,
currentPrefix: state.objects.currentPrefix
currentPrefix: state.objects.currentPrefix,
}
}
const mapDispatchToProps = dispatch => {
return {
selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix))
selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix)),
}
}

86
browser/app/js/objects/ShareObjectModal.js
View File

@@ -24,7 +24,7 @@ import * as alertActions from "../alert/actions"
import {
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
SHARE_OBJECT_EXPIRY_MINUTES,
} from "../constants"
export class ShareObjectModal extends React.Component {
@@ -34,15 +34,25 @@ export class ShareObjectModal extends React.Component {
expiry: {
days: SHARE_OBJECT_EXPIRY_DAYS,
hours: SHARE_OBJECT_EXPIRY_HOURS,
minutes: SHARE_OBJECT_EXPIRY_MINUTES
}
minutes: SHARE_OBJECT_EXPIRY_MINUTES,
},
}
this.expiryRange = {
days: { min: 0, max: 7 },
hours: { min: 0, max: 23 },
minutes: { min: 0, max: 59 }
days: {
min: 0,
max: 7,
},
hours: {
min: 0,
max: 23,
},
minutes: {
min: 0,
max: 59,
},
}
}
updateExpireValue(param, inc) {
let expiry = Object.assign({}, this.state.expiry)
@@ -65,17 +75,19 @@ export class ShareObjectModal extends React.Component {
}
this.setState({
expiry
expiry,
})
const { object, shareObject } = this.props
shareObject(object.name, expiry.days, expiry.hours, expiry.minutes)
const { shareObjectDetails: { object }, shareObject } = this.props
shareObject(object, expiry.days, expiry.hours, expiry.minutes)
}
onUrlCopied() {
const { showCopyAlert, hideShareObject } = this.props
showCopyAlert("Link copied to clipboard!")
hideShareObject()
}
render() {
const { shareObjectDetails, shareObject, hideShareObject } = this.props
return (
@@ -85,32 +97,34 @@ export class ShareObjectModal extends React.Component {
onHide={hideShareObject}
bsSize="small"
>
<ModalHeader>Share Object</ModalHeader>
<ModalBody>
<div className="input-group copy-text">
<Modal.Header>Share Object</Modal.Header>
<Modal.Body>
<div className="form-group">
<label>Shareable Link</label>
<input
type="text"
className="form-group__field"
ref={node => (this.copyTextInput = node)}
readOnly="readOnly"
value={window.location.protocol + "//" + shareObjectDetails.url}
onClick={() => this.copyTextInput.select()}
/>
<i className="form-group__helper" />
</div>
<div
className="input-group"
className="form-group"
style={{ display: web.LoggedIn() ? "block" : "none" }}
>
<label>Expires in (Max 7 days)</label>
<div className="set-expire">
<div className="set-expire-item">
<div className="set-expire__item">
<i
id="increase-days"
className="set-expire-increase"
className="set-expire__handle zmdi zmdi-chevron-up"
onClick={() => this.updateExpireValue("days", 1)}
/>
<div className="set-expire-title">Days</div>
<div className="set-expire-value">
<div className="set-expire__title">Days</div>
<div className="set-expire__value">
<input
ref="expireDays"
type="number"
@@ -122,18 +136,18 @@ export class ShareObjectModal extends React.Component {
</div>
<i
id="decrease-days"
className="set-expire-decrease"
className="set-expire__handle zmdi zmdi-chevron-down"
onClick={() => this.updateExpireValue("days", -1)}
/>
</div>
<div className="set-expire-item">
<div className="set-expire__item">
<i
id="increase-hours"
className="set-expire-increase"
className="set-expire__handle zmdi zmdi-chevron-up"
onClick={() => this.updateExpireValue("hours", 1)}
/>
<div className="set-expire-title">Hours</div>
<div className="set-expire-value">
<div className="set-expire__title">Hours</div>
<div className="set-expire__value">
<input
ref="expireHours"
type="number"
@@ -144,19 +158,19 @@ export class ShareObjectModal extends React.Component {
/>
</div>
<i
className="set-expire-decrease"
className="set-expire__handle zmdi zmdi-chevron-down"
id="decrease-hours"
onClick={() => this.updateExpireValue("hours", -1)}
/>
</div>
<div className="set-expire-item">
<div className="set-expire__item">
<i
id="increase-minutes"
className="set-expire-increase"
className="set-expire__handle zmdi zmdi-chevron-up"
onClick={() => this.updateExpireValue("minutes", 1)}
/>
<div className="set-expire-title">Minutes</div>
<div className="set-expire-value">
<div className="set-expire__title">Minutes</div>
<div className="set-expire__value">
<input
ref="expireMins"
type="number"
@@ -168,21 +182,21 @@ export class ShareObjectModal extends React.Component {
</div>
<i
id="decrease-minutes"
className="set-expire-decrease"
className="set-expire__handle zmdi zmdi-chevron-down"
onClick={() => this.updateExpireValue("minutes", -1)}
/>
</div>
</div>
</div>
</ModalBody>
</Modal.Body>
<div className="modal-footer">
<CopyToClipboard
text={window.location.protocol + "//" + shareObjectDetails.url}
onCopy={this.onUrlCopied.bind(this)}
>
<button className="btn btn-success">Copy Link</button>
<button className="btn btn--link">Copy Link</button>
</CopyToClipboard>
<button className="btn btn-link" onClick={hideShareObject}>
<button className="btn btn--link" onClick={hideShareObject}>
Cancel
</button>
</div>
@@ -193,8 +207,7 @@ export class ShareObjectModal extends React.Component {
const mapStateToProps = (state, ownProps) => {
return {
object: ownProps.object,
shareObjectDetails: state.objects.shareObject
shareObjectDetails: state.objects.shareObject,
}
}
@@ -204,7 +217,12 @@ const mapDispatchToProps = dispatch => {
dispatch(objectsActions.shareObject(object, days, hours, minutes)),
hideShareObject: () => dispatch(objectsActions.hideShareObject()),
showCopyAlert: message =>
dispatch(alertActions.set({ type: "success", message: message }))
dispatch(
alertActions.set({
type: "success",
message: message,
}),
),
}
}

4
browser/app/js/objects/__tests__/DeleteObjectConfirmModal.test.js
View File

@@ -26,7 +26,7 @@ describe("DeleteObjectConfirmModal", () => {
it("should call deleteObject when Delete is clicked", () => {
const deleteObject = jest.fn()
const wrapper = shallow(
<DeleteObjectConfirmModal deleteObject={deleteObject} />
<DeleteObjectConfirmModal deleteObject={deleteObject} />,
)
wrapper.find("ConfirmModal").prop("okHandler")()
expect(deleteObject).toHaveBeenCalled()
@@ -37,7 +37,7 @@ describe("DeleteObjectConfirmModal", () => {
const wrapper = shallow(
<DeleteObjectConfirmModal
hideDeleteConfirmModal={hideDeleteConfirmModal}
/>
/>,
)
wrapper.find("ConfirmModal").prop("cancelHandler")()
expect(hideDeleteConfirmModal).toHaveBeenCalled()

95
browser/app/js/objects/__tests__/ObjectActions.test.js
View File

@@ -1,95 +0,0 @@
/*
* 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 } from "enzyme"
import { ObjectActions } from "../ObjectActions"
describe("ObjectActions", () => {
it("should render without crashing", () => {
shallow(<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />)
})
it("should show DeleteObjectConfirmModal when delete action is clicked", () => {
const wrapper = shallow(
<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
expect(wrapper.state("showDeleteConfirmation")).toBeTruthy()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(1)
})
it("should hide DeleteObjectConfirmModal when Cancel button is clicked", () => {
const wrapper = shallow(
<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
wrapper.find("DeleteObjectConfirmModal").prop("hideDeleteConfirmModal")()
wrapper.update()
expect(wrapper.state("showDeleteConfirmation")).toBeFalsy()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(0)
})
it("should call deleteObject with object name", () => {
const deleteObject = jest.fn()
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
deleteObject={deleteObject}
/>
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
wrapper.find("DeleteObjectConfirmModal").prop("deleteObject")()
expect(deleteObject).toHaveBeenCalledWith("obj1")
})
it("should call shareObject with object and expiry", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
shareObject={shareObject}
/>
)
wrapper
.find("a")
.first()
.simulate("click", { preventDefault: jest.fn() })
expect(shareObject).toHaveBeenCalledWith("obj1", 5, 0, 0)
})
it("should render ShareObjectModal when an object is shared", () => {
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
showShareObjectModal={true}
/>
)
expect(wrapper.find("Connect(ShareObjectModal)").length).toBe(1)
})
})

14
browser/app/js/objects/__tests__/ObjectContainer.test.js
View File

@@ -31,19 +31,25 @@ describe("ObjectContainer", () => {
it("should pass actions to ObjectItem", () => {
const wrapper = shallow(
<ObjectContainer object={{ name: "test1.jpg" }} checkedObjectsCount={0} />
<ObjectContainer
object={{ name: "test1.jpg" }}
checkedObjectsCount={0}
/>,
)
expect(wrapper.find("Connect(ObjectItem)").prop("actionButtons")).not.toBe(
undefined
undefined,
)
})
it("should pass empty actions to ObjectItem when checkedObjectCount is more than 0", () => {
const wrapper = shallow(
<ObjectContainer object={{ name: "test1.jpg" }} checkedObjectsCount={1} />
<ObjectContainer
object={{ name: "test1.jpg" }}
checkedObjectsCount={1}
/>,
)
expect(wrapper.find("Connect(ObjectItem)").prop("actionButtons")).toBe(
undefined
undefined,
)
})
})

8
browser/app/js/objects/__tests__/ObjectItem.test.js
View File

@@ -31,14 +31,16 @@ describe("ObjectItem", () => {
it("should call onClick when the object isclicked", () => {
const onClick = jest.fn()
const wrapper = shallow(<ObjectItem name={"test"} onClick={onClick} />)
wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
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} />
<ObjectItem name={"test"} checked={false} checkObject={checkObject} />,
)
wrapper.find("input[type='checkbox']").simulate("change")
expect(checkObject).toHaveBeenCalledWith("test")
@@ -52,7 +54,7 @@ describe("ObjectItem", () => {
it("should call uncheckObject when the object/prefix is unchecked", () => {
const uncheckObject = jest.fn()
const wrapper = shallow(
<ObjectItem name={"test"} checked={true} uncheckObject={uncheckObject} />
<ObjectItem name={"test"} checked={true} uncheckObject={uncheckObject} />,
)
wrapper.find("input[type='checkbox']").simulate("change")
expect(uncheckObject).toHaveBeenCalledWith("test")

9
browser/app/js/objects/__tests__/ObjectsBulkActions.test.js
View File

@@ -34,7 +34,7 @@ describe("ObjectsBulkActions", () => {
<ObjectsBulkActions
checkedObjectsCount={1}
downloadChecked={downloadChecked}
/>
/>,
)
wrapper.find("#download-checked").simulate("click")
expect(downloadChecked).toHaveBeenCalled()
@@ -43,7 +43,10 @@ describe("ObjectsBulkActions", () => {
it("should call clearChecked when close button is clicked", () => {
const clearChecked = jest.fn()
const wrapper = shallow(
<ObjectsBulkActions checkedObjectsCount={1} clearChecked={clearChecked} />
<ObjectsBulkActions
checkedObjectsCount={1}
clearChecked={clearChecked}
/>,
)
wrapper.find("#close-bulk-actions").simulate("click")
expect(clearChecked).toHaveBeenCalled()
@@ -62,7 +65,7 @@ describe("ObjectsBulkActions", () => {
<ObjectsBulkActions
checkedObjectsCount={1}
deleteChecked={deleteChecked}
/>
/>,
)
wrapper.find("#delete-checked").simulate("click")
wrapper.update()

18
browser/app/js/objects/__tests__/ObjectsHeader.test.js
View File

@@ -28,43 +28,43 @@ describe("ObjectsHeader", () => {
const sortObjects = jest.fn()
const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
expect(
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc"),
).toBeTruthy()
expect(
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc"),
).toBeTruthy()
expect(
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc"),
).toBeTruthy()
})
it("should render name column with desc class when objects are sorted by name", () => {
const sortObjects = jest.fn()
const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} />
<ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} />,
)
expect(
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc"),
).toBeTruthy()
})
it("should render size column with desc class when objects are sorted by size", () => {
const sortObjects = jest.fn()
const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortSizeOrder={true} />
<ObjectsHeader sortObjects={sortObjects} sortSizeOrder={true} />,
)
expect(
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc")
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc"),
).toBeTruthy()
})
it("should render last modified column with desc class when objects are sorted by last modified", () => {
const sortObjects = jest.fn()
const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortLastModifiedOrder={true} />
<ObjectsHeader sortObjects={sortObjects} sortLastModifiedOrder={true} />,
)
expect(
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc")
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc"),
).toBeTruthy()
})

4
browser/app/js/objects/__tests__/ObjectsList.test.js
View File

@@ -25,14 +25,14 @@ describe("ObjectsList", () => {
it("should render ObjectContainer for every object", () => {
const wrapper = shallow(
<ObjectsList objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]} />
<ObjectsList objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]} />,
)
expect(wrapper.find("Connect(ObjectContainer)").length).toBe(2)
})
it("should render PrefixContainer for every prefix", () => {
const wrapper = shallow(
<ObjectsList objects={[{ name: "abc/" }, { name: "xyz/" }]} />
<ObjectsList objects={[{ name: "abc/" }, { name: "xyz/" }]} />,
)
expect(wrapper.find("Connect(PrefixContainer)").length).toBe(2)
})

17
browser/app/js/objects/__tests__/ObjectsListContainer.test.js
View File

@@ -28,19 +28,26 @@ describe("ObjectsList", () => {
<ObjectsListContainer
objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]}
loadObjects={jest.fn()}
/>
/>,
)
expect(wrapper.find("ObjectsList").length).toBe(1)
expect(wrapper.find("ObjectsList").prop("objects")).toEqual([
{ name: "test1.jpg" },
{ name: "test2.jpg" }
{
name: "test1.jpg",
},
{
name: "test2.jpg",
},
])
})
it("should show the loading indicator at the bottom if there are more elements to display", () => {
const wrapper = shallow(
<ObjectsListContainer currentBucket="test1" isTruncated={true} />
<ObjectsListContainer currentBucket="test1" isTruncated={true} />,
)
expect(wrapper.find(".text-center").prop("style")).toHaveProperty(
"display",
"block",
)
expect(wrapper.find(".text-center").prop("style")).toHaveProperty("display", "block")
})
})

14
browser/app/js/objects/__tests__/Path.test.js
View File

@@ -31,26 +31,26 @@ describe("Path", () => {
it("should render bucket and prefix", () => {
const wrapper = shallow(
<Path currentBucket={"test1"} currentPrefix={"a/b/"} />
<Path currentBucket={"test1"} currentPrefix={"a/b/"} />,
)
expect(wrapper.find("span").length).toBe(3)
expect(
wrapper
.find("span")
.at(0)
.text()
.text(),
).toBe("test1")
expect(
wrapper
.find("span")
.at(1)
.text()
.text(),
).toBe("a")
expect(
wrapper
.find("span")
.at(2)
.text()
.text(),
).toBe("b")
})
@@ -61,12 +61,14 @@ describe("Path", () => {
currentBucket={"test1"}
currentPrefix={"a/b/"}
selectPrefix={selectPrefix}
/>
/>,
)
wrapper
.find("a")
.at(2)
.simulate("click", { preventDefault: jest.fn() })
.simulate("click", {
preventDefault: jest.fn(),
})
expect(selectPrefix).toHaveBeenCalledWith("a/b/")
})
})

2
browser/app/js/objects/__tests__/PrefixContainer.test.js
View File

@@ -36,7 +36,7 @@ describe("PrefixContainer", () => {
object={{ name: "abc/" }}
currentPrefix={"xyz/"}
selectPrefix={selectPrefix}
/>
/>,
)
wrapper.find("Connect(ObjectItem)").prop("onClick")()
expect(selectPrefix).toHaveBeenCalledWith("xyz/abc/")

62
browser/app/js/objects/__tests__/ShareObjectModal.test.js
View File

@@ -20,13 +20,13 @@ import { ShareObjectModal } from "../ShareObjectModal"
import {
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
SHARE_OBJECT_EXPIRY_MINUTES,
} from "../../constants"
jest.mock("../../web", () => ({
LoggedIn: jest.fn(() => {
return true
})
}),
}))
describe("ShareObjectModal", () => {
@@ -35,7 +35,7 @@ describe("ShareObjectModal", () => {
<ShareObjectModal
object={{ name: "obj1" }}
shareObjectDetails={{ show: true, object: "obj1", url: "test" }}
/>
/>,
)
})
@@ -46,7 +46,7 @@ describe("ShareObjectModal", () => {
object={{ name: "obj1" }}
shareObjectDetails={{ show: true, object: "obj1", url: "test" }}
hideShareObject={hideShareObject}
/>
/>,
)
wrapper
.find("button")
@@ -60,13 +60,13 @@ describe("ShareObjectModal", () => {
<ShareObjectModal
object={{ name: "obj1" }}
shareObjectDetails={{ show: true, object: "obj1", url: "test" }}
/>
/>,
)
expect(
wrapper
.find("input")
.first()
.prop("value")
.prop("value"),
).toBe(`${window.location.protocol}//test`)
})
@@ -79,7 +79,7 @@ describe("ShareObjectModal", () => {
shareObjectDetails={{ show: true, object: "obj1", url: "test" }}
hideShareObject={hideShareObject}
showCopyAlert={showCopyAlert}
/>
/>,
)
wrapper.find("CopyToClipboard").prop("onCopy")()
expect(showCopyAlert).toHaveBeenCalledWith("Link copied to clipboard!")
@@ -88,35 +88,41 @@ describe("ShareObjectModal", () => {
describe("Update expiry values", () => {
const props = {
object: { name: "obj1" },
shareObjectDetails: { show: true, object: "obj1", url: "test" }
object: {
name: "obj1",
},
shareObjectDetails: {
show: true,
object: "obj1",
url: "test",
},
}
it("should have default expiry values", () => {
const wrapper = shallow(<ShareObjectModal {...props} />)
expect(wrapper.state("expiry")).toEqual({
days: SHARE_OBJECT_EXPIRY_DAYS,
hours: SHARE_OBJECT_EXPIRY_HOURS,
minutes: SHARE_OBJECT_EXPIRY_MINUTES
minutes: SHARE_OBJECT_EXPIRY_MINUTES,
})
})
it("should not allow any increments when days is already max", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ShareObjectModal {...props} shareObject={shareObject} />
<ShareObjectModal {...props} shareObject={shareObject} />,
)
wrapper.setState({
expiry: {
days: 7,
hours: 0,
minutes: 0
}
minutes: 0,
},
})
wrapper.find("#increase-hours").simulate("click")
expect(wrapper.state("expiry")).toEqual({
days: 7,
hours: 0,
minutes: 0
minutes: 0,
})
expect(shareObject).not.toHaveBeenCalled()
})
@@ -124,14 +130,14 @@ describe("ShareObjectModal", () => {
it("should not allow expiry values less than minimum value", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ShareObjectModal {...props} shareObject={shareObject} />
<ShareObjectModal {...props} shareObject={shareObject} />,
)
wrapper.setState({
expiry: {
days: 5,
hours: 0,
minutes: 0
}
minutes: 0,
},
})
wrapper.find("#decrease-hours").simulate("click")
expect(wrapper.state("expiry").hours).toBe(0)
@@ -143,14 +149,14 @@ describe("ShareObjectModal", () => {
it("should not allow expiry values more than maximum value", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ShareObjectModal {...props} shareObject={shareObject} />
<ShareObjectModal {...props} shareObject={shareObject} />,
)
wrapper.setState({
expiry: {
days: 1,
hours: 23,
minutes: 59
}
minutes: 59,
},
})
wrapper.find("#increase-hours").simulate("click")
expect(wrapper.state("expiry").hours).toBe(23)
@@ -162,20 +168,20 @@ describe("ShareObjectModal", () => {
it("should set hours and minutes to 0 when days reaches max", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ShareObjectModal {...props} shareObject={shareObject} />
<ShareObjectModal {...props} shareObject={shareObject} />,
)
wrapper.setState({
expiry: {
days: 6,
hours: 5,
minutes: 30
}
minutes: 30,
},
})
wrapper.find("#increase-days").simulate("click")
expect(wrapper.state("expiry")).toEqual({
days: 7,
hours: 0,
minutes: 0
minutes: 0,
})
expect(shareObject).toHaveBeenCalled()
})
@@ -183,20 +189,20 @@ describe("ShareObjectModal", () => {
it("should set days to MAX when all of them becomes 0", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ShareObjectModal {...props} shareObject={shareObject} />
<ShareObjectModal {...props} shareObject={shareObject} />,
)
wrapper.setState({
expiry: {
days: 0,
hours: 1,
minutes: 0
}
minutes: 0,
},
})
wrapper.find("#decrease-hours").simulate("click")
expect(wrapper.state("expiry")).toEqual({
days: 7,
hours: 0,
minutes: 0
minutes: 0,
})
expect(shareObject).toHaveBeenCalledWith("obj1", 7, 0, 0)
})

294
browser/app/js/objects/__tests__/actions.test.js
View File

@@ -24,35 +24,54 @@ jest.mock("../../web", () => ({
LoggedIn: jest.fn(() => true).mockReturnValueOnce(false),
ListObjects: jest.fn(() => {
return Promise.resolve({
objects: [{ name: "test1" }, { name: "test2" }],
objects: [
{
name: "test1",
},
{
name: "test2",
},
],
istruncated: false,
nextmarker: "test2",
writable: false
writable: false,
})
}),
RemoveObject: jest.fn(({ bucketName, objects }) => {
if (!bucketName) {
return Promise.reject({ message: "Invalid bucket" })
return Promise.reject({
message: "Invalid bucket",
})
}
return Promise.resolve({})
}),
PresignedGet: jest.fn(({ bucket, object }) => {
if (!bucket) {
return Promise.reject({ message: "Invalid bucket" })
return Promise.reject({
message: "Invalid bucket",
})
}
return Promise.resolve({ url: "https://test.com/bk1/pre1/b.txt" })
return Promise.resolve({
url: "https://test.com/bk1/pre1/b.txt",
})
}),
CreateURLToken: jest
.fn()
.mockImplementationOnce(() => {
return Promise.resolve({ token: "test" })
return Promise.resolve({
token: "test",
})
})
.mockImplementationOnce(() => {
return Promise.reject({ message: "Error in creating token" })
return Promise.reject({
message: "Error in creating token",
})
})
.mockImplementationOnce(() => {
return Promise.resolve({ token: "test" })
})
return Promise.resolve({
token: "test",
})
}),
}))
const middlewares = [thunk]
@@ -64,17 +83,31 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/SET_LIST",
objects: [{ name: "test1" }, { name: "test2" }],
objects: [
{
name: "test1",
},
{
name: "test2",
},
],
isTruncated: false,
marker: "test2"
}
marker: "test2",
},
]
store.dispatch(
actionsObjects.setList(
[{ name: "test1" }, { name: "test2" }],
[
{
name: "test1",
},
{
name: "test2",
},
],
"test2",
false
)
false,
),
)
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -85,8 +118,8 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/SET_SORT_BY",
sortBy: "name"
}
sortBy: "name",
},
]
store.dispatch(actionsObjects.setSortBy("name"))
const actions = store.getActions()
@@ -98,8 +131,8 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/SET_SORT_ORDER",
sortOrder: true
}
sortOrder: true,
},
]
store.dispatch(actionsObjects.setSortOrder(true))
const actions = store.getActions()
@@ -108,28 +141,39 @@ describe("Objects actions", () => {
it("creates objects/SET_LIST after fetching the objects", () => {
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "",
},
})
const expectedActions = [
{
type: "objects/SET_LIST",
objects: [{ name: "test1" }, { name: "test2" }],
objects: [
{
name: "test1",
},
{
name: "test2",
},
],
marker: "test2",
isTruncated: false
isTruncated: false,
},
{
type: "objects/SET_SORT_BY",
sortBy: ""
sortBy: "",
},
{
type: "objects/SET_SORT_ORDER",
sortOrder: false
sortOrder: false,
},
{
type: "objects/SET_PREFIX_WRITABLE",
prefixWritable: false
}
prefixWritable: false,
},
]
return store.dispatch(actionsObjects.fetchObjects()).then(() => {
const actions = store.getActions()
@@ -139,20 +183,31 @@ describe("Objects actions", () => {
it("creates objects/APPEND_LIST after fetching more objects", () => {
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "",
},
})
const expectedActions = [
{
type: "objects/APPEND_LIST",
objects: [{ name: "test1" }, { name: "test2" }],
objects: [
{
name: "test1",
},
{
name: "test2",
},
],
marker: "test2",
isTruncated: false
isTruncated: false,
},
{
type: "objects/SET_PREFIX_WRITABLE",
prefixWritable: false
}
prefixWritable: false,
},
]
return store.dispatch(actionsObjects.fetchObjects(true)).then(() => {
const actions = store.getActions()
@@ -167,24 +222,24 @@ describe("Objects actions", () => {
sortBy: "",
sortOrder: false,
isTruncated: false,
marker: ""
}
marker: "",
},
})
const expectedActions = [
{
type: "objects/SET_SORT_BY",
sortBy: "name"
sortBy: "name",
},
{
type: "objects/SET_SORT_ORDER",
sortOrder: true
sortOrder: true,
},
{
type: "objects/SET_LIST",
objects: [],
isTruncated: false,
marker: ""
}
marker: "",
},
]
store.dispatch(actionsObjects.sortObjects("name"))
const actions = store.getActions()
@@ -193,12 +248,21 @@ describe("Objects actions", () => {
it("should update browser url and creates objects/SET_CURRENT_PREFIX and objects/CHECKED_LIST_RESET actions when selectPrefix is called", () => {
const store = mockStore({
buckets: { currentBucket: "test" },
objects: { currentPrefix: "" }
buckets: {
currentBucket: "test",
},
objects: {
currentPrefix: "",
},
})
const expectedActions = [
{ type: "objects/SET_CURRENT_PREFIX", prefix: "abc/" },
{ type: "objects/CHECKED_LIST_RESET" }
{
type: "objects/SET_CURRENT_PREFIX",
prefix: "abc/",
},
{
type: "objects/CHECKED_LIST_RESET",
},
]
store.dispatch(actionsObjects.selectPrefix("abc/"))
const actions = store.getActions()
@@ -209,7 +273,10 @@ describe("Objects actions", () => {
it("create objects/SET_PREFIX_WRITABLE action", () => {
const store = mockStore()
const expectedActions = [
{ type: "objects/SET_PREFIX_WRITABLE", prefixWritable: true }
{
type: "objects/SET_PREFIX_WRITABLE",
prefixWritable: true,
},
]
store.dispatch(actionsObjects.setPrefixWritable(true))
const actions = store.getActions()
@@ -218,7 +285,12 @@ describe("Objects actions", () => {
it("creates objects/REMOVE action", () => {
const store = mockStore()
const expectedActions = [{ type: "objects/REMOVE", object: "obj1" }]
const expectedActions = [
{
type: "objects/REMOVE",
object: "obj1",
},
]
store.dispatch(actionsObjects.removeObject("obj1"))
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -226,10 +298,19 @@ describe("Objects actions", () => {
it("creates objects/REMOVE action when object is deleted", () => {
const store = mockStore({
buckets: { currentBucket: "test" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "test",
},
objects: {
currentPrefix: "pre1/",
},
})
const expectedActions = [{ type: "objects/REMOVE", object: "obj1" }]
const expectedActions = [
{
type: "objects/REMOVE",
object: "obj1",
},
]
store.dispatch(actionsObjects.deleteObject("obj1")).then(() => {
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -238,14 +319,22 @@ describe("Objects actions", () => {
it("creates alert/SET action when invalid bucket is provided", () => {
const store = mockStore({
buckets: { currentBucket: "" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "",
},
objects: {
currentPrefix: "pre1/",
},
})
const expectedActions = [
{
type: "alert/SET",
alert: { type: "danger", message: "Invalid bucket", id: 0 }
}
alert: {
type: "danger",
message: "Invalid bucket",
id: 0,
},
},
]
return store.dispatch(actionsObjects.deleteObject("obj1")).then(() => {
const actions = store.getActions()
@@ -260,8 +349,8 @@ describe("Objects actions", () => {
type: "objects/SET_SHARE_OBJECT",
show: true,
object: "b.txt",
url: "test"
}
url: "test",
},
]
store.dispatch(actionsObjects.showShareObject("b.txt", "test"))
const actions = store.getActions()
@@ -275,8 +364,8 @@ describe("Objects actions", () => {
type: "objects/SET_SHARE_OBJECT",
show: false,
object: "",
url: ""
}
url: "",
},
]
store.dispatch(actionsObjects.hideShareObject())
const actions = store.getActions()
@@ -285,24 +374,28 @@ describe("Objects actions", () => {
it("creates objects/SET_SHARE_OBJECT when object is shared", () => {
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "pre1/",
},
})
const expectedActions = [
{
type: "objects/SET_SHARE_OBJECT",
show: true,
object: "a.txt",
url: "https://test.com/bk1/pre1/b.txt"
url: "https://test.com/bk1/pre1/b.txt",
},
{
type: "alert/SET",
alert: {
type: "success",
message: "Object shared. Expires in 1 days 0 hours 0 minutes",
id: alertActions.alertId
}
}
id: alertActions.alertId,
},
},
]
return store
.dispatch(actionsObjects.shareObject("a.txt", 1, 0, 0))
@@ -314,8 +407,12 @@ describe("Objects actions", () => {
it("creates alert/SET when shareObject is failed", () => {
const store = mockStore({
buckets: { currentBucket: "" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "",
},
objects: {
currentPrefix: "pre1/",
},
})
const expectedActions = [
{
@@ -323,9 +420,9 @@ describe("Objects actions", () => {
alert: {
type: "danger",
message: "Invalid bucket",
id: alertActions.alertId
}
}
id: alertActions.alertId,
},
},
]
return store
.dispatch(actionsObjects.shareObject("a.txt", 1, 0, 0))
@@ -341,11 +438,15 @@ describe("Objects actions", () => {
Object.defineProperty(window, "location", {
set(url) {
setLocation(url)
}
},
})
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "pre1/",
},
})
store.dispatch(actionsObjects.downloadObject("obj1"))
const url = `${
@@ -359,17 +460,21 @@ describe("Objects actions", () => {
Object.defineProperty(window, "location", {
set(url) {
setLocation(url)
}
},
})
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "pre1/",
},
})
return store.dispatch(actionsObjects.downloadObject("obj1")).then(() => {
const url = `${
window.location.origin
}${minioBrowserPrefix}/download/bk1/${encodeURI(
"pre1/obj1"
"pre1/obj1",
)}?token=test`
expect(setLocation).toHaveBeenCalledWith(url)
})
@@ -377,8 +482,12 @@ describe("Objects actions", () => {
it("create alert/SET action when CreateUrlToken fails", () => {
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "pre1/",
},
})
const expectedActions = [
{
@@ -386,9 +495,9 @@ describe("Objects actions", () => {
alert: {
type: "danger",
message: "Error in creating token",
id: alertActions.alertId
}
}
id: alertActions.alertId,
},
},
]
return store.dispatch(actionsObjects.downloadObject("obj1")).then(() => {
const actions = store.getActions()
@@ -402,8 +511,8 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/CHECKED_LIST_ADD",
object: "obj1"
}
object: "obj1",
},
]
store.dispatch(actionsObjects.checkObject("obj1"))
const actions = store.getActions()
@@ -415,8 +524,8 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/CHECKED_LIST_REMOVE",
object: "obj1"
}
object: "obj1",
},
]
store.dispatch(actionsObjects.uncheckObject("obj1"))
const actions = store.getActions()
@@ -427,8 +536,8 @@ describe("Objects actions", () => {
const store = mockStore()
const expectedActions = [
{
type: "objects/CHECKED_LIST_RESET"
}
type: "objects/CHECKED_LIST_RESET",
},
]
store.dispatch(actionsObjects.resetCheckedList())
const actions = store.getActions()
@@ -440,13 +549,18 @@ describe("Objects actions", () => {
const send = jest.fn()
const xhrMockClass = () => ({
open: open,
send: send
send: send,
})
window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass)
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/", checkedList: ["obj1"] }
buckets: {
currentBucket: "bk1",
},
objects: {
currentPrefix: "pre1/",
checkedList: ["obj1"],
},
})
return store.dispatch(actionsObjects.downloadCheckedObjects()).then(() => {
const requestUrl = `${
@@ -457,8 +571,8 @@ describe("Objects actions", () => {
JSON.stringify({
bucketName: "bk1",
prefix: "pre1/",
objects: ["obj1"]
})
objects: ["obj1"],
}),
)
})
})

147
browser/app/js/objects/__tests__/reducer.test.js
View File

@@ -31,20 +31,34 @@ describe("objects reducer", () => {
shareObject: {
show: false,
object: "",
url: ""
url: "",
},
checkedList: []
checkedList: [],
})
})
it("should handle SET_LIST", () => {
const newState = reducer(undefined, {
type: actions.SET_LIST,
objects: [{ name: "obj1" }, { name: "obj2" }],
objects: [
{
name: "obj1",
},
{
name: "obj2",
},
],
marker: "obj2",
isTruncated: false
isTruncated: false,
})
expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }])
expect(newState.list).toEqual([
{
name: "obj1",
},
{
name: "obj2",
},
])
expect(newState.marker).toBe("obj2")
expect(newState.isTruncated).toBeFalsy()
})
@@ -52,22 +66,44 @@ describe("objects reducer", () => {
it("should handle APPEND_LIST", () => {
const newState = reducer(
{
list: [{ name: "obj1" }, { name: "obj2" }],
list: [
{
name: "obj1",
},
{
name: "obj2",
},
],
marker: "obj2",
isTruncated: true
isTruncated: true,
},
{
type: actions.APPEND_LIST,
objects: [{ name: "obj3" }, { name: "obj4" }],
objects: [
{
name: "obj3",
},
{
name: "obj4",
},
],
marker: "obj4",
isTruncated: false
}
isTruncated: false,
},
)
expect(newState.list).toEqual([
{ name: "obj1" },
{ name: "obj2" },
{ name: "obj3" },
{ name: "obj4" }
{
name: "obj1",
},
{
name: "obj2",
},
{
name: "obj3",
},
{
name: "obj4",
},
])
expect(newState.marker).toBe("obj4")
expect(newState.isTruncated).toBeFalsy()
@@ -75,30 +111,59 @@ describe("objects reducer", () => {
it("should handle REMOVE", () => {
const newState = reducer(
{ list: [{ name: "obj1" }, { name: "obj2" }] },
{
list: [
{
name: "obj1",
},
{
name: "obj2",
},
],
},
{
type: actions.REMOVE,
object: "obj1"
}
object: "obj1",
},
)
expect(newState.list).toEqual([{ name: "obj2" }])
expect(newState.list).toEqual([
{
name: "obj2",
},
])
})
it("should handle REMOVE with non-existent object", () => {
const newState = reducer(
{ list: [{ name: "obj1" }, { name: "obj2" }] },
{
list: [
{
name: "obj1",
},
{
name: "obj2",
},
],
},
{
type: actions.REMOVE,
object: "obj3"
}
object: "obj3",
},
)
expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }])
expect(newState.list).toEqual([
{
name: "obj1",
},
{
name: "obj2",
},
])
})
it("should handle SET_SORT_BY", () => {
const newState = reducer(undefined, {
type: actions.SET_SORT_BY,
sortBy: "name"
sortBy: "name",
})
expect(newState.sortBy).toEqual("name")
})
@@ -106,18 +171,22 @@ describe("objects reducer", () => {
it("should handle SET_SORT_ORDER", () => {
const newState = reducer(undefined, {
type: actions.SET_SORT_ORDER,
sortOrder: true
sortOrder: true,
})
expect(newState.sortOrder).toEqual(true)
})
it("should handle SET_CURRENT_PREFIX", () => {
const newState = reducer(
{ currentPrefix: "test1/", marker: "abc", isTruncated: true },
{
currentPrefix: "test1/",
marker: "abc",
isTruncated: true,
},
{
type: actions.SET_CURRENT_PREFIX,
prefix: "test2/"
}
prefix: "test2/",
},
)
expect(newState.currentPrefix).toEqual("test2/")
expect(newState.marker).toEqual("")
@@ -127,7 +196,7 @@ describe("objects reducer", () => {
it("should handle SET_PREFIX_WRITABLE", () => {
const newState = reducer(undefined, {
type: actions.SET_PREFIX_WRITABLE,
prefixWritable: true
prefixWritable: true,
})
expect(newState.prefixWritable).toBeTruthy()
})
@@ -137,40 +206,44 @@ describe("objects reducer", () => {
type: actions.SET_SHARE_OBJECT,
show: true,
object: "a.txt",
url: "test"
url: "test",
})
expect(newState.shareObject).toEqual({
show: true,
object: "a.txt",
url: "test"
url: "test",
})
})
it("should handle CHECKED_LIST_ADD", () => {
const newState = reducer(undefined, {
type: actions.CHECKED_LIST_ADD,
object: "obj1"
object: "obj1",
})
expect(newState.checkedList).toEqual(["obj1"])
})
it("should handle SELECTED_LIST_REMOVE", () => {
const newState = reducer(
{ checkedList: ["obj1", "obj2"] },
{
checkedList: ["obj1", "obj2"],
},
{
type: actions.CHECKED_LIST_REMOVE,
object: "obj1"
}
object: "obj1",
},
)
expect(newState.checkedList).toEqual(["obj2"])
})
it("should handle CHECKED_LIST_RESET", () => {
const newState = reducer(
{ checkedList: ["obj1", "obj2"] },
{
type: actions.CHECKED_LIST_RESET
}
checkedList: ["obj1", "obj2"],
},
{
type: actions.CHECKED_LIST_RESET,
},
)
expect(newState.checkedList).toEqual([])
})

121
browser/app/js/objects/actions.js
View File

@@ -19,7 +19,7 @@ import history from "../history"
import {
sortObjectsByName,
sortObjectsBySize,
sortObjectsByDate
sortObjectsByDate,
} from "../utils"
import { getCurrentBucket } from "../buckets/selectors"
import { getCurrentPrefix, getCheckedList } from "./selectors"
@@ -42,53 +42,58 @@ export const setList = (objects, marker, isTruncated) => ({
type: SET_LIST,
objects,
marker,
isTruncated
isTruncated,
})
export const appendList = (objects, marker, isTruncated) => ({
type: APPEND_LIST,
objects,
marker,
isTruncated
isTruncated,
})
export const fetchObjects = append => {
return function(dispatch, getState) {
const {
buckets: { currentBucket },
objects: { currentPrefix, marker }
objects: { currentPrefix, marker },
} = getState()
if (currentBucket) {
return web
.ListObjects({
bucketName: currentBucket,
prefix: currentPrefix,
marker: append ? marker : ""
})
.then(res => {
let objects = []
if (res.objects) {
objects = res.objects.map(object => {
return {
...object,
name: object.name.replace(currentPrefix, "")
}
})
}
if (append) {
dispatch(appendList(objects, res.nextmarker, res.istruncated))
} else {
dispatch(setList(objects, res.nextmarker, res.istruncated))
dispatch(setSortBy(""))
dispatch(setSortOrder(false))
}
dispatch(setPrefixWritable(res.writable))
})
.catch(err => {
dispatch(alertActions.set({ type: "danger", message: err.message }))
history.push("/login")
})
}
.ListObjects({
bucketName: currentBucket,
prefix: currentPrefix,
marker: append ? marker : "",
})
.then(res => {
let objects = []
if (res.objects) {
objects = res.objects.map(object => {
return {
...object,
name: object.name.replace(currentPrefix, ""),
}
})
}
if (append) {
dispatch(appendList(objects, res.nextmarker, res.istruncated))
} else {
dispatch(setList(objects, res.nextmarker, res.istruncated))
dispatch(setSortBy(""))
dispatch(setSortOrder(false))
}
dispatch(setPrefixWritable(res.writable))
})
.catch(err => {
dispatch(
alertActions.set({
type: "danger",
message: err.message,
}),
)
history.push("/login")
})
}
}
}
@@ -119,12 +124,12 @@ export const sortObjects = sortBy => {
export const setSortBy = sortBy => ({
type: SET_SORT_BY,
sortBy
sortBy,
})
export const setSortOrder = sortOrder => ({
type: SET_SORT_ORDER,
sortOrder
sortOrder,
})
export const selectPrefix = prefix => {
@@ -140,13 +145,13 @@ export const selectPrefix = prefix => {
export const setCurrentPrefix = prefix => {
return {
type: SET_CURRENT_PREFIX,
prefix
prefix,
}
}
export const setPrefixWritable = prefixWritable => ({
type: SET_PREFIX_WRITABLE,
prefixWritable
prefixWritable,
})
export const deleteObject = object => {
@@ -157,7 +162,7 @@ export const deleteObject = object => {
return web
.RemoveObject({
bucketName: currentBucket,
objects: [objectName]
objects: [objectName],
})
.then(() => {
dispatch(removeObject(object))
@@ -166,8 +171,8 @@ export const deleteObject = object => {
dispatch(
alertActions.set({
type: "danger",
message: e.message
})
message: e.message,
}),
)
})
}
@@ -175,7 +180,7 @@ export const deleteObject = object => {
export const removeObject = object => ({
type: REMOVE,
object
object,
})
export const deleteCheckedObjects = () => {
@@ -199,23 +204,23 @@ export const shareObject = (object, days, hours, minutes) => {
host: location.host,
bucket: currentBucket,
object: objectName,
expiry
expiry,
})
.then(obj => {
dispatch(showShareObject(object, obj.url))
dispatch(
alertActions.set({
type: "success",
message: `Object shared. Expires in ${days} days ${hours} hours ${minutes} minutes`
})
message: `Object shared. Expires in ${days} days ${hours} hours ${minutes} minutes`,
}),
)
})
.catch(err => {
dispatch(
alertActions.set({
type: "danger",
message: err.message
})
message: err.message,
}),
)
})
}
@@ -225,14 +230,14 @@ export const showShareObject = (object, url) => ({
type: SET_SHARE_OBJECT,
show: true,
object,
url
url,
})
export const hideShareObject = (object, url) => ({
type: SET_SHARE_OBJECT,
show: false,
object: "",
url: ""
url: "",
})
export const downloadObject = object => {
@@ -256,8 +261,8 @@ export const downloadObject = object => {
dispatch(
alertActions.set({
type: "danger",
message: err.message
})
message: err.message,
}),
)
})
} else {
@@ -271,16 +276,16 @@ export const downloadObject = object => {
export const checkObject = object => ({
type: CHECKED_LIST_ADD,
object
object,
})
export const uncheckObject = object => ({
type: CHECKED_LIST_REMOVE,
object
object,
})
export const resetCheckedList = () => ({
type: CHECKED_LIST_RESET
type: CHECKED_LIST_RESET,
})
export const downloadCheckedObjects = () => {
@@ -289,7 +294,7 @@ export const downloadCheckedObjects = () => {
const req = {
bucketName: getCurrentBucket(state),
prefix: getCurrentPrefix(state),
objects: getCheckedList(state)
objects: getCheckedList(state),
}
if (!web.LoggedIn()) {
const requestUrl = location.origin + "/minio/zip?token=''"
@@ -307,9 +312,9 @@ export const downloadCheckedObjects = () => {
dispatch(
alertActions.set({
type: "danger",
message: err.message
})
)
message: err.message,
}),
),
)
}
}
@@ -327,7 +332,7 @@ const downloadZip = (url, req, dispatch) => {
if (this.status == 200) {
dispatch(resetCheckedList())
var blob = new Blob([this.response], {
type: "octet/stream"
type: "octet/stream",
})
var blobUrl = window.URL.createObjectURL(blob)
var separator = req.prefix.length > 1 ? "-" : ""

32
browser/app/js/objects/reducer.js
View File

@@ -36,11 +36,11 @@ export default (
shareObject: {
show: false,
object: "",
url: ""
url: "",
},
checkedList: []
checkedList: [],
},
action
action,
) => {
switch (action.type) {
case actionsObjects.SET_LIST:
@@ -48,41 +48,41 @@ export default (
...state,
list: action.objects,
marker: action.marker,
isTruncated: action.isTruncated
isTruncated: action.isTruncated,
}
case actionsObjects.APPEND_LIST:
return {
...state,
list: [...state.list, ...action.objects],
marker: action.marker,
isTruncated: action.isTruncated
isTruncated: action.isTruncated,
}
case actionsObjects.REMOVE:
return {
...state,
list: removeObject(state.list, action.object, object => object.name)
list: removeObject(state.list, action.object, object => object.name),
}
case actionsObjects.SET_SORT_BY:
return {
...state,
sortBy: action.sortBy
sortBy: action.sortBy,
}
case actionsObjects.SET_SORT_ORDER:
return {
...state,
sortOrder: action.sortOrder
sortOrder: action.sortOrder,
}
case actionsObjects.SET_CURRENT_PREFIX:
return {
...state,
currentPrefix: action.prefix,
marker: "",
isTruncated: false
isTruncated: false,
}
case actionsObjects.SET_PREFIX_WRITABLE:
return {
...state,
prefixWritable: action.prefixWritable
prefixWritable: action.prefixWritable,
}
case actionsObjects.SET_SHARE_OBJECT:
return {
@@ -90,13 +90,13 @@ export default (
shareObject: {
show: action.show,
object: action.object,
url: action.url
}
url: action.url,
},
}
case actionsObjects.CHECKED_LIST_ADD:
return {
...state,
checkedList: [...state.checkedList, action.object]
checkedList: [...state.checkedList, action.object],
}
case actionsObjects.CHECKED_LIST_REMOVE:
return {
@@ -104,13 +104,13 @@ export default (
checkedList: removeObject(
state.checkedList,
action.object,
object => object
)
object => object,
),
}
case actionsObjects.CHECKED_LIST_RESET:
return {
...state,
checkedList: []
checkedList: [],
}
default:
return state