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

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

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

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

@@ -31,7 +31,7 @@ describe("App", () => {
const wrapper = mount(
<MemoryRouter initialEntries={["/login"]}>
<App />
</MemoryRouter>
</MemoryRouter>,
)
expect(wrapper.text()).toBe("Login")
})
@@ -40,7 +40,7 @@ describe("App", () => {
const wrapper = mount(
<MemoryRouter initialEntries={["/"]}>
<App />
</MemoryRouter>
</MemoryRouter>,
)
expect(wrapper.text()).toBe("Browser")
})
@@ -49,7 +49,7 @@ describe("App", () => {
const wrapper = mount(
<MemoryRouter initialEntries={["/bucket"]}>
<App />
</MemoryRouter>
</MemoryRouter>,
)
expect(wrapper.text()).toBe("Browser")
})
@@ -58,7 +58,7 @@ describe("App", () => {
const wrapper = mount(
<MemoryRouter initialEntries={["/bucket/a/b/c"]}>
<App />
</MemoryRouter>
</MemoryRouter>,
)
expect(wrapper.text()).toBe("Browser")
})

4
browser/app/js/__tests__/jsonrpc-test.js
View File

@@ -21,7 +21,7 @@ describe("jsonrpc", () => {
try {
let jsonRPC = new JSONrpc({
endpoint: "htt://localhost:9000",
namespace: "Test"
namespace: "Test",
})
} catch (e) {
done()
@@ -30,7 +30,7 @@ describe("jsonrpc", () => {
it("should succeed with valid endpoint", () => {
let jsonRPC = new JSONrpc({
endpoint: "http://localhost:9000/webrpc",
namespace: "Test"
namespace: "Test",
})
expect(jsonRPC.version).toEqual("2.0")
expect(jsonRPC.host).toEqual("localhost")

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

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

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

@@ -28,13 +28,13 @@ export const AlertContainer = ({ alert, clearAlert }) => {
const mapStateToProps = state => {
return {
alert: state.alert
alert: state.alert,
}
}
const mapDispatchToProps = dispatch => {
return {
clearAlert: () => dispatch(alertActions.clear())
clearAlert: () => dispatch(alertActions.clear()),
}
}

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

@@ -26,9 +26,11 @@ describe("Alert", () => {
it("should call onDismiss when close button is clicked", () => {
const onDismiss = jest.fn()
const wrapper = mount(
<Alert show={true} type="danger" message="test" onDismiss={onDismiss} />
<Alert show={true} type="danger" message="test" onDismiss={onDismiss} />,
)
wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
wrapper.find("button").simulate("click", {
preventDefault: jest.fn(),
})
expect(onDismiss).toHaveBeenCalled()
})
})

6
browser/app/js/alert/__tests___/AlertContainer.test.js
View File

@@ -21,13 +21,15 @@ import { AlertContainer } from "../AlertContainer"
describe("Alert", () => {
it("should render without crashing", () => {
shallow(
<AlertContainer alert={{ show: true, type: "danger", message: "Test" }} />
<AlertContainer
alert={{ show: true, type: "danger", message: "Test" }}
/>,
)
})
it("should render nothing if message is empty", () => {
const wrapper = shallow(
<AlertContainer alert={{ show: true, type: "danger", message: "" }} />
<AlertContainer alert={{ show: true, type: "danger", message: "" }} />,
)
expect(wrapper.find("Alert").length).toBe(0)
})

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

@@ -29,10 +29,19 @@ 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)
})
@@ -42,14 +51,23 @@ 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)
@@ -59,8 +77,8 @@ describe("Alert actions", () => {
const store = mockStore()
const expectedActions = [
{
type: "alert/CLEAR"
}
type: "alert/CLEAR",
},
]
store.dispatch(actionsAlert.clear())
const actions = store.getActions()

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

@@ -21,7 +21,7 @@ describe("alert reducer", () => {
it("should return the initial state", () => {
expect(reducer(undefined, {})).toEqual({
show: false,
type: "danger"
type: "danger",
})
})
@@ -29,59 +29,81 @@ 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,
id: 1,
type: "danger",
message: "Test message"
message: "Test message",
})
})
it("should clear alert if id not passed", () => {
expect(
reducer(
{ show: true, type: "danger", message: "Test message" },
{
type: actionsAlert.CLEAR
}
)
show: true,
type: "danger",
message: "Test message",
},
{
type: actionsAlert.CLEAR,
},
),
).toEqual({
show: false,
type: "danger"
type: "danger",
})
})
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({
show: false,
type: "danger"
type: "danger",
})
})
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({
show: true,
id: 1,
type: "danger",
message: "Test message"
message: "Test message",
})
})
})

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

@@ -27,20 +27,22 @@ export const set = alert => {
dispatch({
type: CLEAR,
alert: {
id
}
id,
},
})
}, 5000)
}
dispatch({
type: SET,
alert: Object.assign({}, alert, {
id
})
id,
}),
})
}
}
export const clear = () => {
return { type: CLEAR }
return {
type: CLEAR,
}
}

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

