FF-226 #comment Added fixed react-bootstrap modals for secret key vie…

…wing, resetting, and deleting in user.js
4dn-dcic · Sep 19, 2016 · 97b8509 · 97b8509
1 parent 979d5d5
commit 97b8509
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/src/encoded/static/components/user.js b/src/encoded/static/components/user.js
@@ -7,7 +7,7 @@ var globals = require('./globals');
 var _ = require('underscore');
 var parseAndLogError = require('./mixins').parseAndLogError;
 // var navigation = require('./navigation');
-import { Modal } from 'react-bootstrap';
+var Modal = require('react-bootstrap').Modal;
 var ItemStore = require('./lib/store').ItemStore;
 var Form = require('./form').Form;
 var ObjectPicker = require('./inputs').ObjectPicker;
@@ -91,34 +91,48 @@ var AccessKeyTable = React.createClass({
     },
     showNewSecret: function(title, response) {
         this.setState({modal:
-            <Modal title={title} onHide={this.hideModal}>
-                <div className="modal-body">
+            <Modal show={true} onHide={this.hideModal}>
+            <Modal.Header>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+                <Modal.Body>
                     Please make a note of the new secret access key.
                     This is the last time you will be able to view it.
                     <dl className="key-value">
-                        <dt>Access Key ID</dt>
-                        <dd>{response.access_key_id}</dd>
-                        <dt>Secret Access Key</dt>
-                        <dd>{response.secret_access_key}</dd>
+                        <div>
+                            <dt>Access Key ID</dt>
+                            <dd>{response.access_key_id}</dd>
+                        </div>
+                        <div>
+                            <dt>Secret Access Key</dt>
+                            <dd>{response.secret_access_key}</dd>
+                        </div>
                     </dl>
-                </div>
+                </Modal.Body>
             </Modal>
         });
     },
 
     onDelete: function(item) {
         this.setState({modal:
-            <Modal title={'Access key ' + item['access_key_id'] + ' has been deleted.'} onHide={this.hideModal} />
+            <Modal show={true} onHide={this.hideModal}>
+                <Modal.Header>
+                    <Modal.Title>{'Access key ' + item['access_key_id'] + ' has been deleted.'}</Modal.Title>
+                </Modal.Header>
+            </Modal>
         });
     },
 
     onError: function(error) {
         var View = globals.content_views.lookup(error);
         this.setState({modal:
-            <Modal title="Error" onHide={this.hideModal}>
-                <div className="modal-body">
+            <Modal show={true} onHide={this.hideModal}>
+                <Modal.Header>
+                    <Modal.Title>Error</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
                     <View context={error} loadingComplete={true} />
-                </div>
+                </Modal.Body>
             </Modal>
         });
     },