revert browser newux changes (#5714)

browser/app/js/buckets/Policy.js

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