MyFavMirrors/minio
1
0
Fork 0
mirror of https://github.com/minio/minio.git synced 2025-11-13 07:11:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

revert browser newux changes (#5714)

Browse Source
This commit is contained in:
Kanagaraj M
2018-03-27 01:19:12 +05:30
committed by Dee Koder
parent 35e64573fa
commit 19451e374a
186 changed files with 4507 additions and 16033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
browser/app/js/alert/Alert.js
View File

@@ -21,10 +21,9 @@ const Alert = ({ show, type, message, onDismiss }) => (
<AlertComponent
className={"alert animated " + (show ? "fadeInDown" : "fadeOutUp")}
bsStyle={type}
closeLabel=""
onDismiss={onDismiss}
>
<i className="close close--alt" onClick={onDismiss} />
{message}
<div className="text-center">{message}</div>
</AlertComponent>
)

4
browser/app/js/alert/__tests___/Alert.test.js
View File

@@ -28,9 +28,7 @@ describe("Alert", () => {
const wrapper = mount(
<Alert show={true} type="danger" message="test" onDismiss={onDismiss} />
)
wrapper.find("i").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
expect(onDismiss).toHaveBeenCalled()
})
})

28
browser/app/js/alert/__tests___/actions.test.js
View File

@@ -29,19 +29,10 @@ describe("Alert actions", () => {
const expectedActions = [
{
type: "alert/SET",
alert: {
id: 0,
message: "Test alert",
type: "danger"
}
alert: { id: 0, message: "Test alert", type: "danger" }
}
]
store.dispatch(
actionsAlert.set({
message: "Test alert",
type: "danger"
})
)
store.dispatch(actionsAlert.set({ message: "Test alert", type: "danger" }))
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
})
@@ -51,23 +42,14 @@ describe("Alert actions", () => {
const expectedActions = [
{
type: "alert/SET",
alert: {
id: 1,
message: "Test alert"
}
alert: { id: 1, message: "Test alert" }
},
{
type: "alert/CLEAR",
alert: {
id: 1
}
alert: { id: 1 }
}
]
store.dispatch(
actionsAlert.set({
message: "Test alert"
})
)
store.dispatch(actionsAlert.set({ message: "Test alert" }))
jest.runAllTimers()
const actions = store.getActions()
expect(actions).toEqual(expectedActions)

34
browser/app/js/alert/__tests___/reducer.test.js
View File

@@ -29,11 +29,7 @@ describe("alert reducer", () => {
expect(
reducer(undefined, {
type: actionsAlert.SET,
alert: {
id: 1,
type: "danger",
message: "Test message"
}
alert: { id: 1, type: "danger", message: "Test message" }
})
).toEqual({
show: true,
@@ -46,11 +42,7 @@ describe("alert reducer", () => {
it("should clear alert if id not passed", () => {
expect(
reducer(
{
show: true,
type: "danger",
message: "Test message"
},
{ show: true, type: "danger", message: "Test message" },
{
type: actionsAlert.CLEAR
}
@@ -64,17 +56,10 @@ describe("alert reducer", () => {
it("should clear alert if id is matching", () => {
expect(
reducer(
{
show: true,
id: 1,
type: "danger",
message: "Test message"
},
{ show: true, id: 1, type: "danger", message: "Test message" },
{
type: actionsAlert.CLEAR,
alert: {
id: 1
}
alert: { id: 1 }
}
)
).toEqual({
@@ -86,17 +71,10 @@ describe("alert reducer", () => {
it("should not clear alert if id is not matching", () => {
expect(
reducer(
{
show: true,
id: 1,
type: "danger",
message: "Test message"
},
{ show: true, id: 1, type: "danger", message: "Test message" },
{
type: actionsAlert.CLEAR,
alert: {
id: 2
}
alert: { id: 2 }
}
)
).toEqual({

4
browser/app/js/alert/actions.js
View File

@@ -42,7 +42,5 @@ export const set = alert => {
}
export const clear = () => {
return {
type: CLEAR
}
return { type: CLEAR }
}

55
browser/app/js/browser/AboutModal.js
View File

@@ -21,29 +21,40 @@ import logo from "../../img/logo.svg"
export const AboutModal = ({ serverInfo, hideAbout }) => {
const { version, memory, platform, runtime } = serverInfo
return (
<Modal className="about" animation={false} show={true} onHide={hideAbout}>
<i className="close" onClick={hideAbout} />
<div className="about__content">
<div className="about__logo hidden-xs">
<img src={logo} alt="" />
<Modal
className="modal-about modal-dark"
animation={false}
show={true}
onHide={hideAbout}
>
<button className="close" onClick={hideAbout}>
<span>×</span>
</button>
<div className="ma-inner">
<div className="mai-item hidden-xs">
<a href="https://minio.io" target="_blank">
<img className="maii-logo" src={logo} alt="" />
</a>
</div>
<div className="about__info">
<div className="about__item">
<strong>Version</strong>
<small>{version}</small>
</div>
<div className="about__item">
<strong>Memory</strong>
<small>{memory}</small>
</div>
<div className="about__item">
<strong>Platform</strong>
<small>{platform}</small>
</div>
<div className="about__item">
<strong>Runtime</strong>
<small>{runtime}</small>
</div>
<div className="mai-item">
<ul className="maii-list">
<li>
<div>Version</div>
<small>{version}</small>
</li>
<li>
<div>Memory</div>
<small>{memory}</small>
</li>
<li>
<div>Platform</div>
<small>{platform}</small>
</li>
<li>
<div>Runtime</div>
<small>{runtime}</small>
</li>
</ul>
</div>
</div>
</Modal>

11
browser/app/js/browser/Browser.js
View File

@@ -15,21 +15,24 @@
*/
import React from "react"
import classNames from "classnames"
import { connect } from "react-redux"
import SideBar from "./SideBar"
import MainContent from "./MainContent"
import AlertContainer from "../alert/AlertContainer"
const Aux = props => props.children
class Browser extends React.Component {
render() {
return (
<Aux>
<div
className={classNames({
"file-explorer": true
})}
>
<SideBar />
<MainContent />
<AlertContainer />
</Aux>
</div>
)
}
}

111
browser/app/js/browser/BrowserDropdown.js
View File

@@ -81,61 +81,62 @@ export class BrowserDropdown extends React.Component {
render() {
const { serverInfo } = this.props
return (
<Dropdown pullRight id="toolbar-menu">
<Dropdown.Toggle
noCaret
className="toolbar__item zmdi zmdi-more-vert"
/>
<Dropdown.Menu>
<li>
<a target="_blank" href="https://github.com/minio/minio">
Github <i className="zmdi zmdi-github" />
</a>
</li>
<li>
<a href="" onClick={this.fullScreen}>
Fullscreen <i className="zmdi zmdi-fullscreen" />
</a>
</li>
<li>
<a target="_blank" href="https://docs.minio.io/">
Documentation <i className="zmdi zmdi-assignment" />
</a>
</li>
<li>
<a target="_blank" href="https://slack.minio.io">
Ask for help <i className="zmdi zmdi-help" />
</a>
</li>
<li>
<a href="" id="show-about" onClick={this.showAbout.bind(this)}>
About <i className="zmdi zmdi-info" />
</a>
{this.state.showAboutModal && (
<AboutModal
serverInfo={serverInfo}
hideAbout={this.hideAbout.bind(this)}
/>
)}
</li>
<li>
<a href="" onClick={this.showChangePassword.bind(this)}>
Change Password <i className="zmdi zmdi-settings" />
</a>
{this.state.showChangePasswordModal && (
<ChangePasswordModal
serverInfo={serverInfo}
hideChangePassword={this.hideChangePassword.bind(this)}
/>
)}
</li>
<li>
<a href="" id="logout" onClick={this.logout}>
Sign Out <i className="zmdi zmdi-sign-in" />
</a>
</li>
</Dropdown.Menu>
</Dropdown>
<li>
<Dropdown pullRight id="top-right-menu">
<Dropdown.Toggle noCaret>
<i className="fa fa-reorder" />
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-right">
<li>
<a target="_blank" href="https://github.com/minio/minio">
Github <i className="fa fa-github" />
</a>
</li>
<li>
<a href="" onClick={this.fullScreen}>
Fullscreen <i className="fa fa-expand" />
</a>
</li>
<li>
<a target="_blank" href="https://docs.minio.io/">
Documentation <i className="fa fa-book" />
</a>
</li>
<li>
<a target="_blank" href="https://slack.minio.io">
Ask for help <i className="fa fa-question-circle" />
</a>
</li>
<li>
<a href="" id="show-about" onClick={this.showAbout.bind(this)}>
About <i className="fa fa-info-circle" />
</a>
{this.state.showAboutModal && (
<AboutModal
serverInfo={serverInfo}
hideAbout={this.hideAbout.bind(this)}
/>
)}
</li>
<li>
<a href="" onClick={this.showChangePassword.bind(this)}>
Change Password <i className="fa fa-cog" />
</a>
{this.state.showChangePasswordModal && (
<ChangePasswordModal
serverInfo={serverInfo}
hideChangePassword={this.hideChangePassword.bind(this)}
/>
)}
</li>
<li>
<a href="" id="logout" onClick={this.logout}>
Sign Out <i className="fa fa-sign-out" />
</a>
</li>
</Dropdown.Menu>
</Dropdown>
</li>
)
}
}

91
browser/app/js/browser/ChangePasswordModal.js
View File

@@ -26,6 +26,7 @@ import {
ModalHeader,
OverlayTrigger
} from "react-bootstrap"
import InputGroup from "./InputGroup"
export class ChangePasswordModal extends React.Component {
constructor(props) {
@@ -113,55 +114,51 @@ export class ChangePasswordModal extends React.Component {
render() {
const { hideChangePassword } = this.props
return (
<Modal bsSize="sm" animation={false} show={true} className="settings">
<Modal.Header>Change Password</Modal.Header>
<Modal.Body className="m-t-20">
<div className="form-group">
<label className="form-group__label">Access key</label>
<input
type="text"
value={this.state.accessKey}
onChange={this.accessKeyChange.bind(this)}
id="accessKey"
className="form-group__field"
name="accesskey"
required="required"
autoComplete="false"
readonly={this.state.keysReadOnly}
/>
<i className="form-group__helper" />
</div>
<div className="form-group">
<label className="form-group__label">Secret key</label>
<input
type={this.state.secretKeyVisible ? "text" : "password"}
value={this.state.secretKey}
onChange={this.secretKeyChange.bind(this)}
id="secretKey"
className="form-group__field"
name="secretKey"
required="required"
autoComplete="false"
readonly={this.state.keysReadOnly}
/>
<i className="form-group__helper" />
<i
onClick={this.secretKeyVisible.bind(
this,
!this.state.secretKeyVisible
)}
className={
"form-group__addon zmdi " +
(this.state.secretKeyVisible ? "zmdi-eye-off" : "zmdi-eye")
}
/>
</div>
</Modal.Body>
<Modal bsSize="sm" animation={false} show={true}>
<ModalHeader>Change Password</ModalHeader>
<ModalBody className="m-t-20">
<InputGroup
value={this.state.accessKey}
onChange={this.accessKeyChange.bind(this)}
id="accessKey"
label="Access Key"
name="accesskey"
type="text"
spellCheck="false"
required="required"
autoComplete="false"
align="ig-left"
readonly={this.state.keysReadOnly}
/>
<i
onClick={this.secretKeyVisible.bind(
this,
!this.state.secretKeyVisible
)}
className={
"toggle-password fa fa-eye " +
(this.state.secretKeyVisible ? "toggled" : "")
}
/>
<InputGroup
value={this.state.secretKey}
onChange={this.secretKeyChange.bind(this)}
id="secretKey"
label="Secret Key"
name="accesskey"
type={this.state.secretKeyVisible ? "text" : "password"}
spellCheck="false"
required="required"
autoComplete="false"
align="ig-left"
readonly={this.state.keysReadOnly}
/>
</ModalBody>
<div className="modal-footer">
<button
id="generate-keys"
className={
"btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
"btn btn-primary " + (this.state.keysReadOnly ? "hidden" : "")
}
onClick={this.generateAuth.bind(this)}
>
@@ -170,7 +167,7 @@ export class ChangePasswordModal extends React.Component {
<button
id="update-keys"
className={
"btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
"btn btn-success " + (this.state.keysReadOnly ? "hidden" : "")
}
onClick={this.setAuth.bind(this)}
>
@@ -178,7 +175,7 @@ export class ChangePasswordModal extends React.Component {
</button>
<button
id="cancel-change-password"
className="btn btn--link"
className="btn btn-link"
onClick={hideChangePassword}
>
Cancel

28
browser/app/js/browser/ConfirmModal.js
View File

@@ -33,23 +33,23 @@ let ConfirmModal = ({
bsSize="small"
animation={false}
show={show}
className={"dialog " + (baseClass || "")}
className={"modal-confirm " + (baseClass || "")}
>
<Modal.Body>
<div className="dialog__icon">
<ModalBody>
<div className="mc-icon">
<i className={icon} />
</div>
<div className="dialog__text">{text}</div>
<div className="dialog__sub">{sub}</div>
<div className="dialog__actions">
<button className="btn btn--link" onClick={okHandler}>
{okText}
</button>
<button className="btn btn--link" onClick={cancelHandler}>
{cancelText}
</button>
</div>
</Modal.Body>
<div className="mc-text">{text}</div>
<div className="mc-sub">{sub}</div>
</ModalBody>
<div className="modal-footer">
<button className="btn btn-danger" onClick={okHandler}>
{okText}
</button>
<button className="btn btn-link" onClick={cancelHandler}>
{cancelText}
</button>
</div>
</Modal>
)
}

19
browser/app/js/browser/Header.js
View File

@@ -16,13 +16,26 @@
import React from "react"
import Path from "../objects/Path"
import Toolbar from "../objects/Toolbar"
import StorageInfo from "./StorageInfo"
import BrowserDropdown from "./BrowserDropdown"
import web from "../web"
import { minioBrowserPrefix } from "../constants"
export const Header = () => {
const loggedIn = web.LoggedIn()
return (
<header className="header">
<Toolbar />
<header className="fe-header">
<Path />
{loggedIn && <StorageInfo />}
<ul className="feh-actions">
{loggedIn ? (
<BrowserDropdown />
) : (
<a className="btn btn-danger" href={minioBrowserPrefix + "/login"}>
Login
</a>
)}
</ul>
</header>
)
}

7
browser/app/js/browser/Host.js
View File

@@ -16,6 +16,11 @@
import React from "react"
export const Host = () => <small>{window.location.host}</small>
export const Host = () => (
<div className="fes-host">
<i className="fa fa-globe" />
<a href="/">{window.location.host}</a>
</div>
)
export default Host

70
browser/app/js/browser/InputGroup.js Normal file
View File

@@ -0,0 +1,70 @@
/*
* Minio Cloud Storage (C) 2016, 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"
let InputGroup = ({
label,
id,
name,
value,
onChange,
type,
spellCheck,
required,
readonly,
autoComplete,
align,
className
}) => {
var input = (
<input
id={id}
name={name}
value={value}
onChange={onChange}
className="ig-text"
type={type}
spellCheck={spellCheck}
required={required}
autoComplete={autoComplete}
/>
)
if (readonly)
input = (
<input
id={id}
name={name}
value={value}
onChange={onChange}
className="ig-text"
type={type}
spellCheck={spellCheck}
required={required}
autoComplete={autoComplete}
disabled
/>
)
return (
<div className={"input-group " + align + " " + className}>
{input}
<i className="ig-helpers" />
<label className="ig-label">{label}</label>
</div>
)
}
export default InputGroup

69
browser/app/js/browser/Login.js
View File

@@ -16,9 +16,11 @@
import React from "react"
import { connect } from "react-redux"
import classNames from "classnames"
import logo from "../../img/logo.svg"
import Alert from "../alert/Alert"
import * as actionsAlert from "../alert/actions"
import InputGroup from "./InputGroup"
import web from "../web"
import { Redirect } from "react-router-dom"
@@ -72,37 +74,39 @@ export class Login extends React.Component {
return (
<div className="login">
{alertBox}
<div className="login__inner">
<div className="login__header">
<img className="login__logo" src={logo} alt="" />
<div className="login__host">{window.location.host}</div>
</div>
<form className="login__form" onSubmit={this.handleSubmit.bind(this)}>
<div className="form-group">
<input
placeholder="Access Key"
type="text"
id="accessKey"
className="form-group__field"
spellCheck="false"
required="required"
/>
<i className="form-group__helper" />
</div>
<div className="form-group">
<input
placeholder="Secret Key"
type="password"
id="secretKey"
className="form-group__field"
spellCheck="false"
required="required"
/>
<i className="form-group__helper" />
</div>
<button className="login__btn" type="submit" />
<div className="l-wrap">
<form onSubmit={this.handleSubmit.bind(this)}>
<InputGroup
className="ig-dark"
label="Access Key"
id="accessKey"
name="username"
type="text"
spellCheck="false"
required="required"
autoComplete="username"
/>
<InputGroup
className="ig-dark"
label="Secret Key"
id="secretKey"
name="password"
type="password"
spellCheck="false"
required="required"
autoComplete="new-password"
/>
<button className="lw-btn" type="submit">
<i className="fa fa-sign-in" />
</button>
</form>
</div>
<div className="l-footer">
<a className="lf-logo" href="">
<img src={logo} alt="" />
</a>
<div className="lf-server">{window.location.host}</div>
</div>
</div>
)
}
@@ -111,12 +115,7 @@ export class Login extends React.Component {
const mapDispatchToProps = dispatch => {
return {
showAlert: (type, message) =>
dispatch(
actionsAlert.set({
type: type,
message: message
})
),
dispatch(actionsAlert.set({ type: type, message: message })),
clearAlert: () => dispatch(actionsAlert.clear())
}
}

30
browser/app/js/browser/MainActions.js
View File

@@ -27,9 +27,9 @@ export const MainActions = ({
uploadFile,
showMakeBucketModal
}) => {
const uploadTooltip = <Tooltip id="tooltip-upload-file">Upload file</Tooltip>
const uploadTooltip = <Tooltip id="tt-upload-file">Upload file</Tooltip>
const makeBucketTooltip = (
<Tooltip id="tooltip-create-bucket">Create bucket</Tooltip>
<Tooltip id="tt-create-bucket">Create bucket</Tooltip>
)
const onFileUpload = e => {
e.preventDefault()
@@ -41,20 +41,15 @@ export const MainActions = ({
if (loggedIn || prefixWritable) {
return (
<Dropdown
dropup
pullRight
className="create"
id="main-actions"
componentClass="div"
>
<Dropdown.Toggle noCaret className="create__toggle" useAnchor={true}>
<i className="zmdi zmdi-plus" />
<i className="zmdi zmdi-close" />
<Dropdown dropup className="feb-actions" id="fe-action-toggle">
<Dropdown.Toggle noCaret className="feba-toggle">
<span>
<i className="fa fa-plus" />
</span>
</Dropdown.Toggle>
<Dropdown.Menu>
<OverlayTrigger placement="left" overlay={uploadTooltip}>
<a href="#" className="create__btn create__btn--upload">
<a href="#" className="feba-btn feba-upload">
<input
type="file"
onChange={onFileUpload}
@@ -62,7 +57,8 @@ export const MainActions = ({
id="file-input"
/>
<label htmlFor="file-input">
<i className="zmdi zmdi-upload" />
{" "}
<i className="fa fa-cloud-upload" />{" "}
</label>
</a>
</OverlayTrigger>
@@ -71,12 +67,14 @@ export const MainActions = ({
<a
href="#"
id="show-make-bucket"
className="create__btn create__btn--bucket"
className="feba-btn feba-bucket"
onClick={e => {
e.preventDefault()
showMakeBucketModal()
}}
/>
>
<i className="fa fa-hdd-o" />
</a>
</OverlayTrigger>
)}
</Dropdown.Menu>

14
browser/app/js/browser/MainContent.js
View File

@@ -15,27 +15,29 @@
*/
import React from "react"
import MobileHeader from "./MobileHeader"
import Header from "./Header"
import SidebarBackdrop from "./SidebarBackdrop"
import ObjectsSection from "../objects/ObjectsSection"
import MainActions from "./MainActions"
import BucketPolicyModal from "../buckets/BucketPolicyModal"
import MakeBucketModal from "../buckets/MakeBucketModal"
import UploadModal from "../uploads/UploadModal"
import ObjectsBulkActions from "../objects/ObjectsBulkActions"
import Dropzone from "../uploads/Dropzone"
export const MainContent = ({ sidebarOpen }) => (
<section className="content">
<Header />
export const MainContent = () => (
<div className="fe-body">
<ObjectsBulkActions />
<MobileHeader />
<Dropzone>
<Header />
<ObjectsSection />
</Dropzone>
<MainActions />
<BucketPolicyModal />
<MakeBucketModal />
<UploadModal />
<SidebarBackdrop />
</section>
</div>
)
export default MainContent

35
browser/app/js/browser/SidebarBackdrop.js → browser/app/js/browser/MobileHeader.js
View File

@@ -15,17 +15,34 @@
*/
import React from "react"
import classNames from "classnames"
import { connect } from "react-redux"
import logo from "../../img/logo.svg"
import * as actionsCommon from "./actions"
export const SidebarBackdrop = ({ sidebarOpen, toggleSidebar }) => (
<div
className="sidebar-backdrop"
onClick={e => {
e.stopPropagation()
toggleSidebar()
}}
/>
export const MobileHeader = ({ sidebarOpen, toggleSidebar }) => (
<header className="fe-header-mobile hidden-lg hidden-md">
<div
id="sidebar-toggle"
className={
"feh-trigger " +
classNames({
"feht-toggled": sidebarOpen
})
}
onClick={e => {
e.stopPropagation()
toggleSidebar()
}}
>
<div className="feht-lines">
<div className="top" />
<div className="center" />
<div className="bottom" />
</div>
</div>
<img className="mh-logo" src={logo} alt="" />
</header>
)
const mapStateToProps = state => {
@@ -40,4 +57,4 @@ const mapDispatchToProps = dispatch => {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SidebarBackdrop)
export default connect(mapStateToProps, mapDispatchToProps)(MobileHeader)

37
browser/app/js/browser/SideBar.js
View File

@@ -16,38 +16,37 @@
import React from "react"
import classNames from "classnames"
import ClickOutHandler from "react-onclickout"
import { connect } from "react-redux"
import logo from "../../img/logo.svg"
import Dropdown from "react-bootstrap/lib/Dropdown"
import BucketSearch from "../buckets/BucketSearch"
import BucketList from "../buckets/BucketList"
import StorageInfo from "./StorageInfo"
import Host from "./Host"
import * as actionsCommon from "./actions"
import web from "../web"
export const SideBar = ({ sidebarOpen }) => {
export const SideBar = ({ sidebarOpen, clickOutside }) => {
return (
<aside
className={classNames({
sidebar: true,
"sidebar--toggled": sidebarOpen
})}
>
<div className="sidebar__inner">
<div className="logo">
<img className="logo__img" src={logo} alt="" />
<div className="logo__title">
<h2>Minio Browser</h2>
<Host />
</div>
<ClickOutHandler onClickOut={clickOutside}>
<div
className={classNames({
"fe-sidebar": true,
toggled: sidebarOpen
})}
>
<div className="fes-header clearfix hidden-sm hidden-xs">
<img src={logo} alt="" />
<h2>Minio Browser</h2>
</div>
<div className="buckets">
<div className="fes-list">
{web.LoggedIn() && <BucketSearch />}
<BucketList />
</div>
<StorageInfo />
<Host />
</div>
</aside>
</ClickOutHandler>
)
}
@@ -59,7 +58,7 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar())
clickOutside: () => dispatch(actionsCommon.closeSidebar())
}
}

43
browser/app/js/browser/SidebarToggle.js
View File

@@ -1,43 +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 * as actionsCommon from "./actions"
export const SidebarToggle = ({ sidebarOpen, toggleSidebar }) => (
<button
className="toolbar__item zmdi zmdi-menu"
onClick={e => {
e.stopPropagation()
toggleSidebar()
}}
/>
)
const mapStateToProps = state => {
return {
sidebarOpen: state.browser.sidebarOpen
}
}
const mapDispatchToProps = dispatch => {
return {
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggle)

21
browser/app/js/browser/StorageInfo.js
View File

@@ -28,15 +28,22 @@ export class StorageInfo extends React.Component {
const { total, free } = this.props.storageInfo
const used = total - free
const usedPercent = used / total * 100 + "%"
const freePercent = free * 100 / total
return (
<div className="storage hidden-sm hidden-xs">
<small>
{humanize.filesize(total - free)} of {humanize.filesize(total)} Used
</small>
<div className="storage__progress">
<span style={{ width: usedPercent }} />
<div className="feh-usage">
<div className="fehu-chart">
<div style={{ width: usedPercent }} />
</div>
<ul>
<li>
<span>Used: </span>
{humanize.filesize(total - free)}
</li>
<li className="pull-right">
<span>Free: </span>
{humanize.filesize(total - used)}
</li>
</ul>
</div>
)
}

2
browser/app/js/browser/__tests__/AboutModal.test.js
View File

@@ -35,7 +35,7 @@ describe("AboutModal", () => {
const wrapper = shallow(
<AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
)
wrapper.find("i").simulate("click")
wrapper.find("button").simulate("click")
expect(hideAbout).toHaveBeenCalled()
})
})

2
browser/app/js/browser/__tests__/Browser.test.js
View File

@@ -24,6 +24,6 @@ const mockStore = configureStore()
describe("Browser", () => {
it("should render without crashing", () => {
const store = mockStore()
shallow(<Browser store={store} />)
shallow(<Browser store={store}/>)
})
})

8
browser/app/js/browser/__tests__/BrowserDropdown.test.js
View File

@@ -47,9 +47,7 @@ describe("BrowserDropdown", () => {
const wrapper = shallow(
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
)
wrapper.find("#show-about").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("#show-about").simulate("click", { preventDefault: jest.fn() })
wrapper.update()
expect(wrapper.state("showAboutModal")).toBeTruthy()
expect(wrapper.find("AboutModal").length).toBe(1)
@@ -59,9 +57,7 @@ describe("BrowserDropdown", () => {
const wrapper = shallow(
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
)
wrapper.find("#logout").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("#logout").simulate("click", { preventDefault: jest.fn() })
expect(window.location.pathname.endsWith("/login")).toBeTruthy()
})
})

41
browser/app/js/browser/__tests__/ChangePasswordModal.test.js
View File

@@ -20,24 +20,16 @@ import { ChangePasswordModal } from "../ChangePasswordModal"
jest.mock("../../web", () => ({
GetAuth: jest.fn(() => {
return Promise.resolve({
accessKey: "test1",
secretKey: "test2"
})
return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
}),
GenerateAuth: jest.fn(() => {
return Promise.resolve({
accessKey: "gen1",
secretKey: "gen2"
})
return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
}),
SetAuth: jest.fn(({ accessKey, secretKey }) => {
if (accessKey == "test3" && secretKey == "test4") {
return Promise.resolve({})
} else {
return Promise.reject({
message: "Error"
})
return Promise.reject({ message: "Error" })
}
})
}))
@@ -48,9 +40,7 @@ describe("ChangePasswordModal", () => {
memory: "test",
platform: "test",
runtime: "test",
info: {
isEnvCreds: false
}
info: { isEnvCreds: false }
}
it("should render without crashing", () => {
@@ -66,12 +56,7 @@ describe("ChangePasswordModal", () => {
})
it("should show readonly keys when isEnvCreds is true", () => {
const newServerInfo = {
...serverInfo,
info: {
isEnvCreds: true
}
}
const newServerInfo = { ...serverInfo, info: { isEnvCreds: true } }
const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
expect(wrapper.state("accessKey")).toBe("xxxxxxxxx")
expect(wrapper.state("secretKey")).toBe("xxxxxxxxx")
@@ -95,16 +80,12 @@ describe("ChangePasswordModal", () => {
const wrapper = shallow(
<ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
)
wrapper.find("#accessKey").simulate("change", {
target: {
value: "test3"
}
})
wrapper.find("#secretKey").simulate("change", {
target: {
value: "test4"
}
})
wrapper
.find("#accessKey")
.simulate("change", { target: { value: "test3" } })
wrapper
.find("#secretKey")
.simulate("change", { target: { value: "test4" } })
wrapper.find("#update-keys").simulate("click")
setImmediate(() => {
expect(showAlert).toHaveBeenCalledWith({

17
browser/app/js/browser/__tests__/Header.test.js
View File

@@ -18,8 +18,25 @@ import React from "react"
import { shallow } from "enzyme"
import Header from "../Header"
jest.mock("../../web", () => ({
LoggedIn: jest
.fn(() => true)
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
}))
describe("Header", () => {
it("should render without crashing", () => {
shallow(<Header />)
})
it("should render Login button when the user has not LoggedIn", () => {
const wrapper = shallow(<Header />)
expect(wrapper.find("a").text()).toBe("Login")
})
it("should render StorageInfo and BrowserDropdown when the user has LoggedIn", () => {
const wrapper = shallow(<Header />)
expect(wrapper.find("Connect(BrowserDropdown)").length).toBe(1)
expect(wrapper.find("Connect(StorageInfo)").length).toBe(1)
})
})

72
browser/app/js/browser/__tests__/Login.test.js
View File

@@ -19,12 +19,9 @@ import { shallow, mount } from "enzyme"
import { Login } from "../Login"
import web from "../../web"
jest.mock("../../web", () => ({
jest.mock('../../web', () => ({
Login: jest.fn(() => {
return Promise.resolve({
token: "test",
uiVersion: "2018-02-01T01:17:47Z"
})
return Promise.resolve({ token: "test", uiVersion: "2018-02-01T01:17:47Z" })
}),
LoggedIn: jest.fn()
}))
@@ -33,87 +30,70 @@ describe("Login", () => {
const dispatchMock = jest.fn()
const showAlertMock = jest.fn()
const clearAlertMock = jest.fn()
it("should render without crashing", () => {
shallow(
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger" }}
showAlert={showAlertMock}
clearAlert={clearAlertMock}
/>
)
shallow(<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger"}}
showAlert={showAlertMock}
clearAlert={clearAlertMock}
/>)
})
it("should initially have the is-guest class", () => {
const wrapper = shallow(
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger" }}
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger"}}
showAlert={showAlertMock}
clearAlert={clearAlertMock}
/>,
{
attachTo: document.body
}
{ attachTo: document.body }
)
expect(document.body.classList.contains("is-guest")).toBeTruthy()
})
it("should throw an alert if the keys are empty in login form", () => {
const wrapper = mount(
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger" }}
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger"}}
showAlert={showAlertMock}
clearAlert={clearAlertMock}
/>,
{
attachTo: document.body
}
{ attachTo: document.body }
)
// case where both keys are empty - displays the second warning
wrapper.find("form").simulate("submit")
expect(showAlertMock).toHaveBeenCalledWith(
"danger",
"Secret Key cannot be empty"
)
expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
// case where access key is empty
document.getElementById("secretKey").value = "secretKey"
wrapper.find("form").simulate("submit")
expect(showAlertMock).toHaveBeenCalledWith(
"danger",
"Access Key cannot be empty"
)
expect(showAlertMock).toHaveBeenCalledWith("danger", "Access Key cannot be empty")
// case where secret key is empty
document.getElementById("accessKey").value = "accessKey"
wrapper.find("form").simulate("submit")
expect(showAlertMock).toHaveBeenCalledWith(
"danger",
"Secret Key cannot be empty"
)
expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
})
it("should call web.Login with correct arguments if both keys are entered", () => {
const wrapper = mount(
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger" }}
<Login
dispatch={dispatchMock}
alert={{ show: false, type: "danger"}}
showAlert={showAlertMock}
clearAlert={clearAlertMock}
/>,
{
attachTo: document.body
}
{ attachTo: document.body }
)
document.getElementById("accessKey").value = "accessKey"
document.getElementById("secretKey").value = "secretKey"
wrapper.find("form").simulate("submit")
expect(web.Login).toHaveBeenCalledWith({
username: "accessKey",
password: "secretKey"
"username": "accessKey",
"password": "secretKey"
})
})
})

14
browser/app/js/browser/__tests__/MainActions.test.js
View File

@@ -54,23 +54,19 @@ describe("MainActions", () => {
const wrapper = shallow(
<MainActions showMakeBucketModal={showMakeBucketModal} />
)
wrapper.find("#show-make-bucket").simulate("click", {
preventDefault: jest.fn()
})
wrapper
.find("#show-make-bucket")
.simulate("click", { preventDefault: jest.fn() })
expect(showMakeBucketModal).toHaveBeenCalled()
})
it("should call uploadFile when a file is selected for upload", () => {
const uploadFile = jest.fn()
const wrapper = shallow(<MainActions uploadFile={uploadFile} />)
const file = new Blob(["file content"], {
type: "text/plain"
})
const file = new Blob(["file content"], { type: "text/plain" })
wrapper.find("#file-input").simulate("change", {
preventDefault: jest.fn(),
target: {
files: [file]
}
target: { files: [file] }
})
expect(uploadFile).toHaveBeenCalledWith(file)
})

14
browser/app/js/browser/__tests__/SidebarToggle.test.js → browser/app/js/browser/__tests__/MobileHeader.test.js
View File

@@ -16,21 +16,21 @@
import React from "react"
import { shallow } from "enzyme"
import { SidebarToggle } from "../SidebarToggle"
import { MobileHeader } from "../MobileHeader"
describe("SidebarToggle", () => {
describe("Bucket", () => {
it("should render without crashing", () => {
shallow(<SidebarToggle sidebarOpen={false} />)
shallow(<MobileHeader sidebarOpen={false} />)
})
it("should toggleSidebar when trigger is clicked", () => {
const toggleSidebar = jest.fn()
const wrapper = shallow(
<SidebarToggle sidebarOpen={false} toggleSidebar={toggleSidebar} />
<MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
)
wrapper.find("button").simulate("click", {
stopPropagation: jest.fn()
})
wrapper
.find("#sidebar-toggle")
.simulate("click", { stopPropagation: jest.fn() })
expect(toggleSidebar).toHaveBeenCalled()
})
})

7
browser/app/js/browser/__tests__/SideBar.test.js
View File

@@ -31,4 +31,11 @@ describe("SideBar", () => {
const wrapper = shallow(<SideBar />)
expect(wrapper.find("Connect(BucketSearch)").length).toBe(0)
})
it("should call clickOutside when the user clicks outside the sidebar", () => {
const clickOutside = jest.fn()
const wrapper = shallow(<SideBar clickOutside={clickOutside} />)
wrapper.simulate("clickOut", { preventDefault: jest.fn() })
expect(clickOutside).toHaveBeenCalled()
})
})

15
browser/app/js/browser/__tests__/actions.test.js
View File

@@ -20,12 +20,7 @@ import * as actionsCommon from "../actions"
jest.mock("../../web", () => ({
StorageInfo: jest.fn(() => {
return Promise.resolve({
storageInfo: {
Total: 100,
Free: 60
}
})
return Promise.resolve({ storageInfo: { Total: 100, Free: 60 } })
}),
ServerInfo: jest.fn(() => {
return Promise.resolve({
@@ -45,13 +40,7 @@ describe("Common actions", () => {
it("creates common/SET_STORAGE_INFO after fetching the storage details ", () => {
const store = mockStore()
const expectedActions = [
{
type: "common/SET_STORAGE_INFO",
storageInfo: {
total: 100,
free: 60
}
}
{ type: "common/SET_STORAGE_INFO", storageInfo: { total: 100, free: 60 } }
]
return store.dispatch(actionsCommon.fetchStorageInfo()).then(() => {
const actions = store.getActions()

18
browser/app/js/browser/__tests__/reducer.test.js
View File

@@ -32,9 +32,7 @@ describe("common reducer", () => {
it("should handle TOGGLE_SIDEBAR", () => {
expect(
reducer(
{
sidebarOpen: false
},
{ sidebarOpen: false },
{
type: actionsCommon.TOGGLE_SIDEBAR
}
@@ -47,9 +45,7 @@ describe("common reducer", () => {
it("should handle CLOSE_SIDEBAR", () => {
expect(
reducer(
{
sidebarOpen: true
},
{ sidebarOpen: true },
{
type: actionsCommon.CLOSE_SIDEBAR
}
@@ -65,17 +61,11 @@ describe("common reducer", () => {
{},
{
type: actionsCommon.SET_STORAGE_INFO,
storageInfo: {
total: 100,
free: 40
}
storageInfo: { total: 100, free: 40 }
}
)
).toEqual({
storageInfo: {
total: 100,
free: 40
}
storageInfo: { total: 100, free: 40 }
})
})

10
browser/app/js/browser/reducer.js
View File

@@ -19,10 +19,7 @@ import * as actionsCommon from "./actions"
export default (
state = {
sidebarOpen: false,
storageInfo: {
total: 0,
free: 0
},
storageInfo: { total: 0, free: 0 },
serverInfo: {}
},
action
@@ -41,10 +38,7 @@ export default (
storageInfo: action.storageInfo
})
case actionsCommon.SET_SERVER_INFO:
return {
...state,
serverInfo: action.serverInfo
}
return { ...state, serverInfo: action.serverInfo }
default:
return state
}

18
browser/app/js/buckets/Bucket.js
View File

@@ -20,19 +20,25 @@ import BucketDropdown from "./BucketDropdown"
export const Bucket = ({ bucket, isActive, selectBucket }) => {
return (
<div
<li
className={classNames({
buckets__item: true,
"buckets__item--active": isActive
active: isActive
})}
onClick={e => {
e.preventDefault()
selectBucket(bucket)
}}
>
<a href="">{bucket}</a>
<BucketDropdown bucket={bucket} />
</div>
<a
href=""
className={classNames({
"fesli-loading": false
})}
>
{bucket}
</a>
<BucketDropdown bucket={bucket}/>
</li>
)
}

56
browser/app/js/buckets/BucketDropdown.js
View File

@@ -19,8 +19,7 @@ import classNames from "classnames"
import { connect } from "react-redux"
import * as actionsBuckets from "./actions"
import { getCurrentBucket } from "./selectors"
import { Dropdown } from "react-bootstrap"
import { MenuItem } from "react-bootstrap"
import Dropdown from "react-bootstrap/lib/Dropdown"
export class BucketDropdown extends React.Component {
constructor(props) {
@@ -45,35 +44,38 @@ export class BucketDropdown extends React.Component {
render() {
const { bucket, showBucketPolicy, deleteBucket, currentBucket } = this.props
return (
<Dropdown
pullRight
open={this.state.showBucketDropdown}
onToggle={this.toggleDropdown.bind(this)}
className="buckets__item__actions"
<Dropdown
open = {this.state.showBucketDropdown}
onToggle = {this.toggleDropdown.bind(this)}
className="bucket-dropdown"
id="bucket-dropdown"
>
<Dropdown.Toggle noCaret className="dropdown-toggle--icon">
<Dropdown.Toggle noCaret>
<i className="zmdi zmdi-more-vert" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem
onClick={e => {
e.stopPropagation()
showBucketPolicy()
}}
>
{" "}
Edit Policy
</MenuItem>
<MenuItem
onClick={e => {
e.stopPropagation()
deleteBucket(bucket)
}}
>
{" "}
Delete Bucket
</MenuItem>
<Dropdown.Menu className="dropdown-menu-right">
<li>
<a
onClick={e => {
e.stopPropagation()
this.toggleDropdown()
showBucketPolicy()
}}
>
Edit policy
</a>
</li>
<li>
<a
onClick={e => {
e.stopPropagation()
this.toggleDropdown()
deleteBucket(bucket)
}}
>
Delete
</a>
</li>
</Dropdown.Menu>
</Dropdown>
)

49
browser/app/js/buckets/BucketList.js
View File

@@ -17,28 +17,14 @@
import React from "react"
import { connect } from "react-redux"
import { Scrollbars } from "react-custom-scrollbars"
import InfiniteScroll from "react-infinite-scroller"
import * as actionsBuckets from "./actions"
import { getFilteredBuckets } from "./selectors"
import { getVisibleBuckets } from "./selectors"
import BucketContainer from "./BucketContainer"
import web from "../web"
import history from "../history"
import { pathSlice } from "../utils"
export class BucketList extends React.Component {
constructor(props) {
super(props)
this.state = {
page: 1
}
}
componentWillReceiveProps(nexProps) {
if (this.props.filter != nexProps.filter) {
this.setState({
page: 1
})
}
}
componentWillMount() {
const { fetchBuckets, setBucketList, selectBucket } = this.props
if (web.LoggedIn()) {
@@ -53,29 +39,19 @@ export class BucketList extends React.Component {
}
}
}
loadNextPage() {
this.setState({
page: this.state.page + 1
})
}
render() {
const { filteredBuckets } = this.props
const visibleBuckets = filteredBuckets.slice(0, this.state.page * 100)
const { visibleBuckets } = this.props
return (
<div className="buckets__list">
<InfiniteScroll
pageStart={0}
loadMore={this.loadNextPage.bind(this)}
hasMore={filteredBuckets.length > visibleBuckets.length}
useWindow={false}
element="div"
initialLoad={false}
className="buckets__scroll"
<div className="fesl-inner">
<Scrollbars
renderTrackVertical={props => <div className="scrollbar-vertical" />}
>
{visibleBuckets.map(bucket => (
<BucketContainer key={bucket} bucket={bucket} />
))}
</InfiniteScroll>
<ul>
{visibleBuckets.map(bucket => (
<BucketContainer key={bucket} bucket={bucket} />
))}
</ul>
</Scrollbars>
</div>
)
}
@@ -83,8 +59,7 @@ export class BucketList extends React.Component {
const mapStateToProps = state => {
return {
filteredBuckets: getFilteredBuckets(state),
filter: state.buckets.filter
visibleBuckets: getVisibleBuckets(state)
}
}

37
browser/app/js/buckets/BucketPolicyModal.js
View File

@@ -21,29 +21,24 @@ import * as actionsBuckets from "./actions"
import PolicyInput from "./PolicyInput"
import Policy from "./Policy"
export const BucketPolicyModal = ({
showBucketPolicy,
currentBucket,
hideBucketPolicy,
policies
}) => {
export const BucketPolicyModal = ({ showBucketPolicy, currentBucket, hideBucketPolicy, policies }) => {
return (
<Modal
className="policy"
animation={false}
show={showBucketPolicy}
onHide={hideBucketPolicy}
<Modal className="modal-policy"
animation={ false }
show={ showBucketPolicy }
onHide={ hideBucketPolicy }
>
<Modal.Header>
Bucket Policy
<small>Bucket Name: {currentBucket}</small>
<i className="close" onClick={hideBucketPolicy} />
</Modal.Header>
<div className="policy__content">
<ModalHeader>
Bucket Policy (
{ currentBucket })
<button className="close close-alt" onClick={ hideBucketPolicy }>
<span>×</span>
</button>
</ModalHeader>
<div className="pm-body">
<PolicyInput />
{policies.map((policy, i) => (
<Policy key={i} prefix={policy.prefix} policy={policy.policy} />
))}
{ policies.map((policy, i) => <Policy key={ i } prefix={ policy.prefix } policy={ policy.policy } />
) }
</div>
</Modal>
)
@@ -63,4 +58,4 @@ const mapDispatchToProps = dispatch => {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)
export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)

22
browser/app/js/buckets/BucketSearch.js
View File

@@ -19,17 +19,17 @@ import { connect } from "react-redux"
import * as actionsBuckets from "./actions"
export const BucketSearch = ({ onChange }) => (
<div className="buckets__search">
<div className="form-group form-group--icon">
<i className="form-group__icon zmdi zmdi-search" />
<input
className="form-group__field"
type="text"
onChange={e => onChange(e.target.value)}
placeholder="Search Buckets..."
/>
<i className="form-group__helper" />
</div>
<div
className="input-group ig-dark ig-left ig-search"
style={{ display: "block" }}
>
<input
className="ig-text"
type="text"
onChange={e => onChange(e.target.value)}
placeholder="Search Buckets..."
/>
<i className="ig-helpers" />
</div>
)

22
browser/app/js/buckets/MakeBucketModal.js
View File

@@ -45,32 +45,30 @@ export class MakeBucketModal extends React.Component {
const { showMakeBucketModal } = this.props
return (
<Modal
className="create-bucket"
className="modal-create-bucket"
bsSize="small"
animation={false}
show={showMakeBucketModal}
onHide={this.hideModal.bind(this)}
>
<i className="close" onClick={this.hideModal.bind(this)} />
<Modal.Body>
<button className="close close-alt" onClick={this.hideModal.bind(this)}>
<span>×</span>
</button>
<ModalBody>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="form-group form-group--centered">
<div className="input-group">
<input
className="form-group__field"
className="ig-text"
type="text"
placeholder="Bucket Name"
value={this.state.bucketName}
onChange={e =>
this.setState({
bucketName: e.target.value
})
}
onChange={e => this.setState({ bucketName: e.target.value })}
autoFocus
/>
<i className="form-group__helper" />
<i className="ig-helpers" />
</div>
</form>
</Modal.Body>
</ModalBody>
</Modal>
)
}

76
browser/app/js/buckets/Policy.js
View File

@@ -14,8 +14,11 @@
* limitations under the License.
*/
import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
import React from "react"
import { connect } from "react-redux"
import classnames from "classnames"
import * as actionsBuckets from "./actions"
import * as actionsAlert from "../alert/actions"
import web from "../web"
@@ -23,55 +26,51 @@ import web from "../web"
export class Policy extends React.Component {
removePolicy(e) {
e.preventDefault()
const { currentBucket, prefix, fetchPolicies, showAlert } = this.props
web
.SetBucketPolicy({
const {currentBucket, prefix, fetchPolicies, showAlert} = this.props
web.
SetBucketPolicy({
bucketName: currentBucket,
prefix: prefix,
policy: "none"
policy: 'none'
})
.then(() => {
fetchPolicies(currentBucket)
})
.catch(e => showAlert("danger", e.message))
.catch(e => showAlert('danger', e.message))
}
render() {
const { policy, prefix } = this.props
const {policy, prefix} = this.props
let newPrefix = prefix
if (newPrefix === "") newPrefix = "*"
let policyUpdated =
policy == "readonly"
? "Read Only"
: policy == "writeonly"
? "Write Only"
: policy == "readwrite" ? "Read and Write" : ""
if (newPrefix === '')
newPrefix = '*'
return (
<div className="policy__row">
<div className="form-group">
<input
type="text"
value={newPrefix}
className="form-group__field form-group__field--static"
readOnly
/>
<div className="pmb-list">
<div className="pmbl-item">
{ newPrefix }
</div>
<div className="form-group policy__access">
<input
type="text"
value={policyUpdated}
className="form-group__field form-group__field--static"
readOnly
/>
<div className="pmbl-item">
<select className="form-control"
disabled
value={ policy }>
<option value={ READ_ONLY }>
Read Only
</option>
<option value={ WRITE_ONLY }>
Write Only
</option>
<option value={ READ_WRITE }>
Read and Write
</option>
</select>
</div>
<div className="pmbl-item">
<button className="btn btn-block btn-danger" onClick={ this.removePolicy.bind(this) }>
Remove
</button>
</div>
<button
className="btn btn--sm btn--danger"
onClick={this.removePolicy.bind(this)}
>
Remove
</button>
</div>
)
}
@@ -87,13 +86,8 @@ const mapDispatchToProps = dispatch => {
return {
fetchPolicies: bucket => dispatch(actionsBuckets.fetchPolicies(bucket)),
showAlert: (type, message) =>
dispatch(
actionsAlert.set({
type: type,
message: message
})
)
dispatch(actionsAlert.set({ type: type, message: message }))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Policy)
export default connect(mapStateToProps, mapDispatchToProps)(Policy)

73
browser/app/js/buckets/PolicyInput.js
View File

@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { READ_ONLY, WRITE_ONLY, READ_WRITE } from "../constants"
import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
import React from "react"
import { connect } from "react-redux"
@@ -37,61 +37,61 @@ export class PolicyInput extends React.Component {
handlePolicySubmit(e) {
e.preventDefault()
const { currentBucket, fetchPolicies, showAlert } = this.props
if (this.prefix.value === "*") this.prefix.value = ""
if (this.prefix.value === "*")
this.prefix.value = ""
let policyAlreadyExists = this.props.policies.some(
elem =>
this.prefix.value === elem.prefix && this.policy.value === elem.policy
elem => this.prefix.value === elem.prefix && this.policy.value === elem.policy
)
if (policyAlreadyExists) {
showAlert("danger", "Policy for this prefix already exists.")
return
}
web
.SetBucketPolicy({
web.
SetBucketPolicy({
bucketName: currentBucket,
prefix: this.prefix.value,
policy: this.policy.value
})
.then(() => {
fetchPolicies(currentBucket)
this.prefix.value = ""
this.prefix.value = ''
})
.catch(e => showAlert("danger", e.message))
}
render() {
return (
<div className="policy__row policy__row--add">
<div className="form-group">
<input
<header className="pmb-list">
<div className="pmbl-item">
<input
type="text"
ref={prefix => (this.prefix = prefix)}
className="form-group__field"
ref={ prefix => this.prefix = prefix }
className="form-control"
placeholder="Prefix"
/>
<i className="form-group__helper" />
</div>
<div className="form-group policy__access">
<select
ref={policy => (this.policy = policy)}
className="form-group__field select"
>
<option value={READ_ONLY}>Read Only</option>
<option value={WRITE_ONLY}>Write Only</option>
<option value={READ_WRITE}>Read and Write</option>
<div className="pmbl-item">
<select ref={ policy => this.policy = policy } className="form-control">
<option value={ READ_ONLY }>
Read Only
</option>
<option value={ WRITE_ONLY }>
Write Only
</option>
<option value={ READ_WRITE }>
Read and Write
</option>
</select>
<i className="form-group__helper" />
</div>
<button
className="btn btn--sm btn--primary"
onClick={this.handlePolicySubmit.bind(this)}
>
Add
</button>
</div>
<div className="pmbl-item">
<button className="btn btn-block btn-primary" onClick={ this.handlePolicySubmit.bind(this) }>
Add
</button>
</div>
</header>
)
}
}
@@ -108,13 +108,8 @@ const mapDispatchToProps = dispatch => {
fetchPolicies: bucket => dispatch(actionsBuckets.fetchPolicies(bucket)),
setPolicies: policies => dispatch(actionsBuckets.setPolicies(policies)),
showAlert: (type, message) =>
dispatch(
actionsAlert.set({
type: type,
message: message
})
)
dispatch(actionsAlert.set({ type: type, message: message }))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PolicyInput)
export default connect(mapStateToProps, mapDispatchToProps)(PolicyInput)

6
browser/app/js/buckets/__tests__/Bucket.test.js
View File

@@ -28,14 +28,12 @@ describe("Bucket", () => {
const wrapper = shallow(
<Bucket bucket={"test"} selectBucket={selectBucket} />
)
wrapper.find("div").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("li").simulate("click", { preventDefault: jest.fn() })
expect(selectBucket).toHaveBeenCalledWith("test")
})
it("should highlight the selected bucket", () => {
const wrapper = shallow(<Bucket bucket={"test"} isActive={true} />)
expect(wrapper.find("div").hasClass("buckets__item--active")).toBeTruthy()
expect(wrapper.find("li").hasClass("active")).toBeTruthy()
})
})

22
browser/app/js/buckets/__tests__/BucketContainer.test.js
View File

@@ -31,23 +31,21 @@ describe("BucketContainer", () => {
})
store.dispatch = jest.fn()
})
it("should render without crashing", () => {
shallow(<BucketContainer store={store} />)
shallow(<BucketContainer store={store}/>)
})
it("maps state and dispatch to props", () => {
const wrapper = shallow(<BucketContainer store={store} />)
expect(wrapper.props()).toEqual(
expect.objectContaining({
isActive: expect.any(Boolean),
selectBucket: expect.any(Function)
})
)
it('maps state and dispatch to props', () => {
const wrapper = shallow(<BucketContainer store={store}/>)
expect(wrapper.props()).toEqual(expect.objectContaining({
isActive: expect.any(Boolean),
selectBucket: expect.any(Function)
}))
})
it("maps selectBucket to dispatch action", () => {
const wrapper = shallow(<BucketContainer store={store} />)
it('maps selectBucket to dispatch action', () => {
const wrapper = shallow(<BucketContainer store={store}/>)
wrapper.props().selectBucket()
expect(store.dispatch).toHaveBeenCalled()
})

22
browser/app/js/buckets/__tests__/BucketDropdown.test.js
View File

@@ -24,9 +24,13 @@ describe("BucketDropdown", () => {
})
it("should call toggleDropdown on dropdown toggle", () => {
const spy = jest.spyOn(BucketDropdown.prototype, "toggleDropdown")
const wrapper = shallow(<BucketDropdown />)
wrapper.find("Uncontrolled(Dropdown)").simulate("toggle")
const spy = jest.spyOn(BucketDropdown.prototype, 'toggleDropdown')
const wrapper = shallow(
<BucketDropdown />
)
wrapper
.find("Uncontrolled(Dropdown)")
.simulate("toggle")
expect(spy).toHaveBeenCalled()
spy.mockReset()
spy.mockRestore()
@@ -38,11 +42,9 @@ describe("BucketDropdown", () => {
<BucketDropdown showBucketPolicy={showBucketPolicy} />
)
wrapper
.find("MenuItem")
.find("li a")
.at(0)
.simulate("click", {
stopPropagation: jest.fn()
})
.simulate("click", { stopPropagation: jest.fn() })
expect(showBucketPolicy).toHaveBeenCalled()
})
@@ -52,11 +54,9 @@ describe("BucketDropdown", () => {
<BucketDropdown bucket={"test"} deleteBucket={deleteBucket} />
)
wrapper
.find("MenuItem")
.find("li a")
.at(1)
.simulate("click", {
stopPropagation: jest.fn()
})
.simulate("click", { stopPropagation: jest.fn() })
expect(deleteBucket).toHaveBeenCalledWith("test")
})
})

6
browser/app/js/buckets/__tests__/BucketList.test.js
View File

@@ -29,13 +29,13 @@ jest.mock("../../web", () => ({
describe("BucketList", () => {
it("should render without crashing", () => {
const fetchBuckets = jest.fn()
shallow(<BucketList filteredBuckets={[]} fetchBuckets={fetchBuckets} />)
shallow(<BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />)
})
it("should call fetchBuckets before component is mounted", () => {
const fetchBuckets = jest.fn()
const wrapper = shallow(
<BucketList filteredBuckets={[]} fetchBuckets={fetchBuckets} />
<BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />
)
expect(fetchBuckets).toHaveBeenCalled()
})
@@ -46,7 +46,7 @@ describe("BucketList", () => {
history.push("/bk1/pre1")
const wrapper = shallow(
<BucketList
filteredBuckets={[]}
visibleBuckets={[]}
setBucketList={setBucketList}
selectBucket={selectBucket}
/>

6
browser/app/js/buckets/__tests__/BucketPolicyModal.test.js
View File

@@ -21,7 +21,7 @@ import { READ_ONLY, WRITE_ONLY, READ_WRITE } from "../../constants"
describe("BucketPolicyModal", () => {
it("should render without crashing", () => {
shallow(<BucketPolicyModal policies={[]} />)
shallow(<BucketPolicyModal policies={[]}/>)
})
it("should call hideBucketPolicy when close button is clicked", () => {
@@ -29,13 +29,13 @@ describe("BucketPolicyModal", () => {
const wrapper = shallow(
<BucketPolicyModal hideBucketPolicy={hideBucketPolicy} policies={[]} />
)
wrapper.find("i.close").simulate("click")
wrapper.find("button").simulate("click")
expect(hideBucketPolicy).toHaveBeenCalled()
})
it("should include the PolicyInput and Policy components when there are any policies", () => {
const wrapper = shallow(
<BucketPolicyModal policies={[{ prefix: "test", policy: READ_ONLY }]} />
<BucketPolicyModal policies={ [{prefix: "test", policy: READ_ONLY}] } />
)
expect(wrapper.find("Connect(PolicyInput)").length).toBe(1)
expect(wrapper.find("Connect(Policy)").length).toBe(1)

6
browser/app/js/buckets/__tests__/BucketSearch.test.js
View File

@@ -26,11 +26,7 @@ describe("BucketSearch", () => {
it("should call onChange with search text", () => {
const onChange = jest.fn()
const wrapper = shallow(<BucketSearch onChange={onChange} />)
wrapper.find("input").simulate("change", {
target: {
value: "test"
}
})
wrapper.find("input").simulate("change", { target: { value: "test" } })
expect(onChange).toHaveBeenCalledWith("test")
})
})

24
browser/app/js/buckets/__tests__/MakeBucketModal.test.js
View File

@@ -28,7 +28,7 @@ describe("MakeBucketModal", () => {
const wrapper = shallow(
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
)
wrapper.find("i.close").simulate("click")
wrapper.find("button").simulate("click")
expect(hideMakeBucketModal).toHaveBeenCalled()
})
@@ -38,12 +38,10 @@ describe("MakeBucketModal", () => {
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
)
wrapper.find("input").simulate("change", {
target: {
value: "test"
}
target: { value: "test" }
})
expect(wrapper.state("bucketName")).toBe("test")
wrapper.find("i.close").simulate("click")
wrapper.find("button").simulate("click")
expect(wrapper.state("bucketName")).toBe("")
})
@@ -57,13 +55,9 @@ describe("MakeBucketModal", () => {
/>
)
wrapper.find("input").simulate("change", {
target: {
value: "test"
}
})
wrapper.find("form").simulate("submit", {
preventDefault: jest.fn()
target: { value: "test" }
})
wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
expect(makeBucket).toHaveBeenCalledWith("test")
})
@@ -77,13 +71,9 @@ describe("MakeBucketModal", () => {
/>
)
wrapper.find("input").simulate("change", {
target: {
value: "test"
}
})
wrapper.find("form").simulate("submit", {
preventDefault: jest.fn()
target: { value: "test" }
})
wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
expect(hideMakeBucketModal).toHaveBeenCalled()
expect(wrapper.state("bucketName")).toBe("")
})

19
browser/app/js/buckets/__tests__/Policy.test.js
View File

@@ -28,31 +28,27 @@ jest.mock("../../web", () => ({
describe("Policy", () => {
it("should render without crashing", () => {
shallow(
<Policy currentBucket={"bucket"} prefix={"foo"} policy={READ_ONLY} />
)
shallow(<Policy currentBucket={"bucket"} prefix={"foo"} policy={READ_ONLY} />)
})
it("should call web.setBucketPolicy and fetchPolicies on submit", () => {
const fetchPolicies = jest.fn()
const wrapper = shallow(
<Policy
<Policy
currentBucket={"bucket"}
prefix={"foo"}
policy={READ_ONLY}
fetchPolicies={fetchPolicies}
/>
)
wrapper.find("button").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
expect(web.SetBucketPolicy).toHaveBeenCalledWith({
bucketName: "bucket",
prefix: "foo",
policy: "none"
})
setImmediate(() => {
expect(fetchPolicies).toHaveBeenCalledWith("bucket")
})
@@ -62,11 +58,6 @@ describe("Policy", () => {
const wrapper = shallow(
<Policy currentBucket={"bucket"} prefix={""} policy={READ_ONLY} />
)
expect(
wrapper
.find("input")
.at(0)
.prop("value")
).toEqual("*")
expect(wrapper.find(".pmbl-item").at(0).text()).toEqual("*")
})
})

44
browser/app/js/buckets/__tests__/PolicyInput.test.js
View File

@@ -29,9 +29,7 @@ jest.mock("../../web", () => ({
describe("PolicyInput", () => {
it("should render without crashing", () => {
const fetchPolicies = jest.fn()
shallow(
<PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies} />
)
shallow(<PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies}/>)
})
it("should call fetchPolicies after the component has mounted", () => {
@@ -47,21 +45,11 @@ describe("PolicyInput", () => {
it("should call web.setBucketPolicy and fetchPolicies on submit", () => {
const fetchPolicies = jest.fn()
const wrapper = shallow(
<PolicyInput
currentBucket={"bucket"}
policies={[]}
fetchPolicies={fetchPolicies}
/>
<PolicyInput currentBucket={"bucket"} policies={[]} fetchPolicies={fetchPolicies}/>
)
wrapper.instance().prefix = {
value: "baz"
}
wrapper.instance().policy = {
value: READ_ONLY
}
wrapper.find("button").simulate("click", {
preventDefault: jest.fn()
})
wrapper.instance().prefix = { value: "baz" }
wrapper.instance().policy = { value: READ_ONLY }
wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
expect(web.SetBucketPolicy).toHaveBeenCalledWith({
bucketName: "bucket",
@@ -77,25 +65,13 @@ describe("PolicyInput", () => {
it("should change the prefix '*' to an empty string", () => {
const fetchPolicies = jest.fn()
const wrapper = shallow(
<PolicyInput
currentBucket={"bucket"}
policies={[]}
fetchPolicies={fetchPolicies}
/>
<PolicyInput currentBucket={"bucket"} policies={[]} fetchPolicies={fetchPolicies}/>
)
wrapper.instance().prefix = {
value: "*"
}
wrapper.instance().policy = {
value: READ_ONLY
}
wrapper.instance().prefix = { value: "*" }
wrapper.instance().policy = { value: READ_ONLY }
wrapper.find("button").simulate("click", {
preventDefault: jest.fn()
})
wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
expect(wrapper.instance().prefix).toEqual({
value: ""
})
expect(wrapper.instance().prefix).toEqual({ value: "" })
})
})

143
browser/app/js/buckets/__tests__/actions.test.js
View File

@@ -17,20 +17,12 @@
import configureStore from "redux-mock-store"
import thunk from "redux-thunk"
import * as actionsBuckets from "../actions"
import * as objectActions from "../../objects/actions"
import history from "../../history"
jest.mock("../../web", () => ({
ListBuckets: jest.fn(() => {
return Promise.resolve({
buckets: [
{
name: "test1"
},
{
name: "test2"
}
]
})
return Promise.resolve({ buckets: [{ name: "test1" }, { name: "test2" }] })
}),
MakeBucket: jest.fn(() => {
return Promise.resolve()
@@ -51,14 +43,8 @@ describe("Buckets actions", () => {
it("creates buckets/SET_LIST and buckets/SET_CURRENT_BUCKET with first bucket after fetching the buckets", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SET_LIST",
buckets: ["test1", "test2"]
},
{
type: "buckets/SET_CURRENT_BUCKET",
bucket: "test1"
}
{ type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
]
return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
const actions = store.getActions()
@@ -70,14 +56,8 @@ describe("Buckets actions", () => {
history.push("/test2")
const store = mockStore()
const expectedActions = [
{
type: "buckets/SET_LIST",
buckets: ["test1", "test2"]
},
{
type: "buckets/SET_CURRENT_BUCKET",
bucket: "test2"
}
{ type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test2" }
]
window.location
return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
@@ -90,14 +70,8 @@ describe("Buckets actions", () => {
history.push("/test3")
const store = mockStore()
const expectedActions = [
{
type: "buckets/SET_LIST",
buckets: ["test1", "test2"]
},
{
type: "buckets/SET_CURRENT_BUCKET",
bucket: "test1"
}
{ type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
]
window.location
return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
@@ -109,10 +83,7 @@ describe("Buckets actions", () => {
it("creates buckets/SET_CURRENT_BUCKET action when selectBucket is called", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SET_CURRENT_BUCKET",
bucket: "test1"
}
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
]
store.dispatch(actionsBuckets.selectBucket("test1"))
const actions = store.getActions()
@@ -122,10 +93,7 @@ describe("Buckets actions", () => {
it("creates buckets/SHOW_MAKE_BUCKET_MODAL for showMakeBucketModal", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SHOW_MAKE_BUCKET_MODAL",
show: true
}
{ type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: true }
]
store.dispatch(actionsBuckets.showMakeBucketModal())
const actions = store.getActions()
@@ -135,10 +103,7 @@ describe("Buckets actions", () => {
it("creates buckets/SHOW_MAKE_BUCKET_MODAL for hideMakeBucketModal", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SHOW_MAKE_BUCKET_MODAL",
show: false
}
{ type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: false }
]
store.dispatch(actionsBuckets.hideMakeBucketModal())
const actions = store.getActions()
@@ -148,10 +113,7 @@ describe("Buckets actions", () => {
it("creates buckets/SHOW_BUCKET_POLICY for showBucketPolicy", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SHOW_BUCKET_POLICY",
show: true
}
{ type: "buckets/SHOW_BUCKET_POLICY", show: true }
]
store.dispatch(actionsBuckets.showBucketPolicy())
const actions = store.getActions()
@@ -161,10 +123,7 @@ describe("Buckets actions", () => {
it("creates buckets/SHOW_BUCKET_POLICY for hideBucketPolicy", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SHOW_BUCKET_POLICY",
show: false
}
{ type: "buckets/SHOW_BUCKET_POLICY", show: false }
]
store.dispatch(actionsBuckets.hideBucketPolicy())
const actions = store.getActions()
@@ -174,10 +133,7 @@ describe("Buckets actions", () => {
it("creates buckets/SET_POLICIES action", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/SET_POLICIES",
policies: ["test1", "test2"]
}
{ type: "buckets/SET_POLICIES", policies: ["test1", "test2"] }
]
store.dispatch(actionsBuckets.setPolicies(["test1", "test2"]))
const actions = store.getActions()
@@ -186,12 +142,7 @@ describe("Buckets actions", () => {
it("creates buckets/ADD action", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/ADD",
bucket: "test"
}
]
const expectedActions = [{ type: "buckets/ADD", bucket: "test" }]
store.dispatch(actionsBuckets.addBucket("test"))
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -199,12 +150,7 @@ describe("Buckets actions", () => {
it("creates buckets/REMOVE action", () => {
const store = mockStore()
const expectedActions = [
{
type: "buckets/REMOVE",
bucket: "test"
}
]
const expectedActions = [{ type: "buckets/REMOVE", bucket: "test" }]
store.dispatch(actionsBuckets.removeBucket("test"))
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -213,14 +159,8 @@ describe("Buckets actions", () => {
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"
}
{ type: "buckets/ADD", bucket: "test1" },
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
]
return store.dispatch(actionsBuckets.makeBucket("test1")).then(() => {
const actions = store.getActions()
@@ -228,37 +168,18 @@ describe("Buckets actions", () => {
})
})
it(
"creates alert/SET, buckets/REMOVE, buckets/SET_LIST and buckets/SET_CURRENT_BUCKET " +
"after deleting the bucket",
() => {
const store = mockStore()
const expectedActions = [
{
type: "alert/SET",
alert: {
id: 0,
message: "Bucket 'test3' has been deleted.",
type: "info"
}
},
{
type: "buckets/REMOVE",
bucket: "test3"
},
{
type: "buckets/SET_LIST",
buckets: ["test1", "test2"]
},
{
type: "buckets/SET_CURRENT_BUCKET",
bucket: "test1"
}
]
return store.dispatch(actionsBuckets.deleteBucket("test3")).then(() => {
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
})
}
)
it("creates alert/SET, buckets/REMOVE, buckets/SET_LIST and buckets/SET_CURRENT_BUCKET " +
"after deleting the bucket", () => {
const store = mockStore()
const expectedActions = [
{ type: "alert/SET", alert: {id: 0, message: "Bucket 'test3' has been deleted.", type: "info"} },
{ type: "buckets/REMOVE", bucket: "test3" },
{ type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
{ type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
]
return store.dispatch(actionsBuckets.deleteBucket("test3")).then(() => {
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
})
})
})

10
browser/app/js/buckets/__tests__/reducer.test.js
View File

@@ -40,9 +40,7 @@ describe("buckets reducer", () => {
it("should handle ADD", () => {
const newState = reducer(
{
list: ["test1", "test2"]
},
{ list: ["test1", "test2"] },
{
type: actions.ADD,
bucket: "test3"
@@ -53,9 +51,7 @@ describe("buckets reducer", () => {
it("should handle REMOVE", () => {
const newState = reducer(
{
list: ["test1", "test2"]
},
{ list: ["test1", "test2"] },
{
type: actions.REMOVE,
bucket: "test2"
@@ -95,7 +91,7 @@ describe("buckets reducer", () => {
})
expect(newState.showBucketPolicy).toBeTruthy()
})
it("should handle SHOW_MAKE_BUCKET_MODAL", () => {
const newState = reducer(undefined, {
type: actions.SHOW_MAKE_BUCKET_MODAL,

8
browser/app/js/buckets/__tests__/selectors.test.js
View File

@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { getFilteredBuckets, getCurrentBucket } from "../selectors"
import { getVisibleBuckets, getCurrentBucket } from "../selectors"
describe("getFilteredBuckets", () => {
describe("getVisibleBuckets", () => {
let state
beforeEach(() => {
state = {
@@ -28,11 +28,11 @@ describe("getFilteredBuckets", () => {
it("should return all buckets if no filter specified", () => {
state.buckets.filter = ""
expect(getFilteredBuckets(state)).toEqual(["test1", "test11", "test2"])
expect(getVisibleBuckets(state)).toEqual(["test1", "test11", "test2"])
})
it("should return all matching buckets if filter is specified", () => {
state.buckets.filter = "test1"
expect(getFilteredBuckets(state)).toEqual(["test1", "test11"])
expect(getVisibleBuckets(state)).toEqual(["test1", "test11"])
})
})

10
browser/app/js/buckets/actions.js
View File

@@ -114,7 +114,7 @@ export const deleteBucket = bucket => {
dispatch(removeBucket(bucket))
dispatch(fetchBuckets())
})
.catch(err => {
.catch(err => {
dispatch(
alertActions.set({
type: "danger",
@@ -153,8 +153,10 @@ export const fetchPolicies = bucket => {
})
.then(res => {
let policies = res.policies
if (policies) dispatch(setPolicies(policies))
else dispatch(setPolicies([]))
if(policies)
dispatch(setPolicies(policies))
else
dispatch(setPolicies([]))
})
.catch(err => {
dispatch(
@@ -180,4 +182,4 @@ export const showBucketPolicy = () => ({
export const hideBucketPolicy = () => ({
type: SHOW_BUCKET_POLICY,
show: false
})
})

2
browser/app/js/buckets/reducer.js
View File

@@ -49,7 +49,7 @@ export default (
case actionsBuckets.REMOVE:
return {
...state,
list: removeBucket(state.list, action)
list: removeBucket(state.list, action),
}
case actionsBuckets.SET_FILTER:
return {

2
browser/app/js/buckets/selectors.js
View File

@@ -19,7 +19,7 @@ import { createSelector } from "reselect"
const bucketsSelector = state => state.buckets.list
const bucketsFilterSelector = state => state.buckets.filter
export const getFilteredBuckets = createSelector(
export const getVisibleBuckets = createSelector(
bucketsSelector,
bucketsFilterSelector,
(buckets, filter) => buckets.filter(bucket => bucket.indexOf(filter) > -1)

26
browser/app/js/components/BrowserUpdate.js
View File

@@ -14,30 +14,22 @@
* limitations under the License.
*/
import React from "react"
import connect from "react-redux/lib/components/connect"
import React from 'react'
import connect from 'react-redux/lib/components/connect'
import Tooltip from "react-bootstrap/lib/Tooltip"
import OverlayTrigger from "react-bootstrap/lib/OverlayTrigger"
import Tooltip from 'react-bootstrap/lib/Tooltip'
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
let BrowserUpdate = ({ latestUiVersion }) => {
let BrowserUpdate = ({latestUiVersion}) => {
// Don't show an update if we're already updated!
if (latestUiVersion === currentUiVersion) return <noscript />
if (latestUiVersion === currentUiVersion) return ( <noscript></noscript> )
return (
<li className="hidden-xs hidden-sm">
<a href="">
<OverlayTrigger
placement="left"
overlay={
<Tooltip id="tt-version-update">
New update available. Click to refresh.
</Tooltip>
}
>
{" "}
<i className="fa fa-refresh" />{" "}
</OverlayTrigger>
<OverlayTrigger placement="left" overlay={ <Tooltip id="tt-version-update">
New update available. Click to refresh.
</Tooltip> }> <i className="fa fa-refresh"></i> </OverlayTrigger>
</a>
</li>
)

2
browser/app/js/jest/__mocks__/fileMock.js
View File

@@ -1 +1 @@
module.exports = "test-file-stub"
module.exports = 'test-file-stub';

4
browser/app/js/jest/setup.js
View File

@@ -18,6 +18,4 @@ import "jest-enzyme"
import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
configure({
adapter: new Adapter()
})
configure({ adapter: new Adapter() })

35
browser/app/js/jsonrpc.js
View File

@@ -14,37 +14,37 @@
* limitations under the License.
*/
import SuperAgent from "superagent-es6-promise"
import url from "url"
import Moment from "moment"
import SuperAgent from 'superagent-es6-promise';
import url from 'url'
import Moment from 'moment'
export default class JSONrpc {
constructor(params) {
this.endpoint = params.endpoint
this.namespace = params.namespace
this.version = "2.0"
this.version = '2.0';
const parsedUrl = url.parse(this.endpoint)
this.host = parsedUrl.hostname
this.path = parsedUrl.path
this.port = parsedUrl.port
switch (parsedUrl.protocol) {
case "http:": {
this.scheme = "http"
case 'http:': {
this.scheme = 'http'
if (parsedUrl.port === 0) {
this.port = 80
}
break
}
case "https:": {
this.scheme = "https"
case 'https:': {
this.scheme = 'https'
if (parsedUrl.port === 0) {
this.port = 443
}
break
}
default: {
throw new Error("Unknown protocol: " + parsedUrl.protocol)
throw new Error('Unknown protocol: ' + parsedUrl.protocol)
}
}
}
@@ -54,34 +54,31 @@ export default class JSONrpc {
options = {}
}
if (!options.id) {
options.id = 1
options.id = 1;
}
if (!options.params) {
options.params = {}
options.params = {};
}
const dataObj = {
id: options.id,
jsonrpc: this.version,
params: options.params ? options.params : {},
method: this.namespace ? this.namespace + "." + method : method
method: this.namespace ? this.namespace + '.' + method : method
}
let requestParams = {
host: this.host,
port: this.port,
path: this.path,
scheme: this.scheme,
method: "POST",
method: 'POST',
headers: {
"Content-Type": "application/json",
"x-amz-date":
Moment()
.utc()
.format("YYYYMMDDTHHmmss") + "Z"
'Content-Type': 'application/json',
'x-amz-date': Moment().utc().format('YYYYMMDDTHHmmss') + 'Z'
}
}
if (token) {
requestParams.headers.Authorization = "Bearer " + token
requestParams.headers.Authorization = 'Bearer ' + token
}
let req = SuperAgent.post(this.endpoint)

2
browser/app/js/loader.js
View File

@@ -19,7 +19,7 @@ let delay = [0, 400]
function handleLoader(i) {
if (i < 2) {
setTimeout(function() {
document.querySelector(".page-loader").classList.add("page-loader--" + i)
document.querySelector(".page-load").classList.add("pl-" + i)
handleLoader(i + 1)
}, delay[i])
}

94
browser/app/js/mime.js
View File

@@ -14,54 +14,30 @@
* limitations under the License.
*/
import mimedb from "mime-types"
import mimedb from 'mime-types'
const isFolder = (name, contentType) => {
if (name.endsWith("/")) return true
if (name.endsWith('/')) return true
return false
}
const isPdf = (name, contentType) => {
if (contentType === "application/pdf") return true
if (contentType === 'application/pdf') return true
return false
}
const isZip = (name, contentType) => {
if (!contentType || !contentType.includes("/")) return false
if (contentType.split("/")[1].includes("zip")) return true
if (!contentType || !contentType.includes('/')) return false
if (contentType.split('/')[1].includes('zip')) return true
return false
}
const isCode = (name, contentType) => {
const codeExt = [
"c",
"cpp",
"go",
"py",
"java",
"rb",
"js",
"pl",
"fs",
"php",
"css",
"less",
"scss",
"coffee",
"net",
"html",
"rs",
"exs",
"scala",
"hs",
"clj",
"el",
"scm",
"lisp",
"asp",
"aspx"
]
const ext = name.split(".").reverse()[0]
const codeExt = ['c', 'cpp', 'go', 'py', 'java', 'rb', 'js', 'pl', 'fs',
'php', 'css', 'less', 'scss', 'coffee', 'net', 'html',
'rs', 'exs', 'scala', 'hs', 'clj', 'el', 'scm', 'lisp',
'asp', 'aspx']
const ext = name.split('.').reverse()[0]
for (var i in codeExt) {
if (ext === codeExt[i]) return true
}
@@ -69,9 +45,9 @@ const isCode = (name, contentType) => {
}
const isExcel = (name, contentType) => {
if (!contentType || !contentType.includes("/")) return false
const types = ["excel", "spreadsheet"]
const subType = contentType.split("/")[1]
if (!contentType || !contentType.includes('/')) return false
const types = ['excel', 'spreadsheet']
const subType = contentType.split('/')[1]
for (var i in types) {
if (subType.includes(types[i])) return true
}
@@ -79,9 +55,9 @@ const isExcel = (name, contentType) => {
}
const isDoc = (name, contentType) => {
if (!contentType || !contentType.includes("/")) return false
const types = ["word", ".document"]
const subType = contentType.split("/")[1]
if (!contentType || !contentType.includes('/')) return false
const types = ['word', '.document']
const subType = contentType.split('/')[1]
for (var i in types) {
if (subType.includes(types[i])) return true
}
@@ -89,42 +65,42 @@ const isDoc = (name, contentType) => {
}
const isPresentation = (name, contentType) => {
if (!contentType || !contentType.includes("/")) return false
var types = ["powerpoint", "presentation"]
const subType = contentType.split("/")[1]
if (!contentType || !contentType.includes('/')) return false
var types = ['powerpoint', 'presentation']
const subType = contentType.split('/')[1]
for (var i in types) {
if (subType.includes(types[i])) return true
}
return false
}
const typeToIcon = type => {
const typeToIcon = (type) => {
return (name, contentType) => {
if (!contentType || !contentType.includes("/")) return false
if (contentType.split("/")[0] === type) return true
if (!contentType || !contentType.includes('/')) return false
if (contentType.split('/')[0] === type) return true
return false
}
}
export const getDataType = (name, contentType) => {
if (contentType === "") {
contentType = mimedb.lookup(name) || "application/octet-stream"
contentType = mimedb.lookup(name) || 'application/octet-stream'
}
const check = [
["folder", isFolder],
["code", isCode],
["audio", typeToIcon("audio")],
["image", typeToIcon("image")],
["video", typeToIcon("video")],
["text", typeToIcon("text")],
["pdf", isPdf],
["zip", isZip],
["excel", isExcel],
["doc", isDoc],
["presentation", isPresentation]
['folder', isFolder],
['code', isCode],
['audio', typeToIcon('audio')],
['image', typeToIcon('image')],
['video', typeToIcon('video')],
['text', typeToIcon('text')],
['pdf', isPdf],
['zip', isZip],
['excel', isExcel],
['doc', isDoc],
['presentation', isPresentation]
]
for (var i in check) {
if (check[i][1](name, contentType)) return check[i][0]
}
return "other"
return 'other'
}

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

@@ -23,7 +23,7 @@ export const DeleteObjectConfirmModal = ({
}) => (
<ConfirmModal
show={true}
icon="zmdi zmdi-alert-octagon"
icon="fa fa-exclamation-triangle mci-red"
text="Are you sure you want to delete?"
sub="This cannot be undone!"
okText="Delete"

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

@@ -0,0 +1,107 @@
/*
* 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)

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

@@ -19,23 +19,37 @@ 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, downloadObject }) => {
export const ObjectContainer = ({
object,
checkedObjectsCount,
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} />
}
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))
}
}
export default connect(undefined, mapDispatchToProps)(ObjectContainer)
export default connect(mapStateToProps, mapDispatchToProps)(ObjectContainer)

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

@@ -15,8 +15,9 @@
*/
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"
@@ -29,20 +30,13 @@ export const ObjectItem = ({
checked,
checkObject,
uncheckObject,
actionButtons,
onClick
}) => {
return (
<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">
<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}
@@ -51,10 +45,11 @@ export const ObjectItem = ({
checked ? uncheckObject(name) : checkObject(name)
}}
/>
<i />
<i className="fis-icon" />
<i className="fis-helper" />
</div>
</div>
<div className="objects__column objects__column--name">
<div className="fesl-item fesl-item-name">
<a
href="#"
onClick={e => {
@@ -65,10 +60,9 @@ export const ObjectItem = ({
{name}
</a>
</div>
<div className="objects__column objects__column--size">{size}</div>
<div className="objects__column objects__column--date">
{lastModified}
</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>
)
}

101
browser/app/js/objects/ObjectsBulkActions.js Normal file
View File

@@ -0,0 +1,101 @@
/*
* 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 classNames from "classnames"
import * as actions from "./actions"
import { getCheckedList } from "./selectors"
import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
export class ObjectsBulkActions extends React.Component {
constructor(props) {
super(props)
this.state = {
showDeleteConfirmation: false
}
}
deleteChecked() {
const { deleteChecked } = this.props
deleteChecked()
this.hideDeleteConfirmModal()
}
hideDeleteConfirmModal() {
this.setState({
showDeleteConfirmation: false
})
}
render() {
const { checkedObjectsCount, downloadChecked, clearChecked } = this.props
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}
/>
{this.state.showDeleteConfirmation && (
<DeleteObjectConfirmModal
deleteObject={this.deleteChecked.bind(this)}
hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
/>
)}
</div>
)
}
}
const mapStateToProps = state => {
return {
checkedObjectsCount: getCheckedList(state).length
}
}
const mapDispatchToProps = dispatch => {
return {
downloadChecked: () => dispatch(actions.downloadCheckedObjects()),
clearChecked: () => dispatch(actions.resetCheckedList()),
deleteChecked: () => dispatch(actions.deleteCheckedObjects())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ObjectsBulkActions)

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

@@ -25,55 +25,59 @@ export const ObjectsHeader = ({
sortLastModifiedOrder,
sortObjects
}) => (
<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 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>
)

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

@@ -18,8 +18,6 @@ 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("/")) {
@@ -28,7 +26,7 @@ export const ObjectsList = ({ objects }) => {
return <ObjectContainer object={object} key={object.name} />
}
})
return <Aux>{list}</Aux>
return <div>{list}</div>
}
export default ObjectsList

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

@@ -15,25 +15,22 @@
*/
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 (
<Aux>
<div className="feb-container">
<InfiniteScroll
pageStart={0}
loadMore={() => loadObjects(true)}
hasMore={isTruncated}
useWindow={false}
element="div"
className="objects__lists"
useWindow={true}
initialLoad={false}
>
<ObjectsList objects={objects} />
@@ -44,7 +41,7 @@ export class ObjectsListContainer extends React.Component {
>
<span>Loading...</span>
</div>
</Aux>
</div>
)
}
}

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

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

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

@@ -32,21 +32,25 @@ export const Path = ({ currentBucket, currentPrefix, selectPrefix }) => {
dirPath.push(dir)
let dirPath_ = dirPath.join("/") + "/"
return (
<a key={i} href="" onClick={e => onPrefixClick(e, dirPath_)}>
{dir}
</a>
<span key={i}>
<a href="" onClick={e => onPrefixClick(e, dirPath_)}>
{dir}
</a>
</span>
)
}
})
}
return (
<nav className="path hidden-xs">
<a onClick={e => onPrefixClick(e, "")} href="">
{currentBucket}
</a>
<h2>
<span className="main">
<a onClick={e => onPrefixClick(e, "")} href="">
{currentBucket}
</a>
</span>
{path}
</nav>
</h2>
)
}

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

@@ -38,21 +38,11 @@ export class ShareObjectModal extends React.Component {
}
}
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)
@@ -78,16 +68,14 @@ export class ShareObjectModal extends React.Component {
expiry
})
const { shareObjectDetails: { object }, shareObject } = this.props
shareObject(object, expiry.days, expiry.hours, expiry.minutes)
const { object, shareObject } = this.props
shareObject(object.name, 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 (
@@ -97,34 +85,32 @@ export class ShareObjectModal extends React.Component {
onHide={hideShareObject}
bsSize="small"
>
<Modal.Header>Share Object</Modal.Header>
<Modal.Body>
<div className="form-group">
<ModalHeader>Share Object</ModalHeader>
<ModalBody>
<div className="input-group copy-text">
<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="form-group"
className="input-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__handle zmdi zmdi-chevron-up"
className="set-expire-increase"
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"
@@ -136,18 +122,18 @@ export class ShareObjectModal extends React.Component {
</div>
<i
id="decrease-days"
className="set-expire__handle zmdi zmdi-chevron-down"
className="set-expire-decrease"
onClick={() => this.updateExpireValue("days", -1)}
/>
</div>
<div className="set-expire__item">
<div className="set-expire-item">
<i
id="increase-hours"
className="set-expire__handle zmdi zmdi-chevron-up"
className="set-expire-increase"
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"
@@ -158,19 +144,19 @@ export class ShareObjectModal extends React.Component {
/>
</div>
<i
className="set-expire__handle zmdi zmdi-chevron-down"
className="set-expire-decrease"
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__handle zmdi zmdi-chevron-up"
className="set-expire-increase"
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"
@@ -182,21 +168,21 @@ export class ShareObjectModal extends React.Component {
</div>
<i
id="decrease-minutes"
className="set-expire__handle zmdi zmdi-chevron-down"
className="set-expire-decrease"
onClick={() => this.updateExpireValue("minutes", -1)}
/>
</div>
</div>
</div>
</Modal.Body>
</ModalBody>
<div className="modal-footer">
<CopyToClipboard
text={window.location.protocol + "//" + shareObjectDetails.url}
onCopy={this.onUrlCopied.bind(this)}
>
<button className="btn btn--link">Copy Link</button>
<button className="btn btn-success">Copy Link</button>
</CopyToClipboard>
<button className="btn btn--link" onClick={hideShareObject}>
<button className="btn btn-link" onClick={hideShareObject}>
Cancel
</button>
</div>
@@ -207,6 +193,7 @@ export class ShareObjectModal extends React.Component {
const mapStateToProps = (state, ownProps) => {
return {
object: ownProps.object,
shareObjectDetails: state.objects.shareObject
}
}
@@ -217,12 +204,7 @@ 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 }))
}
}

144
browser/app/js/objects/Toolbar.js
View File

@@ -1,144 +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 * 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 Toolbar extends React.Component {
constructor(props) {
super(props)
this.state = {
showDeleteConfirmation: false
}
}
deleteChecked() {
const { deleteChecked } = this.props
deleteChecked()
this.hideDeleteConfirmModal()
}
hideDeleteConfirmModal() {
this.setState({
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,
object,
showShareObjectModal
} = this.props
const loggedIn = web.LoggedIn()
return (
<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)}
hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
/>
)}
</div>
)
}
}
const mapStateToProps = state => {
return {
checkedObjects: getCheckedList(state),
checkedObjectsCount: getCheckedList(state).length,
showShareObjectModal: state.objects.shareObject.show
}
}
const mapDispatchToProps = dispatch => {
return {
downloadChecked: () => dispatch(actions.downloadCheckedObjects()),
clearChecked: () => dispatch(actions.resetCheckedList()),
deleteChecked: () => dispatch(actions.deleteCheckedObjects()),
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar()),
shareObject: (object, days, hours, minutes) =>
dispatch(objectsActions.shareObject(object, days, hours, minutes))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Toolbar)

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

@@ -0,0 +1,95 @@
/*
* 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)
})
})

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

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

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

@@ -25,17 +25,13 @@ describe("ObjectItem", () => {
it("should render with content type", () => {
const wrapper = shallow(<ObjectItem name={"test.jpg"} contentType={""} />)
expect(
wrapper.find(".objects__column--select").prop("data-object-type")
).toBe("image")
expect(wrapper.prop("data-type")).toBe("image")
})
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()
})

64
browser/app/js/objects/__tests__/Toolbar.test.js → browser/app/js/objects/__tests__/ObjectsBulkActions.test.js
View File

@@ -16,38 +16,42 @@
import React from "react"
import { shallow } from "enzyme"
import { Toolbar } from "../Toolbar"
import { ObjectsBulkActions } from "../ObjectsBulkActions"
jest.mock("../../web", () => ({
LoggedIn: jest
.fn(() => true)
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
}))
describe("Toolbar", () => {
describe("ObjectsBulkActions", () => {
it("should render without crashing", () => {
shallow(<Toolbar checkedObjectsCount={0} />)
shallow(<ObjectsBulkActions checkedObjectsCount={0} />)
})
it("should render Login button when the user has not LoggedIn", () => {
const wrapper = shallow(<Toolbar checkedObjectsCount={0} />)
expect(wrapper.find("a").text()).toBe("Login")
it("should show actions when checkObjectsCount is more than 0", () => {
const wrapper = shallow(<ObjectsBulkActions checkedObjectsCount={1} />)
expect(wrapper.hasClass("list-actions-toggled")).toBeTruthy()
})
it("should render StorageInfo and BrowserDropdown when the user has LoggedIn", () => {
const wrapper = shallow(<Toolbar checkedObjectsCount={0} />)
expect(wrapper.find("Connect(BrowserDropdown)").length).toBe(1)
it("should call downloadChecked when download button is clicked", () => {
const downloadChecked = jest.fn()
const wrapper = shallow(
<ObjectsBulkActions
checkedObjectsCount={1}
downloadChecked={downloadChecked}
/>
)
wrapper.find("#download-checked").simulate("click")
expect(downloadChecked).toHaveBeenCalled()
})
it("should enable delete action when checkObjectsCount is more than 0", () => {
const wrapper = shallow(<Toolbar checkedObjectsCount={1} />)
expect(wrapper.find(".zmdi-delete").prop("disabled")).toBeFalsy()
it("should call clearChecked when close button is clicked", () => {
const clearChecked = jest.fn()
const wrapper = shallow(
<ObjectsBulkActions checkedObjectsCount={1} clearChecked={clearChecked} />
)
wrapper.find("#close-bulk-actions").simulate("click")
expect(clearChecked).toHaveBeenCalled()
})
it("shoud show DeleteObjectConfirmModal when delete button is clicked", () => {
const wrapper = shallow(<Toolbar checkedObjectsCount={1} />)
wrapper.find("button.zmdi-delete").simulate("click")
it("shoud show DeleteObjectConfirmModal when delete-checked button is clicked", () => {
const wrapper = shallow(<ObjectsBulkActions checkedObjectsCount={1} />)
wrapper.find("#delete-checked").simulate("click")
wrapper.update()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(1)
})
@@ -55,22 +59,16 @@ describe("Toolbar", () => {
it("shoud call deleteChecked when Delete is clicked on confirmation modal", () => {
const deleteChecked = jest.fn()
const wrapper = shallow(
<Toolbar checkedObjectsCount={1} deleteChecked={deleteChecked} />
<ObjectsBulkActions
checkedObjectsCount={1}
deleteChecked={deleteChecked}
/>
)
wrapper.find("button.zmdi-delete").simulate("click")
wrapper.find("#delete-checked").simulate("click")
wrapper.update()
wrapper.find("DeleteObjectConfirmModal").prop("deleteObject")()
expect(deleteChecked).toHaveBeenCalled()
wrapper.update()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(0)
})
it("should call downloadChecked when download button is clicked", () => {
const downloadChecked = jest.fn()
const wrapper = shallow(
<Toolbar checkedObjectsCount={1} downloadChecked={downloadChecked} />
)
wrapper.find("button.zmdi-download").simulate("click")
expect(downloadChecked).toHaveBeenCalled()
})
})

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

@@ -28,13 +28,13 @@ describe("ObjectsHeader", () => {
const sortObjects = jest.fn()
const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
expect(
wrapper.find("#sort-by-name i").hasClass("zmdi-sort-asc")
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
).toBeTruthy()
expect(
wrapper.find("#sort-by-size i").hasClass("zmdi-sort-amount-asc")
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
).toBeTruthy()
expect(
wrapper.find("#sort-by-last-modified i").hasClass("zmdi-sort-amount-asc")
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
).toBeTruthy()
})
@@ -44,7 +44,7 @@ describe("ObjectsHeader", () => {
<ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} />
)
expect(
wrapper.find("#sort-by-name i").hasClass("zmdi-sort-desc")
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
).toBeTruthy()
})
@@ -54,7 +54,7 @@ describe("ObjectsHeader", () => {
<ObjectsHeader sortObjects={sortObjects} sortSizeOrder={true} />
)
expect(
wrapper.find("#sort-by-size i").hasClass("zmdi-sort-amount-desc")
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc")
).toBeTruthy()
})
@@ -64,7 +64,7 @@ describe("ObjectsHeader", () => {
<ObjectsHeader sortObjects={sortObjects} sortLastModifiedOrder={true} />
)
expect(
wrapper.find("#sort-by-last-modified i").hasClass("zmdi-sort-amount-desc")
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc")
).toBeTruthy()
})

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

@@ -32,12 +32,8 @@ describe("ObjectsList", () => {
)
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" }
])
})
@@ -45,9 +41,6 @@ describe("ObjectsList", () => {
const wrapper = shallow(
<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

@@ -25,7 +25,7 @@ describe("Path", () => {
it("should render only bucket if there is no prefix", () => {
const wrapper = shallow(<Path currentBucket={"test1"} currentPrefix={""} />)
expect(wrapper.find("a").length).toBe(1)
expect(wrapper.find("span").length).toBe(1)
expect(wrapper.text()).toBe("test1")
})
@@ -33,22 +33,22 @@ describe("Path", () => {
const wrapper = shallow(
<Path currentBucket={"test1"} currentPrefix={"a/b/"} />
)
expect(wrapper.find("a").length).toBe(3)
expect(wrapper.find("span").length).toBe(3)
expect(
wrapper
.find("a")
.find("span")
.at(0)
.text()
).toBe("test1")
expect(
wrapper
.find("a")
.find("span")
.at(1)
.text()
).toBe("a")
expect(
wrapper
.find("a")
.find("span")
.at(2)
.text()
).toBe("b")
@@ -66,9 +66,7 @@ describe("Path", () => {
wrapper
.find("a")
.at(2)
.simulate("click", {
preventDefault: jest.fn()
})
.simulate("click", { preventDefault: jest.fn() })
expect(selectPrefix).toHaveBeenCalledWith("a/b/")
})
})

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

@@ -88,14 +88,8 @@ 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} />)

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

@@ -24,14 +24,7 @@ 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
@@ -39,38 +32,26 @@ jest.mock("../../web", () => ({
}),
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" })
})
}))
@@ -83,28 +64,14 @@ describe("Objects actions", () => {
const expectedActions = [
{
type: "objects/SET_LIST",
objects: [
{
name: "test1"
},
{
name: "test2"
}
],
objects: [{ name: "test1" }, { name: "test2" }],
isTruncated: false,
marker: "test2"
}
]
store.dispatch(
actionsObjects.setList(
[
{
name: "test1"
},
{
name: "test2"
}
],
[{ name: "test1" }, { name: "test2" }],
"test2",
false
)
@@ -141,24 +108,13 @@ 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
},
@@ -183,24 +139,13 @@ 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
},
@@ -248,21 +193,12 @@ 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()
@@ -273,10 +209,7 @@ 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()
@@ -285,12 +218,7 @@ 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)
@@ -298,19 +226,10 @@ 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)
@@ -319,21 +238,13 @@ 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(() => {
@@ -374,12 +285,8 @@ 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 = [
{
@@ -407,12 +314,8 @@ 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 = [
{
@@ -446,12 +349,8 @@ describe("Objects actions", () => {
}
})
const store = mockStore({
buckets: {
currentBucket: "bk1"
},
objects: {
currentPrefix: "pre1/"
}
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
})
store.dispatch(actionsObjects.downloadObject("obj1"))
const url = `${
@@ -473,12 +372,8 @@ describe("Objects actions", () => {
}
})
const store = mockStore({
buckets: {
currentBucket: "bk1"
},
objects: {
currentPrefix: "pre1/"
}
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "pre1/" }
})
return store.dispatch(actionsObjects.downloadObject("obj1")).then(() => {
const url = `${
@@ -492,12 +387,8 @@ 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 = [
{
@@ -564,13 +455,8 @@ describe("Objects actions", () => {
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 = `${

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

@@ -40,25 +40,11 @@ describe("objects reducer", () => {
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
})
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()
})
@@ -66,44 +52,22 @@ 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
},
{
type: actions.APPEND_LIST,
objects: [
{
name: "obj3"
},
{
name: "obj4"
}
],
objects: [{ name: "obj3" }, { name: "obj4" }],
marker: "obj4",
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()
@@ -111,53 +75,24 @@ 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"
}
)
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"
}
)
expect(newState.list).toEqual([
{
name: "obj1"
},
{
name: "obj2"
}
])
expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }])
})
it("should handle SET_SORT_BY", () => {
@@ -178,11 +113,7 @@ describe("objects reducer", () => {
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/"
@@ -225,9 +156,7 @@ describe("objects reducer", () => {
it("should handle SELECTED_LIST_REMOVE", () => {
const newState = reducer(
{
checkedList: ["obj1", "obj2"]
},
{ checkedList: ["obj1", "obj2"] },
{
type: actions.CHECKED_LIST_REMOVE,
object: "obj1"
@@ -238,9 +167,7 @@ describe("objects reducer", () => {
it("should handle CHECKED_LIST_RESET", () => {
const newState = reducer(
{
checkedList: ["obj1", "obj2"]
},
{ checkedList: ["obj1", "obj2"] },
{
type: actions.CHECKED_LIST_RESET
}

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

@@ -60,40 +60,35 @@ export const fetchObjects = append => {
} = 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")
})
}
}
}

2
browser/app/js/uploads/AbortConfirmModal.js
View File

@@ -50,7 +50,7 @@ export class AbortConfirmModal extends React.Component {
sub="This cannot be undone!"
okText="Abort"
okIcon={okIcon}
cancelText="Continue"
cancelText="Upload"
cancelIcon={cancelIcon}
okHandler={this.abortUploads.bind(this)}
cancelHandler={hideAbort}

22
browser/app/js/uploads/Dropzone.js
View File

@@ -33,13 +33,29 @@ export class Dropzone extends React.Component {
}
render() {
// Overwrite the default styling from react-dropzone; otherwise it
// won't handle child elements correctly.
const style = {
height: "100%",
borderWidth: "0",
borderStyle: "dashed",
borderColor: "#fff"
}
const activeStyle = {
borderWidth: "2px",
borderColor: "#777"
}
const rejectStyle = {
backgroundColor: "#ffdddd"
}
// disableClick means that it won't trigger a file upload box when
// the user clicks on a file.
return (
<ReactDropzone
className="objects"
activeClassName="objects--active"
rejectClassName="objects--reject"
style={style}
activeStyle={activeStyle}
rejectStyle={rejectStyle}
disableClick={true}
onDrop={this.onDrop.bind(this)}
>

21
browser/app/js/uploads/UploadModal.js
View File

@@ -57,17 +57,18 @@ export class UploadModal extends React.Component {
"..."
return (
<div className="alert alert-info alert--upload animated fadeInUp ">
<button
type="button"
className="close close--alt"
onClick={showAbortModal}
/>
<div>{text}</div>
<div className="alert alert-info progress animated fadeInUp ">
<button type="button" className="close" onClick={showAbortModal}>
<span>×</span>
</button>
<div className="text-center">
<small>{text}</small>
</div>
<ProgressBar now={percent} />
<div>
{humanize.filesize(totalLoaded)} (
{percent.toFixed(2)} %)
<div className="text-center">
<small>
{humanize.filesize(totalLoaded)} ({percent.toFixed(2)} %)
</small>
</div>
</div>
)

8
browser/app/js/uploads/__tests__/Dropzone.test.js
View File

@@ -26,12 +26,8 @@ describe("Dropzone", () => {
it("should call uploadFile with files", () => {
const uploadFile = jest.fn()
const wrapper = shallow(<Dropzone uploadFile={uploadFile} />)
const file1 = new Blob(["file content1"], {
type: "text/plain"
})
const file2 = new Blob(["file content2"], {
type: "text/plain"
})
const file1 = new Blob(["file content1"], { type: "text/plain" })
const file2 = new Blob(["file content2"], { type: "text/plain" })
wrapper.first().prop("onDrop")([file1, file2])
expect(uploadFile.mock.calls).toEqual([[file1], [file2]])
})

24
browser/app/js/uploads/__tests__/actions.test.js
View File

@@ -85,9 +85,7 @@ describe("Uploads actions", () => {
it("creates alerts/SET action when currentBucket is not present", () => {
const store = mockStore({
buckets: {
currentBucket: ""
}
buckets: { currentBucket: "" }
})
const expectedActions = [
{
@@ -99,9 +97,7 @@ describe("Uploads actions", () => {
}
}
]
const file = new Blob(["file content"], {
type: "text/plain"
})
const file = new Blob(["file content"], { type: "text/plain" })
store.dispatch(uploadsActions.uploadFile(file))
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
@@ -109,12 +105,8 @@ describe("Uploads actions", () => {
it("creates uploads/ADD action before uploading the file", () => {
const store = mockStore({
buckets: {
currentBucket: "test1"
},
objects: {
currentPrefix: "pre1/"
}
buckets: { currentBucket: "test1" },
objects: { currentPrefix: "pre1/" }
})
const expectedActions = [
{
@@ -142,12 +134,8 @@ describe("Uploads actions", () => {
})
window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass)
const store = mockStore({
buckets: {
currentBucket: "test1"
},
objects: {
currentPrefix: "pre1/"
}
buckets: { currentBucket: "test1" },
objects: { currentPrefix: "pre1/" }
})
store.dispatch(uploadsActions.uploadFile(file))
expect(open).toHaveBeenCalledWith(

38
browser/app/js/uploads/__tests__/reducer.test.js
View File

@@ -34,24 +34,14 @@ describe("uploads reducer", () => {
name: "test"
})
expect(newState.files).toEqual({
"a-b-c": {
loaded: 0,
size: 100,
name: "test"
}
"a-b-c": { loaded: 0, size: 100, name: "test" }
})
})
it("should handle UPDATE_PROGRESS", () => {
const newState = reducer(
{
files: {
"a-b-c": {
loaded: 0,
size: 100,
name: "test"
}
}
files: { "a-b-c": { loaded: 0, size: 100, name: "test" } }
},
{
type: actions.UPDATE_PROGRESS,
@@ -60,11 +50,7 @@ describe("uploads reducer", () => {
}
)
expect(newState.files).toEqual({
"a-b-c": {
loaded: 50,
size: 100,
name: "test"
}
"a-b-c": { loaded: 50, size: 100, name: "test" }
})
})
@@ -72,16 +58,8 @@ describe("uploads reducer", () => {
const newState = reducer(
{
files: {
"a-b-c": {
loaded: 70,
size: 100,
name: "test1"
},
"x-y-z": {
loaded: 50,
size: 100,
name: "test2"
}
"a-b-c": { loaded: 70, size: 100, name: "test1" },
"x-y-z": { loaded: 50, size: 100, name: "test2" }
}
},
{
@@ -90,11 +68,7 @@ describe("uploads reducer", () => {
}
)
expect(newState.files).toEqual({
"x-y-z": {
loaded: 50,
size: 100,
name: "test2"
}
"x-y-z": { loaded: 50, size: 100, name: "test2" }
})
})

8
browser/app/js/uploads/reducer.js
View File

@@ -39,13 +39,7 @@ const stop = (files, action) => {
return newFiles
}
export default (
state = {
files: {},
showAbortModal: false
},
action
) => {
export default (state = { files: {}, showAbortModal: false }, action) => {
switch (action.type) {
case uploadsActions.ADD:
return {

45
browser/app/js/utils.js
View File

@@ -14,11 +14,11 @@
* limitations under the License.
*/
import { minioBrowserPrefix } from "./constants.js"
import { minioBrowserPrefix } from './constants.js'
export const sortObjectsByName = (objects, order) => {
let folders = objects.filter(object => object.name.endsWith("/"))
let files = objects.filter(object => !object.name.endsWith("/"))
let folders = objects.filter(object => object.name.endsWith('/'))
let files = objects.filter(object => !object.name.endsWith('/'))
folders = folders.sort((a, b) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
@@ -37,34 +37,32 @@ export const sortObjectsByName = (objects, order) => {
}
export const sortObjectsBySize = (objects, order) => {
let folders = objects.filter(object => object.name.endsWith("/"))
let files = objects.filter(object => !object.name.endsWith("/"))
let folders = objects.filter(object => object.name.endsWith('/'))
let files = objects.filter(object => !object.name.endsWith('/'))
files = files.sort((a, b) => a.size - b.size)
if (order) files = files.reverse()
if (order)
files = files.reverse()
return [...folders, ...files]
}
export const sortObjectsByDate = (objects, order) => {
let folders = objects.filter(object => object.name.endsWith("/"))
let files = objects.filter(object => !object.name.endsWith("/"))
files = files.sort(
(a, b) =>
new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime()
)
if (order) files = files.reverse()
let folders = objects.filter(object => object.name.endsWith('/'))
let files = objects.filter(object => !object.name.endsWith('/'))
files = files.sort((a, b) => new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime())
if (order)
files = files.reverse()
return [...folders, ...files]
}
export const pathSlice = path => {
path = path.replace(minioBrowserPrefix, "")
let prefix = ""
let bucket = ""
if (!path)
return {
export const pathSlice = (path) => {
path = path.replace(minioBrowserPrefix, '')
let prefix = ''
let bucket = ''
if (!path) return {
bucket,
prefix
}
let objectIndex = path.indexOf("/", 1)
}
let objectIndex = path.indexOf('/', 1)
if (objectIndex == -1) {
bucket = path.slice(1)
return {
@@ -81,6 +79,7 @@ export const pathSlice = path => {
}
export const pathJoin = (bucket, prefix) => {
if (!prefix) prefix = ""
return minioBrowserPrefix + "/" + bucket + "/" + prefix
if (!prefix)
prefix = ''
return minioBrowserPrefix + '/' + bucket + '/' + prefix
}

97
browser/app/js/web.js
View File

@@ -14,35 +14,32 @@
* limitations under the License.
*/
import JSONrpc from "./jsonrpc"
import { minioBrowserPrefix } from "./constants.js"
import Moment from "moment"
import storage from "local-storage-fallback"
import JSONrpc from './jsonrpc'
import { minioBrowserPrefix } from './constants.js'
import Moment from 'moment'
import storage from 'local-storage-fallback'
class Web {
constructor(endpoint) {
const namespace = "Web"
const namespace = 'Web'
this.JSONrpc = new JSONrpc({
endpoint,
namespace
})
}
makeCall(method, options) {
return this.JSONrpc.call(
method,
{
params: options
},
storage.getItem("token")
)
return this.JSONrpc.call(method, {
params: options
}, storage.getItem('token'))
.catch(err => {
if (err.status === 401) {
storage.removeItem("token")
storage.removeItem('token')
location.reload()
throw new Error("Please re-login.")
throw new Error('Please re-login.')
}
if (err.status) throw new Error(`Server returned error [${err.status}]`)
throw new Error("Minio server is unreachable")
if (err.status)
throw new Error(`Server returned error [${err.status}]`)
throw new Error('Minio server is unreachable')
})
.then(res => {
let json = JSON.parse(res.text)
@@ -54,85 +51,81 @@ class Web {
if (!Moment(result.uiVersion).isValid()) {
throw new Error("Invalid UI version in the JSON-RPC response")
}
if (
result.uiVersion !== currentUiVersion &&
currentUiVersion !== "MINIO_UI_VERSION"
) {
storage.setItem("newlyUpdated", true)
if (result.uiVersion !== currentUiVersion
&& currentUiVersion !== 'MINIO_UI_VERSION') {
storage.setItem('newlyUpdated', true)
location.reload()
}
return result
})
}
LoggedIn() {
return !!storage.getItem("token")
return !!storage.getItem('token')
}
Login(args) {
return this.makeCall("Login", args).then(res => {
storage.setItem("token", `${res.token}`)
return res
})
return this.makeCall('Login', args)
.then(res => {
storage.setItem('token', `${res.token}`)
return res
})
}
Logout() {
storage.removeItem("token")
storage.removeItem('token')
}
ServerInfo() {
return this.makeCall("ServerInfo")
return this.makeCall('ServerInfo')
}
StorageInfo() {
return this.makeCall("StorageInfo")
return this.makeCall('StorageInfo')
}
ListBuckets() {
return this.makeCall("ListBuckets")
return this.makeCall('ListBuckets')
}
MakeBucket(args) {
return this.makeCall("MakeBucket", args)
return this.makeCall('MakeBucket', args)
}
DeleteBucket(args) {
return this.makeCall("DeleteBucket", args)
return this.makeCall('DeleteBucket', args)
}
ListObjects(args) {
return this.makeCall("ListObjects", args)
return this.makeCall('ListObjects', args)
}
PresignedGet(args) {
return this.makeCall("PresignedGet", args)
return this.makeCall('PresignedGet', args)
}
PutObjectURL(args) {
return this.makeCall("PutObjectURL", args)
return this.makeCall('PutObjectURL', args)
}
RemoveObject(args) {
return this.makeCall("RemoveObject", args)
return this.makeCall('RemoveObject', args)
}
GetAuth() {
return this.makeCall("GetAuth")
return this.makeCall('GetAuth')
}
GenerateAuth() {
return this.makeCall("GenerateAuth")
return this.makeCall('GenerateAuth')
}
SetAuth(args) {
return this.makeCall("SetAuth", args).then(res => {
storage.setItem("token", `${res.token}`)
return res
})
return this.makeCall('SetAuth', args)
.then(res => {
storage.setItem('token', `${res.token}`)
return res
})
}
CreateURLToken() {
return this.makeCall("CreateURLToken")
return this.makeCall('CreateURLToken')
}
GetBucketPolicy(args) {
return this.makeCall("GetBucketPolicy", args)
return this.makeCall('GetBucketPolicy', args)
}
SetBucketPolicy(args) {
return this.makeCall("SetBucketPolicy", args)
return this.makeCall('SetBucketPolicy', args)
}
ListAllBucketPolicies(args) {
return this.makeCall("ListAllBucketPolicies", args)
return this.makeCall('ListAllBucketPolicies', args)
}
}
const web = new Web(
`${window.location.protocol}//${
window.location.host
}${minioBrowserPrefix}/webrpc`
)
const web = new Web(`${window.location.protocol}//${window.location.host}${minioBrowserPrefix}/webrpc`);
export default web
export default web;