Merge pull request #1423 from hmhealey/plt737

PLT-737 Converted first set of Modals to ReactBootstrap

11 files changed, 254 insertions, 322 deletions

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index ab5686720..65b80dfb7 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -14,8 +14,8 @@ export default class AccessHistoryModal extends React.Component {
 
         this.onAuditChange = this.onAuditChange.bind(this);
         this.handleMoreInfo = this.handleMoreInfo.bind(this);
-        this.onHide = this.onHide.bind(this);
         this.onShow = this.onShow.bind(this);
+        this.onHide = this.onHide.bind(this);
         this.formatAuditInfo = this.formatAuditInfo.bind(this);
         this.handleRevokedSession = this.handleRevokedSession.bind(this);
 
@@ -39,10 +39,14 @@ export default class AccessHistoryModal extends React.Component {
     }
     onHide() {
         this.setState({moreInfo: []});
-        this.props.onModalDismissed();
+        this.props.onHide();
     }
     componentDidMount() {
         UserStore.addAuditsChangeListener(this.onAuditChange);
+
+        if (this.props.show) {
+            this.onShow();
+        }
     }
     componentDidUpdate(prevProps) {
         if (this.props.show && !prevProps.show) {
@@ -406,5 +410,5 @@ export default class AccessHistoryModal extends React.Component {
 
 AccessHistoryModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
+    onHide: React.PropTypes.func.isRequired
 };
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index af423a601..5824ce7e2 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -58,10 +58,14 @@ export default class ActivityLogModal extends React.Component {
     }
     onHide() {
         this.setState({moreInfo: []});
-        this.props.onModalDismissed();
+        this.props.onHide();
     }
     componentDidMount() {
         UserStore.addSessionsChangeListener(this.onListenerChange);
+
+        if (this.props.show) {
+            this.onShow();
+        }
     }
     componentDidUpdate(prevProps) {
         if (this.props.show && !prevProps.show) {
@@ -178,5 +182,5 @@ export default class ActivityLogModal extends React.Component {
 
 ActivityLogModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
+    onHide: React.PropTypes.func.isRequired
 };
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index 79c7f90a9..ffe7cbb5d 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -5,8 +5,12 @@ const NavbarSearchBox = require('./search_bar.jsx');
 const MessageWrapper = require('./message_wrapper.jsx');
 const PopoverListMembers = require('./popover_list_members.jsx');
 const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
+const ChannelInfoModal = require('./channel_info_modal.jsx');
 const ChannelInviteModal = require('./channel_invite_modal.jsx');
 const ChannelMembersModal = require('./channel_members_modal.jsx');
+const ChannelNotificationsModal = require('./channel_notifications_modal.jsx');
+const DeleteChannelModal = require('./delete_channel_modal.jsx');
+const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
 const UserStore = require('../stores/user_store.jsx');
@@ -180,15 +184,13 @@ export default class ChannelHeader extends React.Component {
                     key='view_info'
                     role='presentation'
                 >
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#channel_info'
-                        data-channelid={channel.id}
-                        href='#'
+                        dialogType={ChannelInfoModal}
+                        dialogProps={{channel}}
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 
@@ -263,16 +265,13 @@ export default class ChannelHeader extends React.Component {
                     key='notification_preferences'
                     role='presentation'
                 >
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        href='#'
-                        data-toggle='modal'
-                        data-target='#channel_notifications'
-                        data-title={channel.display_name}
-                        data-channelid={channel.id}
+                        dialogType={ChannelNotificationsModal}
+                        dialogProps={{channel}}
                     >
                         {'Notification Preferences'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 
@@ -302,16 +301,13 @@ export default class ChannelHeader extends React.Component {
                             key='delete_channel'
                             role='presentation'
                         >
-                            <a
+                            <ToggleModalButton
                                 role='menuitem'
-                                href='#'
-                                data-toggle='modal'
-                                data-target='#delete_channel'
-                                data-title={channel.display_name}
-                                data-channelid={channel.id}
+                                dialogType={DeleteChannelModal}
+                                dialogProps={{channel}}
                             >
                                 {'Delete '}{channelTerm}{'...'}
-                            </a>
+                            </ToggleModalButton>
                         </li>
                     );
                 }
diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx
index bccd8d0b9..18e125de3 100644
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -1,88 +1,57 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var ChannelStore = require('../stores/channel_store.jsx');
-
-export default class CommandList extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            channel_id: ChannelStore.getCurrentId()
-        };
-    }
-
-    componentDidMount() {
-        var self = this;
-        if (this.refs.modal) {
-            $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function show(e) {
-                var button = e.relatedTarget;
-                self.setState({channel_id: $(button).attr('data-channelid')});
-            });
-        }
-    }
+const Modal = ReactBootstrap.Modal;
 
+export default class ChannelInfoModal extends React.Component {
     render() {
-        var channel = ChannelStore.get(this.state.channel_id);
-
+        let channel = this.props.channel;
         if (!channel) {
-            channel = {};
-            channel.display_name = 'No Channel Found';
-            channel.name = 'No Channel Found';
-            channel.id = 'No Channel Found';
+            channel = {
+                display_name: 'No Channel Found',
+                name: 'No Channel Found',
+                id: 'No Channel Found'
+            };
         }
 
         return (
-            <div
-                className='modal fade'
-                ref='modal'
-                id='channel_info'
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
+            <Modal
+                show={this.props.show}
+                onHide={this.props.onHide}
             >
-               <div className='modal-dialog'>
-                  <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'
-                      >
-                        <span className='name'>{channel.display_name}</span>
-                      </h4>
-                    </div>
-                    <div className='modal-body'>
-                      <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>Channel Name: </div>
+                <Modal.Header closeButtton={true}>
+                    {channel.display_name}
+                </Modal.Header>
+                <Modal.Body ref='modalBody'>
+                    <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Channel Name:'}</div>
                         <div className='col-sm-9'>{channel.display_name}</div>
-                      </div>
-                      <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>Channel Handle:</div>
+                    </div>
+                    <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Channel Handle:'}</div>
                         <div className='col-sm-9'>{channel.name}</div>
-                      </div>
-                      <div className='row'>
-                        <div className='col-sm-3 info__label'>Channel ID:</div>
-                        <div className='col-sm-9'>{channel.id}</div>
-                      </div>
                     </div>
-                    <div className='modal-footer'>
-                      <button
-                          type='button'
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                      >Close</button>
+                    <div className='row'>
+                        <div className='col-sm-3 info__label'>{'Channel ID:'}</div>
+                        <div className='col-sm-9'>{channel.id}</div>
                     </div>
-                  </div>
-               </div>
-            </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.props.onHide}
+                    >
+                        {'Close'}
+                    </button>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
+
+ChannelInfoModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications_modal.jsx
index f57fc12c5..c8bd1c2dc 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications_modal.jsx
@@ -1,15 +1,15 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var Modal = ReactBootstrap.Modal;
 var SettingItemMin = require('./setting_item_min.jsx');
 var SettingItemMax = require('./setting_item_max.jsx');
 
-var Utils = require('../utils/utils.jsx');
 var Client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 
-export default class ChannelNotifications extends React.Component {
+export default class ChannelNotificationsModal extends React.Component {
     constructor(props) {
         super(props);
 
@@ -23,35 +23,17 @@ export default class ChannelNotifications extends React.Component {
         this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this);
         this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this);
         this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this);
-        this.onShow = this.onShow.bind(this);
 
+        const member = ChannelStore.getMember(props.channel.id);
         this.state = {
-            notifyLevel: '',
-            markUnreadLevel: '',
-            title: '',
+            notifyLevel: member.notify_props.desktop,
+            markUnreadLevel: member.notify_props.mark_unread,
             channelId: '',
             activeSection: ''
         };
     }
-    onShow(e) {
-        var button = e.relatedTarget;
-        var channelId = button.getAttribute('data-channelid');
-
-        const member = ChannelStore.getMember(channelId);
-        var notifyLevel = member.notify_props.desktop;
-        var markUnreadLevel = member.notify_props.mark_unread;
-
-        this.setState({
-            notifyLevel,
-            markUnreadLevel,
-            title: button.getAttribute('data-title'),
-            channelId
-        });
-    }
     componentDidMount() {
         ChannelStore.addChangeListener(this.onListenerChange);
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onListenerChange);
@@ -62,15 +44,12 @@ export default class ChannelNotifications extends React.Component {
         }
 
         const member = ChannelStore.getMember(this.state.channelId);
-        var notifyLevel = member.notify_props.desktop;
-        var markUnreadLevel = member.notify_props.mark_unread;
 
-        var newState = this.state;
-        newState.notifyLevel = notifyLevel;
-        newState.markUnreadLevel = markUnreadLevel;
-
-        if (!Utils.areObjectsEqual(this.state, newState)) {
-            this.setState(newState);
+        if (member.notify_props.desktop !== this.state.notifyLevel || member.notify_props.mark_unread !== this.state.mark_unread) {
+            this.setState({
+                notifyLevel: member.notify_props.desktop,
+                markUnreadLevel: member.notify_props.mark_unread
+            });
         }
     }
     updateSection(section) {
@@ -104,7 +83,6 @@ export default class ChannelNotifications extends React.Component {
     }
     handleUpdateNotifyLevel(notifyLevel) {
         this.setState({notifyLevel});
-        ReactDOM.findDOMNode(this.refs.modal).focus();
     }
     createNotifyLevelSection(serverError) {
         var handleUpdateSection;
@@ -262,7 +240,6 @@ export default class ChannelNotifications extends React.Component {
 
     handleUpdateMarkUnreadLevel(markUnreadLevel) {
         this.setState({markUnreadLevel});
-        ReactDOM.findDOMNode(this.refs.modal).focus();
     }
 
     createMarkUnreadLevelSection(serverError) {
@@ -347,48 +324,39 @@ export default class ChannelNotifications extends React.Component {
         }
 
         return (
-            <div
-                className='modal fade'
-                id='channel_notifications'
-                ref='modal'
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
+            <Modal
+                show={this.props.show}
+                dialogClassName='settings-modal'
+                onHide={this.props.onHide}
             >
-                <div className='modal-dialog settings-modal'>
-                    <div className='modal-content'>
-                        <div className='modal-header'>
-                            <button
-                                type='button'
-                                className='close'
-                                data-dismiss='modal'
+                <Modal.Header closeButton={true}>
+                    {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span>
+                </Modal.Header>
+                <Modal.Body>
+                    <div className='settings-table'>
+                        <div className='settings-content'>
+                            <div
+                                ref='wrapper'
+                                className='user-settings'
                             >
-                                <span aria-hidden='true'>&times;</span>
-                                <span className='sr-only'>{'Close'}</span>
-                            </button>
-                            <h4 className='modal-title'>Notification Preferences for <span className='name'>{this.state.title}</span></h4>
-                        </div>
-                        <div className='modal-body'>
-                            <div className='settings-table'>
-                            <div className='settings-content'>
-                                <div
-                                    ref='wrapper'
-                                    className='user-settings'
-                                >
-                                    <br/>
-                                    <div className='divider-dark first'/>
-                                    {this.createNotifyLevelSection(serverError)}
-                                    <div className='divider-light'/>
-                                    {this.createMarkUnreadLevelSection(serverError)}
-                                    <div className='divider-dark'/>
-                                </div>
+                                <br/>
+                                <div className='divider-dark first'/>
+                                {this.createNotifyLevelSection(serverError)}
+                                <div className='divider-light'/>
+                                {this.createMarkUnreadLevelSection(serverError)}
+                                <div className='divider-dark'/>
                             </div>
-                            </div>
-                            {serverError}
                         </div>
                     </div>
-                </div>
-            </div>
+                    {serverError}
+                </Modal.Body>
+            </Modal>
         );
     }
 }
+
+ChannelNotificationsModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx
index b7d633b38..271f21c3a 100644
--- a/web/react/components/delete_channel_modal.jsx
+++ b/web/react/components/delete_channel_modal.jsx
@@ -1,102 +1,72 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-const Client = require('../utils/client.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
-const ChannelStore = require('../stores/channel_store.jsx');
-var TeamStore = require('../stores/team_store.jsx');
+const Client = require('../utils/client.jsx');
+const Modal = ReactBootstrap.Modal;
+const TeamStore = require('../stores/team_store.jsx');
+const Utils = require('../utils/utils.jsx');
 
 export default class DeleteChannelModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
-        this.onShow = this.onShow.bind(this);
-
-        this.state = {
-            title: '',
-            channelId: ''
-        };
     }
+
     handleDelete() {
-        if (this.state.channelId.length !== 26) {
+        if (this.props.channel.id.length !== 26) {
             return;
         }
 
-        Client.deleteChannel(this.state.channelId,
-            function handleDeleteSuccess() {
+        Client.deleteChannel(
+            this.props.channel.id,
+            () => {
                 AsyncClient.getChannels(true);
                 window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square';
             },
-            function handleDeleteError(err) {
+            (err) => {
                 AsyncClient.dispatchError(err, 'handleDelete');
             }
         );
     }
-    onShow(e) {
-        var button = $(e.relatedTarget);
-        this.setState({
-            title: button.attr('data-title'),
-            channelId: button.attr('data-channelid')
-        });
-    }
-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
-    }
+
     render() {
-        const channel = ChannelStore.getCurrent();
-        let channelType = 'channel';
-        if (channel && channel.type === 'P') {
-            channelType = 'private group';
-        }
+        const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase();
 
         return (
-            <div
-                className='modal fade'
-                ref='modal'
-                id='delete_channel'
-                role='dialog'
-                tabIndex='-1'
-                aria-hidden='true'
+            <Modal
+                show={this.props.show}
+                onHide={this.props.onHide}
             >
-                <div className='modal-dialog'>
-                    <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'>Confirm DELETE Channel</h4>
-                        </div>
-                        <div className='modal-body'>
-                            <p>
-                                Are you sure you wish to delete the {this.state.title} {channelType}?
-                            </p>
-                        </div>
-                        <div className='modal-footer'>
-                            <button
-                                type='button'
-                                className='btn btn-default'
-                                data-dismiss='modal'
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                type='button'
-                                className='btn btn-danger'
-                                data-dismiss='modal'
-                                onClick={this.handleDelete}
-                            >
-                                Delete
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header>
+                <Modal.Body>
+                    {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.props.onHide}
+                    >
+                        {'Cancel'}
+                    </button>
+                    <button
+                        type='button'
+                        className='btn btn-danger'
+                        data-dismiss='modal'
+                        onClick={this.handleDelete}
+                    >
+                        {'Delete'}
+                    </button>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
+
+DeleteChannelModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 7ad1f9305..1fcfabccd 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -5,7 +5,11 @@ const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
 const MessageWrapper = require('./message_wrapper.jsx');
 const NotifyCounts = require('./notify_counts.jsx');
 const ChannelMembersModal = require('./channel_members_modal.jsx');
+const ChannelInfoModal = require('./channel_info_modal.jsx');
 const ChannelInviteModal = require('./channel_invite_modal.jsx');
+const ChannelNotificationsModal = require('./channel_notifications_modal.jsx');
+const DeleteChannelModal = require('./delete_channel_modal.jsx');
+const ToggleModalButton = require('./toggle_modal_button.jsx');
 
 const UserStore = require('../stores/user_store.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
@@ -104,15 +108,13 @@ export default class Navbar extends React.Component {
         if (channel) {
             var viewInfoOption = (
                 <li role='presentation'>
-                    <a
+                    <ToggleModalButton
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#channel_info'
-                        data-channelid={channel.id}
-                        href='#'
+                        dialogType={ChannelInfoModal}
+                        dialogProps={{channel}}
                     >
                         {'View Info'}
-                    </a>
+                    </ToggleModalButton>
                 </li>
             );
 
@@ -194,16 +196,13 @@ export default class Navbar extends React.Component {
 
                     deleteChannelOption = (
                         <li role='presentation'>
-                            <a
+                            <ToggleModalButton
                                 role='menuitem'
-                                href='#'
-                                data-toggle='modal'
-                                data-target='#delete_channel'
-                                data-title={channel.display_name}
-                                data-channelid={channel.id}
+                                dialogType={DeleteChannelModal}
+                                dialogProps={{channel}}
                             >
                                 {'Delete Channel...'}
-                            </a>
+                            </ToggleModalButton>
                         </li>
                     );
                 }
@@ -229,16 +228,13 @@ export default class Navbar extends React.Component {
             if (!isDirect) {
                 notificationPreferenceOption = (
                     <li role='presentation'>
-                        <a
+                        <ToggleModalButton
                             role='menuitem'
-                            href='#'
-                            data-toggle='modal'
-                            data-target='#channel_notifications'
-                            data-title={channel.display_name}
-                            data-channelid={channel.id}
+                            dialogType={ChannelNotificationsModal}
+                            dialogProps={{channel}}
                         >
-                            {'Notification Preferences'}
-                        </a>
+                        {'Notification Preferences'}
+                        </ToggleModalButton>
                     </li>
                 );
             }
diff --git a/web/react/components/toggle_modal_button.jsx b/web/react/components/toggle_modal_button.jsx
new file mode 100644
index 000000000..51c8d1f20
--- /dev/null
+++ b/web/react/components/toggle_modal_button.jsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class ModalToggleButton extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+
+        this.state = {
+            show: false
+        };
+    }
+
+    show() {
+        this.setState({show: true});
+    }
+
+    hide() {
+        this.setState({show: false});
+    }
+
+    render() {
+        const {children, dialogType, dialogProps, ...props} = this.props;
+
+        // this assumes that all modals will have a show property and an onHide event
+        const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
+            show: this.state.show,
+            onHide: () => {
+                this.hide();
+
+                if (dialogProps.onHide) {
+                    dialogProps.onHide();
+                }
+            }
+        }));
+
+        // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap
+        // renders modals at the top level of the DOM instead of where you specify in the virtual DOM
+        return (
+            <a
+                {...props}
+                href='#'
+                onClick={this.show}
+            >
+                {children}
+                {dialog}
+            </a>
+        );
+    }
+}
+
+ModalToggleButton.propTypes = {
+    children: React.PropTypes.node.isRequired,
+    dialogType: React.PropTypes.func.isRequired,
+    dialogProps: React.PropTypes.object
+};
+
+ModalToggleButton.defaultProps = {
+    dialogProps: {}
+};
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 4dcf32cb9..776201295 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -10,6 +10,7 @@ export default class UserSettingsModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.handleShow = this.handleShow.bind(this);
         this.handleHide = this.handleHide.bind(this);
         this.handleHidden = this.handleHidden.bind(this);
         this.handleCollapse = this.handleCollapse.bind(this);
@@ -33,12 +34,22 @@ export default class UserSettingsModal extends React.Component {
         this.requireConfirm = false;
     }
 
+    componentDidMount() {
+        if (this.props.show) {
+            this.handleShow();
+        }
+    }
+
     componentDidUpdate(prevProps) {
-        if (!prevProps.show && this.props.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
-            if ($(window).width() > 768) {
-                $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
-            }
+        if (this.props.show && !prevProps.show) {
+            this.handleShow();
+        }
+    }
+
+    handleShow() {
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
     }
 
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index 61d13ed8b..16ace0abc 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -5,6 +5,7 @@ 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 ToggleModalButton = require('../toggle_modal_button.jsx');
 var Client = require('../../utils/client.jsx');
 var AsyncClient = require('../../utils/async_client.jsx');
 var Constants = require('../../utils/constants.jsx');
@@ -13,34 +14,13 @@ export default class SecurityTab extends React.Component {
     constructor(props) {
         super(props);
 
-        this.showAccessHistoryModal = this.showAccessHistoryModal.bind(this);
-        this.showActivityLogModal = this.showActivityLogModal.bind(this);
-        this.hideModals = this.hideModals.bind(this);
         this.submitPassword = this.submitPassword.bind(this);
         this.updateCurrentPassword = this.updateCurrentPassword.bind(this);
         this.updateNewPassword = this.updateNewPassword.bind(this);
         this.updateConfirmPassword = this.updateConfirmPassword.bind(this);
         this.setupInitialState = this.setupInitialState.bind(this);
 
-        const state = this.setupInitialState();
-        state.showAccessHistoryModal = false;
-        state.showActivityLogModal = false;
-        this.state = state;
-    }
-    showAccessHistoryModal() {
-        this.props.setEnforceFocus(false);
-        this.setState({showAccessHistoryModal: true});
-    }
-    showActivityLogModal() {
-        this.props.setEnforceFocus(false);
-        this.setState({showActivityLogModal: true});
-    }
-    hideModals() {
-        this.props.setEnforceFocus(true);
-        this.setState({
-            showAccessHistoryModal: false,
-            showActivityLogModal: false
-        });
+        this.state = this.setupInitialState();
     }
     submitPassword(e) {
         e.preventDefault();
@@ -258,30 +238,20 @@ export default class SecurityTab extends React.Component {
                     {passwordSection}
                     <div className='divider-dark'/>
                     <br></br>
-                    <a
+                    <ToggleModalButton
                         className='security-links theme'
-                        href='#'
-                        onClick={this.showAccessHistoryModal}
+                        dialogType={AccessHistoryModal}
                     >
                         <i className='fa fa-clock-o'></i>View Access History
-                    </a>
+                    </ToggleModalButton>
                     <b> </b>
-                    <a
+                    <ToggleModalButton
                         className='security-links theme'
-                        href='#'
-                        onClick={this.showActivityLogModal}
+                        dialogType={ActivityLogModal}
                     >
-                        <i className='fa fa-globe'></i>View and Logout of Active Sessions
-                    </a>
+                        <i className='fa fa-clock-o'></i>{'View and Logout of Active Sessions'}
+                    </ToggleModalButton>
                 </div>
-                <AccessHistoryModal
-                    show={this.state.showAccessHistoryModal}
-                    onModalDismissed={this.hideModals}
-                />
-                <ActivityLogModal
-                    show={this.state.showActivityLogModal}
-                    onModalDismissed={this.hideModals}
-                />
             </div>
         );
     }
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 8781d52a5..9aba1a564 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -10,16 +10,13 @@ var ErrorStore = require('../stores/error_store.jsx');
 var MentionList = require('../components/mention_list.jsx');
 var GetLinkModal = require('../components/get_link_modal.jsx');
 var EditChannelModal = require('../components/edit_channel_modal.jsx');
-var DeleteChannelModal = require('../components/delete_channel_modal.jsx');
 var RenameChannelModal = require('../components/rename_channel_modal.jsx');
 var EditPostModal = require('../components/edit_post_modal.jsx');
 var DeletePostModal = require('../components/delete_post_modal.jsx');
 var MoreChannelsModal = require('../components/more_channels.jsx');
 var PostDeletedModal = require('../components/post_deleted_modal.jsx');
-var ChannelNotificationsModal = require('../components/channel_notifications.jsx');
 var TeamSettingsModal = require('../components/team_settings_modal.jsx');
 var TeamMembersModal = require('../components/team_members.jsx');
-var ChannelInfoModal = require('../components/channel_info_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');
@@ -103,26 +100,11 @@ function setupChannelPage(props) {
     );
 
     ReactDOM.render(
-        <DeleteChannelModal />,
-        document.getElementById('delete_channel_modal')
-    );
-
-    ReactDOM.render(
         <RenameChannelModal />,
         document.getElementById('rename_channel_modal')
     );
 
     ReactDOM.render(
-        <ChannelNotificationsModal />,
-        document.getElementById('channel_notifications_modal')
-    );
-
-    ReactDOM.render(
-        <ChannelInfoModal />,
-        document.getElementById('channel_info_modal')
-    );
-
-    ReactDOM.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')
     );