Ported AccessHistoryModal and ActivityLogModal to React-Bootstrap

web/react/components/access_history_modal.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var Modal = ReactBootstrap.Modal;
 var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
@@ -30,16 +31,23 @@ export default class AccessHistoryModal extends React.Component {
     }
     onShow() {
         AsyncClient.getAudits();
+
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+        }
     }
     onHide() {
-        $('#user_settings').modal('show');
         this.setState({moreInfo: []});
+        this.props.onModalDismissed();
     }
     componentDidMount() {
         UserStore.addAuditsChangeListener(this.onAuditChange);
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.onShow);
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.onHide);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.show && !prevProps.show) {
+            this.onShow();
+        }
     }
     componentWillUnmount() {
         UserStore.removeAuditsChangeListener(this.onAuditChange);
@@ -380,43 +388,23 @@ export default class AccessHistoryModal extends React.Component {
         }
 
         return (
-            <div>
-                <div
-                    className='modal fade'
-                    ref='modal'
-                    id='access-history'
-                    tabIndex='-1'
-                    role='dialog'
-                    aria-hidden='true'
-                >
-                    <div className='modal-dialog modal-lg'>
-                        <div className='modal-content'>
-                            <div className='modal-header'>
-                                <button
-                                    type='button'
-                                    className='close'
-                                    data-dismiss='modal'
-                                    aria-label='Close'
-                                >
-                                    <span aria-hidden='true'>{'×'}</span>
-                                </button>
-                                <h4
-                                    className='modal-title'
-                                    id='myModalLabel'
-                                >
-                                    {'Access History'}
-                                </h4>
-                            </div>
-                            <div
-                                ref='modalBody'
-                                className='modal-body'
-                            >
-                                {content}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <Modal
+                show={this.props.show}
+                onHide={this.onHide}
+                bsSize='large'
+            >
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>{'Access History'}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body ref='modalBody'>
+                    {content}
+                </Modal.Body>
+            </Modal>
         );
     }
 }
+
+AccessHistoryModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onModalDismissed: React.PropTypes.func.isRequired
+};

web/react/components/activity_log_modal.jsx

@@ -4,6 +4,7 @@
 const UserStore = require('../stores/user_store.jsx');
 const Client = require('../utils/client.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
+const Modal = ReactBootstrap.Modal;
 const LoadingScreen = require('./loading_screen.jsx');
 const Utils = require('../utils/utils.jsx');
 
@@ -49,16 +50,23 @@ export default class ActivityLogModal extends React.Component {
     }
     onShow() {
         AsyncClient.getSessions();
+
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+        }
     }
     onHide() {
-        $('#user_settings').modal('show');
         this.setState({moreInfo: []});
+        this.props.onModalDismissed();
     }
     componentDidMount() {
         UserStore.addSessionsChangeListener(this.onListenerChange);
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.onShow);
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.onHide);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.show && !prevProps.show) {
+            this.onShow();
+        }
     }
     componentWillUnmount() {
         UserStore.removeSessionsChangeListener(this.onListenerChange);
@@ -151,44 +159,24 @@ export default class ActivityLogModal extends React.Component {
         }
 
         return (
-            <div>
-                <div
-                    className='modal fade'
-                    ref='modal'
-                    id='activity-log'
-                    tabIndex='-1'
-                    role='dialog'
-                    aria-hidden='true'
-                >
-                    <div className='modal-dialog modal-lg'>
-                        <div className='modal-content'>
-                            <div className='modal-header'>
-                                <button
-                                    type='button'
-                                    className='close'
-                                    data-dismiss='modal'
-                                    aria-label='Close'
-                                >
-                                    <span aria-hidden='true'>&times;</span>
-                                </button>
-                                <h4
-                                    className='modal-title'
-                                    id='myModalLabel'
-                                >
-                                    Active Sessions
-                                </h4>
-                            </div>
-                            <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p>
-                            <div
-                                ref='modalBody'
-                                className='modal-body'
-                            >
-                                {content}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <Modal
+                show={this.props.show}
+                onHide={this.onHide}
+                bsSize='large'
+            >
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>{'Active Sessions'}</Modal.Title>
+                </Modal.Header>
+                <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
+                <Modal.Body ref='modalBody'>
+                    {content}
+                </Modal.Body>
+            </Modal>
         );
     }
 }
