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

browser/app/js/buckets/Policy.js

@@ -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)