@@ -18,7 +18,7 @@ import * as actionsAlert from "./actions"
const initialState = {
show: false,
type: "danger"
type: "danger",
}
export default (state = initialState, action) => {
switch (action.type) {
@@ -27,7 +27,7 @@ export default (state = initialState, action) => {
show: true,
id: action.alert.id,
type: action.alert.type,
message: action.alert.message
message: action.alert.message,
}
case actionsAlert.CLEAR:
if (action.alert && action.alert.id != state.id) {

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

@@ -21,40 +21,29 @@ import logo from "../../img/logo.svg"
export const AboutModal = ({ serverInfo, hideAbout }) => {
const { version, memory, platform, runtime } = serverInfo
return (
<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>
<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="" />
</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 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>
</div>
</Modal>

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

@@ -15,24 +15,21 @@
*/
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 (
<div
className={classNames({
"file-explorer": true
})}
>
<Aux>
<SideBar />
<MainContent />
<AlertContainer />
</div>
</Aux>
)
}
}

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

@@ -28,29 +28,29 @@ export class BrowserDropdown extends React.Component {
super(props)
this.state = {
showAboutModal: false,
showChangePasswordModal: false
showChangePasswordModal: false,
}
}
showAbout(e) {
e.preventDefault()
this.setState({
showAboutModal: true
showAboutModal: true,
})
}
hideAbout() {
this.setState({
showAboutModal: false
showAboutModal: false,
})
}
showChangePassword(e) {
e.preventDefault()
this.setState({
showChangePasswordModal: true
showChangePasswordModal: true,
})
}
hideChangePassword() {
this.setState({
showChangePasswordModal: false
showChangePasswordModal: false,
})
}
componentDidMount() {
@@ -81,75 +81,74 @@ export class BrowserDropdown extends React.Component {
render() {
const { serverInfo } = this.props
return (
<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>
<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>
)
}
}
const mapStateToProps = state => {
return {
serverInfo: state.browser.serverInfo
serverInfo: state.browser.serverInfo,
}
}
const mapDispatchToProps = dispatch => {
return {
fetchServerInfo: () => dispatch(browserActions.fetchServerInfo())
fetchServerInfo: () => dispatch(browserActions.fetchServerInfo()),
}
}

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

@@ -24,9 +24,8 @@ import {
Modal,
ModalBody,
ModalHeader,
OverlayTrigger
OverlayTrigger,
} from "react-bootstrap"
import InputGroup from "./InputGroup"
export class ChangePasswordModal extends React.Component {
constructor(props) {
@@ -34,7 +33,7 @@ export class ChangePasswordModal extends React.Component {
this.state = {
accessKey: "",
secretKey: "",
keysReadOnly: false
keysReadOnly: false,
}
}
// When its shown, it loads the access key and secret key.
@@ -46,13 +45,13 @@ export class ChangePasswordModal extends React.Component {
this.setState({
accessKey: "xxxxxxxxx",
secretKey: "xxxxxxxxx",
keysReadOnly: true
keysReadOnly: true,
})
} else {
web.GetAuth().then(data => {
this.setState({
accessKey: data.accessKey,
secretKey: data.secretKey
secretKey: data.secretKey,
})
})
}
@@ -61,19 +60,19 @@ export class ChangePasswordModal extends React.Component {
// Handle field changes from inside the modal.
accessKeyChange(e) {
this.setState({
accessKey: e.target.value
accessKey: e.target.value,
})
}
secretKeyChange(e) {
this.setState({
secretKey: e.target.value
secretKey: e.target.value,
})
}
secretKeyVisible(secretKeyVisible) {
this.setState({
secretKeyVisible
secretKeyVisible,
})
}
@@ -85,18 +84,18 @@ export class ChangePasswordModal extends React.Component {
web
.SetAuth({
accessKey,
secretKey
secretKey,
})
.then(data => {
showAlert({
type: "success",
message: "Changed credentials"
message: "Changed credentials",
})
})
.catch(err => {
showAlert({
type: "danger",
message: err.message
message: err.message,
})
})
}
@@ -106,7 +105,7 @@ export class ChangePasswordModal extends React.Component {
this.setState({
accessKey: data.accessKey,
secretKey: data.secretKey,
secretKeyVisible: true
secretKeyVisible: true,
})
})
}
@@ -114,51 +113,55 @@ export class ChangePasswordModal extends React.Component {
render() {
const { hideChangePassword } = this.props
return (
<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>
<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.accessKeyChange.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>
<div className="modal-footer">
<button
id="generate-keys"
className={
"btn btn-primary " + (this.state.keysReadOnly ? "hidden" : "")
"btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
}
onClick={this.generateAuth.bind(this)}
>
@@ -167,7 +170,7 @@ export class ChangePasswordModal extends React.Component {
<button
id="update-keys"
className={
"btn btn-success " + (this.state.keysReadOnly ? "hidden" : "")
"btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
}
onClick={this.setAuth.bind(this)}
>
@@ -175,7 +178,7 @@ export class ChangePasswordModal extends React.Component {
</button>
<button
id="cancel-change-password"
className="btn btn-link"
className="btn btn--link"
onClick={hideChangePassword}
>
Cancel
@@ -188,13 +191,13 @@ export class ChangePasswordModal extends React.Component {
const mapStateToProps = state => {
return {
serverInfo: state.browser.serverInfo
serverInfo: state.browser.serverInfo,
}
}
const mapDispatchToProps = dispatch => {
return {
showAlert: alert => dispatch(alertActions.set(alert))
showAlert: alert => dispatch(alertActions.set(alert)),
}
}

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

@@ -26,30 +26,30 @@ let ConfirmModal = ({
cancelText,
okHandler,
cancelHandler,
show
show,
}) => {
return (
<Modal
bsSize="small"
animation={false}
show={show}
className={"modal-confirm " + (baseClass || "")}
className={"dialog " + (baseClass || "")}
>
<ModalBody>
<div className="mc-icon">
<Modal.Body>
<div className="dialog__icon">
<i className={icon} />
</div>
<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>
<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>
</Modal>
)
}

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

@@ -16,26 +16,13 @@
import React from "react"
import Path from "../objects/Path"
import StorageInfo from "./StorageInfo"
import BrowserDropdown from "./BrowserDropdown"
import web from "../web"
import { minioBrowserPrefix } from "../constants"
import ObjectsBulkActions from "../objects/ObjectsBulkActions"
export const Header = () => {
const loggedIn = web.LoggedIn()
return (
<header className="fe-header">
<header className="header">
<ObjectsBulkActions />
<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,11 +16,6 @@
import React from "react"
export const Host = () => (
<div className="fes-host">
<i className="fa fa-globe" />
<a href="/">{window.location.host}</a>
</div>
)
export const Host = () => <small>{window.location.host}</small>
export default Host

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

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

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

@@ -16,11 +16,9 @@
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"
@@ -42,7 +40,7 @@ export class Login extends React.Component {
web
.Login({
username: document.getElementById("accessKey").value,
password: document.getElementById("secretKey").value
password: document.getElementById("secretKey").value,
})
.then(res => {
history.push("/")
@@ -74,39 +72,37 @@ export class Login extends React.Component {
return (
<div className="login">
{alertBox}
<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>
<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" />
</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>
)
}
@@ -115,8 +111,13 @@ export class Login extends React.Component {
const mapDispatchToProps = dispatch => {
return {
showAlert: (type, message) =>
dispatch(actionsAlert.set({ type: type, message: message })),
clearAlert: () => dispatch(actionsAlert.clear())
dispatch(
actionsAlert.set({
type: type,
message: message,
}),
),
clearAlert: () => dispatch(actionsAlert.clear()),
}
}

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

@@ -25,11 +25,11 @@ import { getPrefixWritable } from "../objects/selectors"
export const MainActions = ({
prefixWritable,
uploadFile,
showMakeBucketModal
showMakeBucketModal,
}) => {
const uploadTooltip = <Tooltip id="tt-upload-file">Upload file</Tooltip>
const uploadTooltip = <Tooltip id="tooltip-upload-file">Upload file</Tooltip>
const makeBucketTooltip = (
<Tooltip id="tt-create-bucket">Create bucket</Tooltip>
<Tooltip id="tooltip-create-bucket">Create bucket</Tooltip>
)
const onFileUpload = e => {
e.preventDefault()
@@ -41,15 +41,20 @@ export const MainActions = ({
if (loggedIn || prefixWritable) {
return (
<Dropdown dropup className="feb-actions" id="fe-action-toggle">
<Dropdown.Toggle noCaret className="feba-toggle">
<span>
<i className="fa fa-plus" />
</span>
<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.Toggle>
<Dropdown.Menu>
<OverlayTrigger placement="left" overlay={uploadTooltip}>
<a href="#" className="feba-btn feba-upload">
<a href="#" className="create__btn create__btn--upload">
<input
type="file"
onChange={onFileUpload}
@@ -57,8 +62,7 @@ export const MainActions = ({
id="file-input"
/>
<label htmlFor="file-input">
{" "}
<i className="fa fa-cloud-upload" />{" "}
<i className="zmdi zmdi-upload" />
</label>
</a>
</OverlayTrigger>
@@ -67,14 +71,12 @@ export const MainActions = ({
<a
href="#"
id="show-make-bucket"
className="feba-btn feba-bucket"
className="create__btn create__btn--bucket"
onClick={e => {
e.preventDefault()
showMakeBucketModal()
}}
>
<i className="fa fa-hdd-o" />
</a>
/>
</OverlayTrigger>
)}
</Dropdown.Menu>
@@ -87,14 +89,14 @@ export const MainActions = ({
const mapStateToProps = state => {
return {
prefixWritable: getPrefixWritable(state)
prefixWritable: getPrefixWritable(state),
}
}
const mapDispatchToProps = dispatch => {
return {
uploadFile: file => dispatch(uploadsActions.uploadFile(file)),
showMakeBucketModal: () => dispatch(actionsBuckets.showMakeBucketModal())
showMakeBucketModal: () => dispatch(actionsBuckets.showMakeBucketModal()),
}
}

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

@@ -15,29 +15,27 @@
*/
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 = () => (
<div className="fe-body">
<ObjectsBulkActions />
<MobileHeader />
export const MainContent = ({ sidebarOpen }) => (
<section className="content">
<Header />
<Dropzone>
<Header />
<ObjectsSection />
</Dropzone>
<MainActions />
<BucketPolicyModal />
<MakeBucketModal />
<UploadModal />
</div>
<SidebarBackdrop />
</section>
)
export default MainContent

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

@@ -16,49 +16,50 @@
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, clickOutside }) => {
export const SideBar = ({ sidebarOpen }) => {
return (
<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>
<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>
</div>
<div className="fes-list">
<div className="buckets">
{web.LoggedIn() && <BucketSearch />}
<BucketList />
</div>
<Host />
<StorageInfo />
</div>
</ClickOutHandler>
</aside>
)
}
const mapStateToProps = state => {
return {
sidebarOpen: state.browser.sidebarOpen
sidebarOpen: state.browser.sidebarOpen,
}
}
const mapDispatchToProps = dispatch => {
return {
clickOutside: () => dispatch(actionsCommon.closeSidebar())
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar()),
}
}

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

@@ -15,46 +15,29 @@
*/
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 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>
export const SidebarBackdrop = ({ sidebarOpen, toggleSidebar }) => (
<div
className="sidebar-backdrop"
onClick={e => {
e.stopPropagation()
toggleSidebar()
}}
/>
)
const mapStateToProps = state => {
return {
sidebarOpen: state.browser.sidebarOpen
sidebarOpen: state.browser.sidebarOpen,
}
}
const mapDispatchToProps = dispatch => {
return {
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar())
toggleSidebar: () => dispatch(actionsCommon.toggleSidebar()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MobileHeader)
export default connect(mapStateToProps, mapDispatchToProps)(SidebarBackdrop)

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

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

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

@@ -28,22 +28,15 @@ 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="feh-usage">
<div className="fehu-chart">
<div style={{ width: usedPercent }} />
<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>
<ul>
<li>
<span>Used: </span>
{humanize.filesize(total - free)}
</li>
<li className="pull-right">
<span>Free: </span>
{humanize.filesize(total - used)}
</li>
</ul>
</div>
)
}
@@ -51,13 +44,13 @@ export class StorageInfo extends React.Component {
const mapStateToProps = state => {
return {
storageInfo: state.browser.storageInfo
storageInfo: state.browser.storageInfo,
}
}
const mapDispatchToProps = dispatch => {
return {
fetchStorageInfo: () => dispatch(actionsCommon.fetchStorageInfo())
fetchStorageInfo: () => dispatch(actionsCommon.fetchStorageInfo()),
}
}

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

@@ -23,7 +23,7 @@ describe("AboutModal", () => {
version: "test",
memory: "test",
platform: "test",
runtime: "test"
runtime: "test",
}
it("should render without crashing", () => {
@@ -33,7 +33,7 @@ describe("AboutModal", () => {
it("should call hideAbout when close button is clicked", () => {
const hideAbout = jest.fn()
const wrapper = shallow(
<AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
<AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />,
)
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} />)
})
})

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

@@ -23,12 +23,12 @@ describe("BrowserDropdown", () => {
version: "test",
memory: "test",
platform: "test",
runtime: "test"
runtime: "test",
}
it("should render without crashing", () => {
shallow(
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />,
)
})
@@ -38,16 +38,18 @@ describe("BrowserDropdown", () => {
<BrowserDropdown
serverInfo={serverInfo}
fetchServerInfo={fetchServerInfo}
/>
/>,
)
expect(fetchServerInfo).toHaveBeenCalled()
})
it("should show AboutModal when About link is clicked", () => {
const wrapper = shallow(
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
<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)
@@ -55,9 +57,11 @@ describe("BrowserDropdown", () => {
it("should logout and redirect to /login when logout is clicked", () => {
const wrapper = shallow(
<BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
<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()
})
})

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

@@ -20,18 +20,26 @@ 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",
})
}
})
}),
}))
describe("ChangePasswordModal", () => {
@@ -40,7 +48,9 @@ describe("ChangePasswordModal", () => {
memory: "test",
platform: "test",
runtime: "test",
info: { isEnvCreds: false }
info: {
isEnvCreds: false,
},
}
it("should render without crashing", () => {
@@ -56,7 +66,12 @@ 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")
@@ -78,19 +93,23 @@ describe("ChangePasswordModal", () => {
it("should update accessKey and secretKey when Update button is clicked", () => {
const showAlert = jest.fn()
const wrapper = shallow(
<ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
<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({
type: "success",
message: "Changed credentials"
message: "Changed credentials",
})
})
})
@@ -101,7 +120,7 @@ describe("ChangePasswordModal", () => {
<ChangePasswordModal
serverInfo={serverInfo}
hideChangePassword={hideChangePassword}
/>
/>,
)
wrapper.find("#cancel-change-password").simulate("click")
expect(hideChangePassword).toHaveBeenCalled()

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

@@ -22,7 +22,7 @@ jest.mock("../../web", () => ({
LoggedIn: jest
.fn(() => true)
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
.mockReturnValueOnce(false),
}))
describe("Header", () => {
it("should render without crashing", () => {

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

@@ -19,81 +19,101 @@ 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()
LoggedIn: jest.fn(),
}))
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",
})
})
})

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

@@ -23,7 +23,7 @@ jest.mock("../../web", () => ({
.fn(() => true)
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
.mockReturnValueOnce(false)
.mockReturnValueOnce(false),
}))
describe("MainActions", () => {
@@ -52,21 +52,25 @@ describe("MainActions", () => {
it("should call showMakeBucketModal when create bucket icon is clicked", () => {
const showMakeBucketModal = jest.fn()
const wrapper = shallow(
<MainActions showMakeBucketModal={showMakeBucketModal} />
<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)
})

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

@@ -26,11 +26,11 @@ describe("Bucket", () => {
it("should toggleSidebar when trigger is clicked", () => {
const toggleSidebar = jest.fn()
const wrapper = shallow(
<MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
<MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />,
)
wrapper
.find("#sidebar-toggle")
.simulate("click", { stopPropagation: jest.fn() })
wrapper.find("#sidebar-toggle").simulate("click", {
stopPropagation: jest.fn(),
})
expect(toggleSidebar).toHaveBeenCalled()
})
})

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

@@ -19,7 +19,7 @@ import { shallow } from "enzyme"
import { SideBar } from "../SideBar"
jest.mock("../../web", () => ({
LoggedIn: jest.fn(() => false).mockReturnValueOnce(true)
LoggedIn: jest.fn(() => false).mockReturnValueOnce(true),
}))
describe("SideBar", () => {
@@ -35,7 +35,9 @@ describe("SideBar", () => {
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() })
wrapper.simulate("clickOut", {
preventDefault: jest.fn(),
})
expect(clickOutside).toHaveBeenCalled()
})
})

4
browser/app/js/browser/__tests__/StorageInfo.test.js
View File

@@ -24,7 +24,7 @@ describe("StorageInfo", () => {
<StorageInfo
storageInfo={{ total: 100, free: 60 }}
fetchStorageInfo={jest.fn()}
/>
/>,
)
})
@@ -34,7 +34,7 @@ describe("StorageInfo", () => {
<StorageInfo
storageInfo={{ total: 100, free: 60 }}
fetchStorageInfo={fetchStorageInfo}
/>
/>,
)
expect(fetchStorageInfo).toHaveBeenCalled()
})

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

@@ -20,7 +20,12 @@ 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({
@@ -28,9 +33,9 @@ jest.mock("../../web", () => ({
MinioMemory: "test",
MinioPlatform: "test",
MinioRuntime: "test",
MinioGlobalInfo: "test"
MinioGlobalInfo: "test",
})
})
}),
}))
const middlewares = [thunk]
@@ -40,7 +45,13 @@ 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()
@@ -58,9 +69,9 @@ describe("Common actions", () => {
memory: "test",
platform: "test",
runtime: "test",
info: "test"
}
}
info: "test",
},
},
]
return store.dispatch(actionsCommon.fetchServerInfo()).then(() => {
const actions = store.getActions()

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

@@ -23,35 +23,39 @@ describe("common reducer", () => {
sidebarOpen: false,
storageInfo: {
total: 0,
free: 0
free: 0,
},
serverInfo: {}
serverInfo: {},
})
})
it("should handle TOGGLE_SIDEBAR", () => {
expect(
reducer(
{ sidebarOpen: false },
{
type: actionsCommon.TOGGLE_SIDEBAR
}
)
sidebarOpen: false,
},
{
type: actionsCommon.TOGGLE_SIDEBAR,
},
),
).toEqual({
sidebarOpen: true
sidebarOpen: true,
})
})
it("should handle CLOSE_SIDEBAR", () => {
expect(
reducer(
{ sidebarOpen: true },
{
type: actionsCommon.CLOSE_SIDEBAR
}
)
sidebarOpen: true,
},
{
type: actionsCommon.CLOSE_SIDEBAR,
},
),
).toEqual({
sidebarOpen: false
sidebarOpen: false,
})
})
@@ -61,11 +65,17 @@ 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,
},
})
})
@@ -78,15 +88,15 @@ describe("common reducer", () => {
memory: "test",
platform: "test",
runtime: "test",
info: "test"
}
}).serverInfo
info: "test",
},
}).serverInfo,
).toEqual({
version: "test",
memory: "test",
platform: "test",
runtime: "test",
info: "test"
info: "test",
})
})
})