+
+ActivityLogModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onModalDismissed: React.PropTypes.func.isRequired
+};

web/react/components/user_settings/user_settings_security.jsx

@@ -3,6 +3,8 @@
 
 var SettingItemMin = require('../setting_item_min.jsx');
 var SettingItemMax = require('../setting_item_max.jsx');
+var AccessHistoryModal = require('../access_history_modal.jsx');
+var ActivityLogModal = require('../activity_log_modal.jsx');
 var Client = require('../../utils/client.jsx');
 var AsyncClient = require('../../utils/async_client.jsx');
 var Constants = require('../../utils/constants.jsx');
@@ -18,7 +20,10 @@ export default class SecurityTab extends React.Component {
         this.handleClose = this.handleClose.bind(this);
         this.setupInitialState = this.setupInitialState.bind(this);
 
-        this.state = this.setupInitialState();
+        const state = this.setupInitialState();
+        state.showAccessHistoryModal = false;
+        state.showActivityLogModal = false;
+        this.state = state;
     }
     submitPassword(e) {
         e.preventDefault();
@@ -75,12 +80,6 @@ export default class SecurityTab extends React.Component {
     updateConfirmPassword(e) {
         this.setState({confirmPassword: e.target.value});
     }
-    handleHistoryOpen() {
-        $('#user_settings').modal('hide');
-    }
-    handleDevicesOpen() {
-        $('#user_settings').modal('hide');
-    }
     handleClose() {
         $(ReactDOM.findDOMNode(this)).find('.form-control').each(function resetValue() {
             this.value = '';
@@ -253,25 +252,29 @@ export default class SecurityTab extends React.Component {
                     <div className='divider-dark'/>
                     <br></br>
                     <a
-                        data-toggle='modal'
                         className='security-links theme'
-                        data-target='#access-history'
                         href='#'
-                        onClick={this.handleHistoryOpen}
+                        onClick={() => this.setState({showAccessHistoryModal: true})}
                     >
                         <i className='fa fa-clock-o'></i>View Access History
                     </a>
                     <b> </b>
                     <a
-                        data-toggle='modal'
                         className='security-links theme'
-                        data-target='#activity-log'
                         href='#'
-                        onClick={this.handleDevicesOpen}
+                        onClick={() => this.setState({showActivityLogModal: true})}
                     >
                         <i className='fa fa-globe'></i>View and Logout of Active Sessions
                     </a>
                 </div>
+                <AccessHistoryModal
+                    show={this.state.showAccessHistoryModal}
+                    onModalDismissed={() => this.setState({showAccessHistoryModal: false})}
+                />
+                <ActivityLogModal
+                    show={this.state.showActivityLogModal}
+                    onModalDismissed={() => this.setState({showActivityLogModal: false})}
+                />
             </div>
         );
     }

web/react/pages/channel.jsx

@@ -23,8 +23,6 @@ var ChannelMembersModal = require('../components/channel_members.jsx');
 var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
 var TeamMembersModal = require('../components/team_members.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
-var AccessHistoryModal = require('../components/access_history_modal.jsx');
-var ActivityLogModal = require('../components/activity_log_modal.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
 var RegisterAppModal = require('../components/register_app_modal.jsx');
 var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx');
@@ -156,16 +154,6 @@ function setupChannelPage(props) {
         document.getElementById('post_deleted_modal')
     );
 
-    ReactDOM.render(
-        <AccessHistoryModal />,
-        document.getElementById('access_history_modal')
-    );
-
-    ReactDOM.render(
-        <ActivityLogModal />,
-        document.getElementById('activity_log_modal')
-    );
-
     ReactDOM.render(
         <RemovedFromChannelModal />,
         document.getElementById('removed_from_channel_modal')