12
browser/app/js/browser/actions.js
View File

@@ -22,11 +22,11 @@ export const SET_STORAGE_INFO = "common/SET_STORAGE_INFO"
export const SET_SERVER_INFO = "common/SET_SERVER_INFO"
export const toggleSidebar = () => ({
type: TOGGLE_SIDEBAR
type: TOGGLE_SIDEBAR,
})
export const closeSidebar = () => ({
type: CLOSE_SIDEBAR
type: CLOSE_SIDEBAR,
})
export const fetchStorageInfo = () => {
@@ -34,7 +34,7 @@ export const fetchStorageInfo = () => {
return web.StorageInfo().then(res => {
const storageInfo = {
total: res.storageInfo.Total,
free: res.storageInfo.Free
free: res.storageInfo.Free,
}
dispatch(setStorageInfo(storageInfo))
})
@@ -43,7 +43,7 @@ export const fetchStorageInfo = () => {
export const setStorageInfo = storageInfo => ({
type: SET_STORAGE_INFO,
storageInfo
storageInfo,
})
export const fetchServerInfo = () => {
@@ -54,7 +54,7 @@ export const fetchServerInfo = () => {
memory: res.MinioMemory,
platform: res.MinioPlatform,
runtime: res.MinioRuntime,
info: res.MinioGlobalInfo
info: res.MinioGlobalInfo,
}
dispatch(setServerInfo(serverInfo))
})
@@ -63,5 +63,5 @@ export const fetchServerInfo = () => {
export const setServerInfo = serverInfo => ({
type: SET_SERVER_INFO,
serverInfo
serverInfo,
})

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

@@ -19,26 +19,32 @@ import * as actionsCommon from "./actions"
export default (
state = {
sidebarOpen: false,
storageInfo: { total: 0, free: 0 },
serverInfo: {}
storageInfo: {
total: 0,
free: 0,
},
serverInfo: {},
},
action
action,
) => {
switch (action.type) {
case actionsCommon.TOGGLE_SIDEBAR:
return Object.assign({}, state, {
sidebarOpen: !state.sidebarOpen
sidebarOpen: !state.sidebarOpen,
})
case actionsCommon.CLOSE_SIDEBAR:
return Object.assign({}, state, {
sidebarOpen: false
sidebarOpen: false,
})
case actionsCommon.SET_STORAGE_INFO:
return Object.assign({}, state, {
storageInfo: action.storageInfo
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,25 +20,19 @@ import BucketDropdown from "./BucketDropdown"
export const Bucket = ({ bucket, isActive, selectBucket }) => {
return (
<li
<div
className={classNames({
active: isActive
buckets__item: true,
"buckets__item--active": isActive,
})}
onClick={e => {
e.preventDefault()
selectBucket(bucket)
}}
>
<a
href=""
className={classNames({
"fesli-loading": false
})}
>
{bucket}
</a>
<BucketDropdown bucket={bucket}/>
</li>
<a href="">{bucket}</a>
<BucketDropdown bucket={bucket} />
</div>
)
}

4
browser/app/js/buckets/BucketContainer.js
View File

@@ -22,13 +22,13 @@ import Bucket from "./Bucket"
const mapStateToProps = (state, ownProps) => {
return {
isActive: getCurrentBucket(state) === ownProps.bucket
isActive: getCurrentBucket(state) === ownProps.bucket,
}
}
const mapDispatchToProps = dispatch => {
return {
selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket))
selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket)),
}
}

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

@@ -19,24 +19,25 @@ import classNames from "classnames"
import { connect } from "react-redux"
import * as actionsBuckets from "./actions"
import { getCurrentBucket } from "./selectors"
import Dropdown from "react-bootstrap/lib/Dropdown"
import { Dropdown } from "react-bootstrap"
import { MenuItem } from "react-bootstrap"
export class BucketDropdown extends React.Component {
constructor(props) {
super(props)
this.state = {
showBucketDropdown: false
showBucketDropdown: false,
}
}
toggleDropdown() {
if (this.state.showBucketDropdown) {
this.setState({
showBucketDropdown: false
showBucketDropdown: false,
})
} else {
this.setState({
showBucketDropdown: true
showBucketDropdown: true,
})
}
}
@@ -44,38 +45,35 @@ export class BucketDropdown extends React.Component {
render() {
const { bucket, showBucketPolicy, deleteBucket, currentBucket } = this.props
return (
<Dropdown
open = {this.state.showBucketDropdown}
onToggle = {this.toggleDropdown.bind(this)}
className="bucket-dropdown"
<Dropdown
pullRight
open={this.state.showBucketDropdown}
onToggle={this.toggleDropdown.bind(this)}
className="buckets__item__actions"
id="bucket-dropdown"
>
<Dropdown.Toggle noCaret>
<Dropdown.Toggle noCaret className="dropdown-toggle--icon">
<i className="zmdi zmdi-more-vert" />
</Dropdown.Toggle>
<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>
<MenuItem
onClick={e => {
e.stopPropagation()
showBucketPolicy()
}}
>
{" "}
Edit Policy
</MenuItem>
<MenuItem
onClick={e => {
e.stopPropagation()
deleteBucket(bucket)
}}
>
{" "}
Delete Bucket
</MenuItem>
</Dropdown.Menu>
</Dropdown>
)
@@ -85,7 +83,7 @@ export class BucketDropdown extends React.Component {
const mapDispatchToProps = dispatch => {
return {
deleteBucket: bucket => dispatch(actionsBuckets.deleteBucket(bucket)),
showBucketPolicy: () => dispatch(actionsBuckets.showBucketPolicy())
showBucketPolicy: () => dispatch(actionsBuckets.showBucketPolicy()),
}
}

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

@@ -42,16 +42,10 @@ export class BucketList extends React.Component {
render() {
const { visibleBuckets } = this.props
return (
<div className="fesl-inner">
<Scrollbars
renderTrackVertical={props => <div className="scrollbar-vertical" />}
>
<ul>
{visibleBuckets.map(bucket => (
<BucketContainer key={bucket} bucket={bucket} />
))}
</ul>
</Scrollbars>
<div className="buckets__list">
{visibleBuckets.map(bucket => (
<BucketContainer key={bucket} bucket={bucket} />
))}
</div>
)
}
@@ -59,7 +53,7 @@ export class BucketList extends React.Component {
const mapStateToProps = state => {
return {
visibleBuckets: getVisibleBuckets(state)
visibleBuckets: getVisibleBuckets(state),
}
}
@@ -67,7 +61,7 @@ const mapDispatchToProps = dispatch => {
return {
fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets()),
setBucketList: buckets => dispatch(actionsBuckets.setList(buckets)),
selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket))
selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket)),
}
}

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

@@ -21,24 +21,29 @@ 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="modal-policy"
animation={ false }
show={ showBucketPolicy }
onHide={ hideBucketPolicy }
<Modal
className="policy"
animation={false}
show={showBucketPolicy}
onHide={hideBucketPolicy}
>
<ModalHeader>
Bucket Policy (
{ currentBucket })
<button className="close close-alt" onClick={ hideBucketPolicy }>
<span>×</span>
</button>
</ModalHeader>
<div className="pm-body">
<Modal.Header>
Bucket Policy
<small>Bucket Name: {currentBucket}</small>
<i className="close" onClick={hideBucketPolicy} />
</Modal.Header>
<div className="policy__content">
<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>
)
@@ -48,14 +53,14 @@ const mapStateToProps = state => {
return {
currentBucket: state.buckets.currentBucket,
showBucketPolicy: state.buckets.showBucketPolicy,
policies: state.buckets.policies
policies: state.buckets.policies,
}
}
const mapDispatchToProps = dispatch => {
return {
hideBucketPolicy: () => dispatch(actionsBuckets.hideBucketPolicy())
hideBucketPolicy: () => dispatch(actionsBuckets.hideBucketPolicy()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)
export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)

24
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="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 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>
)
@@ -37,7 +37,7 @@ const mapDispatchToProps = dispatch => {
return {
onChange: filter => {
dispatch(actionsBuckets.setFilter(filter))
}
},
}
}

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

@@ -23,7 +23,7 @@ export class MakeBucketModal extends React.Component {
constructor(props) {
super(props)
this.state = {
bucketName: ""
bucketName: "",
}
}
onSubmit(e) {
@@ -37,7 +37,7 @@ export class MakeBucketModal extends React.Component {
}
hideModal() {
this.setState({
bucketName: ""
bucketName: "",
})
this.props.hideMakeBucketModal()
}
@@ -45,30 +45,32 @@ export class MakeBucketModal extends React.Component {
const { showMakeBucketModal } = this.props
return (
<Modal
className="modal-create-bucket"
className="create-bucket"
bsSize="small"
animation={false}
show={showMakeBucketModal}
onHide={this.hideModal.bind(this)}
>
<button className="close close-alt" onClick={this.hideModal.bind(this)}>
<span>×</span>
</button>
<ModalBody>
<i className="close" onClick={this.hideModal.bind(this)} />
<Modal.Body>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="input-group">
<div className="form-group form-group--centered">
<input
className="ig-text"
className="form-group__field"
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="ig-helpers" />
<i className="form-group__helper" />
</div>
</form>
</ModalBody>
</Modal.Body>
</Modal>
)
}
@@ -76,14 +78,14 @@ export class MakeBucketModal extends React.Component {
const mapStateToProps = state => {
return {
showMakeBucketModal: state.buckets.showMakeBucketModal
showMakeBucketModal: state.buckets.showMakeBucketModal,
}
}
const mapDispatchToProps = dispatch => {
return {
makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
hideMakeBucketModal: () => dispatch(actionsBuckets.hideMakeBucketModal())
hideMakeBucketModal: () => dispatch(actionsBuckets.hideMakeBucketModal()),
}
}

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

@@ -14,11 +14,8 @@
* 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"
@@ -26,51 +23,55 @@ 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 = '*'
if (newPrefix === "") newPrefix = "*"
let policyUpdated =
policy == "readonly"
? "Read Only"
: policy == "writeonly"
? "Write Only"
: policy == "readwrite" ? "Read and Write" : ""
return (
<div className="pmb-list">
<div className="pmbl-item">
{ newPrefix }
<div className="policy__row">
<div className="form-group">
<input
type="text"
value={newPrefix}
className="form-group__field form-group__field--static"
readOnly
/>
</div>
<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 className="form-group policy__access">
<input
type="text"
value={policyUpdated}
className="form-group__field form-group__field--static"
readOnly
/>
</div>
<button
className="btn btn--sm btn--danger"
onClick={this.removePolicy.bind(this)}
>
Remove
</button>
</div>
)
}
@@ -78,7 +79,7 @@ export class Policy extends React.Component {
const mapStateToProps = state => {
return {
currentBucket: state.buckets.currentBucket
currentBucket: state.buckets.currentBucket,
}
}
@@ -86,8 +87,13 @@ 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)

77
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
policy: this.policy.value,
})
.then(() => {
fetchPolicies(currentBucket)
this.prefix.value = ''
this.prefix.value = ""
})
.catch(e => showAlert("danger", e.message))
}
render() {
return (
<header className="pmb-list">
<div className="pmbl-item">
<input
<div className="policy__row policy__row--add">
<div className="form-group">
<input
type="text"
ref={ prefix => this.prefix = prefix }
className="form-control"
ref={prefix => (this.prefix = prefix)}
className="form-group__field"
placeholder="Prefix"
/>
<i className="form-group__helper" />
</div>
<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>
<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>
</select>
<i className="form-group__helper" />
</div>
<div className="pmbl-item">
<button className="btn btn-block btn-primary" onClick={ this.handlePolicySubmit.bind(this) }>
Add
</button>
</div>
</header>
<button
className="btn btn--sm btn--primary"
onClick={this.handlePolicySubmit.bind(this)}
>
Add
</button>
</div>
)
}
}
@@ -99,7 +99,7 @@ export class PolicyInput extends React.Component {
const mapStateToProps = state => {
return {
currentBucket: state.buckets.currentBucket,
policies: state.buckets.policies
policies: state.buckets.policies,
}
}
@@ -108,8 +108,13 @@ 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

@@ -26,9 +26,11 @@ describe("Bucket", () => {
it("should call selectBucket when clicked", () => {
const selectBucket = jest.fn()
const wrapper = shallow(
<Bucket bucket={"test"} selectBucket={selectBucket} />
<Bucket bucket={"test"} selectBucket={selectBucket} />,
)
wrapper.find("li").simulate("click", { preventDefault: jest.fn() })
wrapper.find("li").simulate("click", {
preventDefault: jest.fn(),
})
expect(selectBucket).toHaveBeenCalledWith("test")
})

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

@@ -26,26 +26,28 @@ describe("BucketContainer", () => {
beforeEach(() => {
store = mockStore({
buckets: {
currentBucket: "Test"
}
currentBucket: "Test",
},
})
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,13 +24,9 @@ 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()
@@ -39,24 +35,28 @@ describe("BucketDropdown", () => {
it("should call showBucketPolicy when Edit Policy link is clicked", () => {
const showBucketPolicy = jest.fn()
const wrapper = shallow(
<BucketDropdown showBucketPolicy={showBucketPolicy} />
<BucketDropdown showBucketPolicy={showBucketPolicy} />,
)
wrapper
.find("li a")
.at(0)
.simulate("click", { stopPropagation: jest.fn() })
.simulate("click", {
stopPropagation: jest.fn(),
})
expect(showBucketPolicy).toHaveBeenCalled()
})
it("should call deleteBucket when Delete link is clicked", () => {
const deleteBucket = jest.fn()
const wrapper = shallow(
<BucketDropdown bucket={"test"} deleteBucket={deleteBucket} />
<BucketDropdown bucket={"test"} deleteBucket={deleteBucket} />,
)
wrapper
.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

@@ -23,7 +23,7 @@ jest.mock("../../web", () => ({
LoggedIn: jest
.fn(() => false)
.mockReturnValueOnce(true)
.mockReturnValueOnce(true)
.mockReturnValueOnce(true),
}))
describe("BucketList", () => {
@@ -35,7 +35,7 @@ describe("BucketList", () => {
it("should call fetchBuckets before component is mounted", () => {
const fetchBuckets = jest.fn()
const wrapper = shallow(
<BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />
<BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />,
)
expect(fetchBuckets).toHaveBeenCalled()
})
@@ -49,7 +49,7 @@ describe("BucketList", () => {
visibleBuckets={[]}
setBucketList={setBucketList}
selectBucket={selectBucket}
/>
/>,
)
expect(setBucketList).toHaveBeenCalledWith(["bk1"])
expect(selectBucket).toHaveBeenCalledWith("bk1", "pre1")

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

@@ -21,13 +21,13 @@ 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", () => {
const hideBucketPolicy = jest.fn()
const wrapper = shallow(
<BucketPolicyModal hideBucketPolicy={hideBucketPolicy} policies={[]} />
<BucketPolicyModal hideBucketPolicy={hideBucketPolicy} policies={[]} />,
)
wrapper.find("button").simulate("click")
expect(hideBucketPolicy).toHaveBeenCalled()
@@ -35,7 +35,7 @@ describe("BucketPolicyModal", () => {
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,7 +26,11 @@ 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")
})
})

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

@@ -26,7 +26,7 @@ describe("MakeBucketModal", () => {
it("should call hideMakeBucketModal when close button is clicked", () => {
const hideMakeBucketModal = jest.fn()
const wrapper = shallow(
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />,
)
wrapper.find("button").simulate("click")
expect(hideMakeBucketModal).toHaveBeenCalled()
@@ -35,10 +35,12 @@ describe("MakeBucketModal", () => {
it("bucketName should be cleared before hiding the modal", () => {
const hideMakeBucketModal = jest.fn()
const wrapper = shallow(
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
<MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />,
)
wrapper.find("input").simulate("change", {
target: { value: "test" }
target: {
value: "test",
},
})
expect(wrapper.state("bucketName")).toBe("test")
wrapper.find("button").simulate("click")
@@ -52,12 +54,16 @@ describe("MakeBucketModal", () => {
<MakeBucketModal
makeBucket={makeBucket}
hideMakeBucketModal={hideMakeBucketModal}
/>
/>,
)
wrapper.find("input").simulate("change", {
target: { value: "test" }
target: {
value: "test",
},
})
wrapper.find("form").simulate("submit", {
preventDefault: jest.fn(),
})
wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
expect(makeBucket).toHaveBeenCalledWith("test")
})
@@ -68,12 +74,16 @@ describe("MakeBucketModal", () => {
<MakeBucketModal
makeBucket={makeBucket}
hideMakeBucketModal={hideMakeBucketModal}
/>
/>,
)
wrapper.find("input").simulate("change", {
target: { value: "test" }
target: {
value: "test",
},
})
wrapper.find("form").simulate("submit", {
preventDefault: jest.fn(),
})
wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
expect(hideMakeBucketModal).toHaveBeenCalled()
expect(wrapper.state("bucketName")).toBe("")
})

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

@@ -23,32 +23,36 @@ import web from "../../web"
jest.mock("../../web", () => ({
SetBucketPolicy: jest.fn(() => {
return Promise.resolve()
})
}),
}))
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"
policy: "none",
})
setImmediate(() => {
expect(fetchPolicies).toHaveBeenCalledWith("bucket")
})
@@ -56,8 +60,13 @@ describe("Policy", () => {
it("should change the empty string to '*' while displaying prefixes", () => {
const wrapper = shallow(
<Policy currentBucket={"bucket"} prefix={""} policy={READ_ONLY} />
<Policy currentBucket={"bucket"} prefix={""} policy={READ_ONLY} />,
)
expect(wrapper.find(".pmbl-item").at(0).text()).toEqual("*")
expect(
wrapper
.find(".pmbl-item")
.at(0)
.text(),
).toEqual("*")
})
})

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

@@ -23,19 +23,21 @@ import web from "../../web"
jest.mock("../../web", () => ({
SetBucketPolicy: jest.fn(() => {
return Promise.resolve()
})
}),
}))
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", () => {
const fetchPolicies = jest.fn()
const wrapper = shallow(
<PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies} />
<PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies} />,
)
setImmediate(() => {
expect(fetchPolicies).toHaveBeenCalled()
@@ -45,16 +47,26 @@ 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",
prefix: "baz",
policy: READ_ONLY
policy: READ_ONLY,
})
setImmediate(() => {
@@ -65,13 +77,25 @@ 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: "",
})
})
})

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

@@ -17,23 +17,31 @@
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()
}),
DeleteBucket: jest.fn(() => {
return Promise.resolve()
})
}),
}))
jest.mock("../../objects/actions", () => ({
selectPrefix: () => dispatch => {}
selectPrefix: () => dispatch => {},
}))
const middlewares = [thunk]
@@ -43,8 +51,14 @@ 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()
@@ -56,8 +70,14 @@ 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(() => {
@@ -70,8 +90,14 @@ 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(() => {
@@ -83,7 +109,10 @@ 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()
@@ -93,7 +122,10 @@ 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()
@@ -103,7 +135,10 @@ 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()
@@ -113,7 +148,10 @@ 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()
@@ -123,7 +161,10 @@ 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()
@@ -133,7 +174,10 @@ 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()
@@ -142,7 +186,12 @@ 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)
@@ -150,7 +199,12 @@ 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)
@@ -159,8 +213,14 @@ 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()
@@ -168,18 +228,37 @@ 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)
})
},
)
})

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

@@ -26,36 +26,40 @@ describe("buckets reducer", () => {
filter: "",
currentBucket: "",
showBucketPolicy: false,
showMakeBucketModal: false
showMakeBucketModal: false,
})
})
it("should handle SET_LIST", () => {
const newState = reducer(undefined, {
type: actions.SET_LIST,
buckets: ["bk1", "bk2"]
buckets: ["bk1", "bk2"],
})
expect(newState.list).toEqual(["bk1", "bk2"])
})
it("should handle ADD", () => {
const newState = reducer(
{ list: ["test1", "test2"] },
{
list: ["test1", "test2"],
},
{
type: actions.ADD,
bucket: "test3"
}
bucket: "test3",
},
)
expect(newState.list).toEqual(["test3", "test1", "test2"])
})
it("should handle REMOVE", () => {
const newState = reducer(
{ list: ["test1", "test2"] },
{
list: ["test1", "test2"],
},
{
type: actions.REMOVE,
bucket: "test2"
}
bucket: "test2",
},
)
expect(newState.list).toEqual(["test1"])
})
@@ -63,7 +67,7 @@ describe("buckets reducer", () => {
it("should handle SET_FILTER", () => {
const newState = reducer(undefined, {
type: actions.SET_FILTER,
filter: "test"
filter: "test",
})
expect(newState.filter).toEqual("test")
})
@@ -71,7 +75,7 @@ describe("buckets reducer", () => {
it("should handle SET_CURRENT_BUCKET", () => {
const newState = reducer(undefined, {
type: actions.SET_CURRENT_BUCKET,
bucket: "test"
bucket: "test",
})
expect(newState.currentBucket).toEqual("test")
})
@@ -79,7 +83,7 @@ describe("buckets reducer", () => {
it("should handle SET_POLICIES", () => {
const newState = reducer(undefined, {
type: actions.SET_POLICIES,
policies: ["test1", "test2"]
policies: ["test1", "test2"],
})
expect(newState.policies).toEqual(["test1", "test2"])
})
@@ -87,15 +91,15 @@ describe("buckets reducer", () => {
it("should handle SHOW_BUCKET_POLICY", () => {
const newState = reducer(undefined, {
type: actions.SHOW_BUCKET_POLICY,
show: true
show: true,
})
expect(newState.showBucketPolicy).toBeTruthy()
})
it("should handle SHOW_MAKE_BUCKET_MODAL", () => {
const newState = reducer(undefined, {
type: actions.SHOW_MAKE_BUCKET_MODAL,
show: true
show: true,
})
expect(newState.showMakeBucketModal).toBeTruthy()
})

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

@@ -21,8 +21,8 @@ describe("getVisibleBuckets", () => {
beforeEach(() => {
state = {
buckets: {
list: ["test1", "test11", "test2"]
}
list: ["test1", "test11", "test2"],
},
}
})

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

@@ -52,14 +52,14 @@ export const fetchBuckets = () => {
export const setList = buckets => {
return {
type: SET_LIST,
buckets
buckets,
}
}
export const setFilter = filter => {
return {
type: SET_FILTER,
filter
filter,
}
}
@@ -73,7 +73,7 @@ export const selectBucket = (bucket, prefix) => {
export const setCurrentBucket = bucket => {
return {
type: SET_CURRENT_BUCKET,
bucket
bucket,
}
}
@@ -81,7 +81,7 @@ export const makeBucket = bucket => {
return function(dispatch) {
return web
.MakeBucket({
bucketName: bucket
bucketName: bucket,
})
.then(() => {
dispatch(addBucket(bucket))
@@ -91,9 +91,9 @@ export const makeBucket = bucket => {
dispatch(
alertActions.set({
type: "danger",
message: err.message
})
)
message: err.message,
}),
),
)
}
}
@@ -102,24 +102,24 @@ export const deleteBucket = bucket => {
return function(dispatch) {
return web
.DeleteBucket({
bucketName: bucket
bucketName: bucket,
})
.then(() => {
dispatch(
alertActions.set({
type: "info",
message: "Bucket '" + bucket + "' has been deleted."
})
message: "Bucket '" + bucket + "' has been deleted.",
}),
)
dispatch(removeBucket(bucket))
dispatch(fetchBuckets())
})
.catch(err => {
.catch(err => {
dispatch(
alertActions.set({
type: "danger",
message: err.message
})
message: err.message,
}),
)
})
}
@@ -127,43 +127,41 @@ export const deleteBucket = bucket => {
export const addBucket = bucket => ({
type: ADD,
bucket
bucket,
})
export const removeBucket = bucket => ({
type: REMOVE,
bucket
bucket,
})
export const showMakeBucketModal = () => ({
type: SHOW_MAKE_BUCKET_MODAL,
show: true
show: true,
})
export const hideMakeBucketModal = () => ({
type: SHOW_MAKE_BUCKET_MODAL,
show: false
show: false,
})
export const fetchPolicies = bucket => {
return function(dispatch) {
return web
.ListAllBucketPolicies({
bucketName: bucket
bucketName: 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(
alertActions.set({
type: "danger",
message: err.message
})
message: err.message,
}),
)
})
}
@@ -171,15 +169,15 @@ export const fetchPolicies = bucket => {
export const setPolicies = policies => ({
type: SET_POLICIES,
policies
policies,
})
export const showBucketPolicy = () => ({
type: SHOW_BUCKET_POLICY,
show: true
show: true,
})
export const hideBucketPolicy = () => ({
type: SHOW_BUCKET_POLICY,
show: false
})
show: false,
})

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

@@ -31,20 +31,20 @@ export default (
currentBucket: "",
showMakeBucketModal: false,
policies: [],
showBucketPolicy: false
showBucketPolicy: false,
},
action
action,
) => {
switch (action.type) {
case actionsBuckets.SET_LIST:
return {
...state,
list: action.buckets
list: action.buckets,
}
case actionsBuckets.ADD:
return {
...state,
list: [action.bucket, ...state.list]
list: [action.bucket, ...state.list],
}
case actionsBuckets.REMOVE:
return {
@@ -54,27 +54,27 @@ export default (
case actionsBuckets.SET_FILTER:
return {
...state,
filter: action.filter
filter: action.filter,
}
case actionsBuckets.SET_CURRENT_BUCKET:
return {
...state,
currentBucket: action.bucket
currentBucket: action.bucket,
}
case actionsBuckets.SHOW_MAKE_BUCKET_MODAL:
return {
...state,
showMakeBucketModal: action.show
showMakeBucketModal: action.show,
}
case actionsBuckets.SET_POLICIES:
return {
...state,
policies: action.policies
policies: action.policies,
}
case actionsBuckets.SHOW_BUCKET_POLICY:
return {
...state,
showBucketPolicy: action.show
showBucketPolicy: action.show,
}
default:
return state

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

@@ -22,7 +22,7 @@ const bucketsFilterSelector = state => state.buckets.filter
export const getVisibleBuckets = createSelector(
bucketsSelector,
bucketsFilterSelector,
(buckets, filter) => buckets.filter(bucket => bucket.indexOf(filter) > -1)
(buckets, filter) => buckets.filter(bucket => bucket.indexOf(filter) > -1),
)
export const getCurrentBucket = state => state.buckets.currentBucket

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

@@ -14,22 +14,30 @@
* 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></noscript> )
if (latestUiVersion === currentUiVersion) return <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"></i> </OverlayTrigger>
<OverlayTrigger
placement="left"
overlay={
<Tooltip id="tt-version-update">
New update available. Click to refresh.
</Tooltip>
}
>
{" "}
<i className="fa fa-refresh" />{" "}
</OverlayTrigger>
</a>
</li>
)
@@ -37,6 +45,6 @@ let BrowserUpdate = ({latestUiVersion}) => {
export default connect(state => {
return {
latestUiVersion: state.latestUiVersion
latestUiVersion: state.latestUiVersion,
}
})(BrowserUpdate)

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

@@ -18,7 +18,7 @@ import createHistory from "history/createBrowserHistory"
import { minioBrowserPrefix } from "./constants"
const history = createHistory({
basename: minioBrowserPrefix
basename: minioBrowserPrefix,
})
export default history

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,4 +18,6 @@ import "jest-enzyme"
import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
configure({ adapter: new Adapter() })
configure({
adapter: new Adapter(),
})

37
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,31 +54,34 @@ 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-load").classList.add("pl-" + i)
document.querySelector(".page-loader").classList.add("page-loader--" + i)
handleLoader(i + 1)
}, delay[i])
}

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

@@ -14,30 +14,54 @@
* 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
}
@@ -45,9 +69,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
}
@@ -55,9 +79,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
}
@@ -65,42 +89,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"
}

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

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

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

@@ -1,107 +0,0 @@
/*
* Minio Cloud Storage (C) 2018 Minio, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from "react"
import { connect } from "react-redux"
import { Dropdown } from "react-bootstrap"
import ShareObjectModal from "./ShareObjectModal"
import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
import * as objectsActions from "./actions"
import {
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
} from "../constants"
export class ObjectActions extends React.Component {
constructor(props) {
super(props)
this.state = {
showDeleteConfirmation: false
}
}
shareObject(e) {
e.preventDefault()
const { object, shareObject } = this.props
shareObject(
object.name,
SHARE_OBJECT_EXPIRY_DAYS,
SHARE_OBJECT_EXPIRY_HOURS,
SHARE_OBJECT_EXPIRY_MINUTES
)
}
deleteObject() {
const { object, deleteObject } = this.props
deleteObject(object.name)
}
showDeleteConfirmModal(e) {
e.preventDefault()
this.setState({ showDeleteConfirmation: true })
}
hideDeleteConfirmModal() {
this.setState({
showDeleteConfirmation: false
})
}
render() {
const { object, showShareObjectModal } = this.props
return (
<Dropdown id={`obj-actions-${object.name}`}>
<Dropdown.Toggle noCaret className="fia-toggle" />
<Dropdown.Menu>
<a
href=""
className="fiad-action"
onClick={this.shareObject.bind(this)}
>
<i className="fa fa-copy" />
</a>
<a
href=""
className="fiad-action"
onClick={this.showDeleteConfirmModal.bind(this)}
>
<i className="fa fa-trash" />
</a>
</Dropdown.Menu>
{showShareObjectModal && <ShareObjectModal object={object} />}
{this.state.showDeleteConfirmation && (
<DeleteObjectConfirmModal
deleteObject={this.deleteObject.bind(this)}
hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
/>
)}
</Dropdown>
)
}
}
const mapStateToProps = (state, ownProps) => {
return {
object: ownProps.object,
showShareObjectModal: state.objects.shareObject.show
}
}
const mapDispatchToProps = dispatch => {
return {
shareObject: (object, days, hours, minutes) =>
dispatch(objectsActions.shareObject(object, days, hours, minutes)),
deleteObject: object => dispatch(objectsActions.deleteObject(object))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ObjectActions)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,95 +0,0 @@
/*
* Minio Cloud Storage (C) 2018 Minio, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from "react"
import { shallow } from "enzyme"
import { ObjectActions } from "../ObjectActions"
describe("ObjectActions", () => {
it("should render without crashing", () => {
shallow(<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />)
})
it("should show DeleteObjectConfirmModal when delete action is clicked", () => {
const wrapper = shallow(
<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
expect(wrapper.state("showDeleteConfirmation")).toBeTruthy()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(1)
})
it("should hide DeleteObjectConfirmModal when Cancel button is clicked", () => {
const wrapper = shallow(
<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
wrapper.find("DeleteObjectConfirmModal").prop("hideDeleteConfirmModal")()
wrapper.update()
expect(wrapper.state("showDeleteConfirmation")).toBeFalsy()
expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(0)
})
it("should call deleteObject with object name", () => {
const deleteObject = jest.fn()
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
deleteObject={deleteObject}
/>
)
wrapper
.find("a")
.last()
.simulate("click", { preventDefault: jest.fn() })
wrapper.find("DeleteObjectConfirmModal").prop("deleteObject")()
expect(deleteObject).toHaveBeenCalledWith("obj1")
})
it("should call shareObject with object and expiry", () => {
const shareObject = jest.fn()
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
shareObject={shareObject}
/>
)
wrapper
.find("a")
.first()
.simulate("click", { preventDefault: jest.fn() })
expect(shareObject).toHaveBeenCalledWith("obj1", 5, 0, 0)
})
it("should render ShareObjectModal when an object is shared", () => {
const wrapper = shallow(
<ObjectActions
object={{ name: "obj1" }}
currentPrefix={"pre1/"}
showShareObjectModal={true}
/>
)
expect(wrapper.find("Connect(ShareObjectModal)").length).toBe(1)
})
})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -26,7 +26,7 @@ const rootReducer = combineReducers({
alert,
buckets,
objects,
uploads
uploads,
})
export default rootReducer

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

@@ -30,15 +30,15 @@ export class AbortConfirmModal extends React.Component {
render() {
const { hideAbort } = this.props
let baseClass = classNames({
"abort-upload": true
"abort-upload": true,
})
let okIcon = classNames({
fa: true,
"fa-times": true
"fa-times": true,
})
let cancelIcon = classNames({
fa: true,
"fa-cloud-upload": true
"fa-cloud-upload": true,
})
return (
@@ -61,14 +61,14 @@ export class AbortConfirmModal extends React.Component {
const mapStateToProps = state => {
return {
uploads: state.uploads.files
uploads: state.uploads.files,
}
}
const mapDispatchToProps = dispatch => {
return {
abort: slug => dispatch(uploadsActions.abortUpload(slug)),
hideAbort: () => dispatch(uploadsActions.hideAbortModal())
hideAbort: () => dispatch(uploadsActions.hideAbortModal()),
}
}

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

@@ -33,29 +33,13 @@ 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
style={style}
activeStyle={activeStyle}
rejectStyle={rejectStyle}
className="objects"
activeClassName="objects--active"
rejectClassName="objects--reject"
disableClick={true}
onDrop={this.onDrop.bind(this)}
>
@@ -67,7 +51,7 @@ export class Dropzone extends React.Component {
const mapDispatchToProps = dispatch => {
return {
uploadFile: file => dispatch(actions.uploadFile(file))
uploadFile: file => dispatch(actions.uploadFile(file)),
}
}

Some files were not shown because too many files have changed in this diff Show More