1 files changed, 39 insertions, 41 deletions

diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index af29f219e..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>
             );
 
@@ -178,18 +180,32 @@ export default class Navbar extends React.Component {
             var manageMembersOption;
             var renameChannelOption;
             var deleteChannelOption;
-            if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
-                manageMembersOption = (
-                    <li role='presentation'>
-                        <a
-                            role='menuitem'
-                            href='#'
-                            onClick={() => this.setState({showMembersModal: true})}
-                        >
-                            {'Manage Members'}
-                        </a>
-                    </li>
-                );
+            if (!isDirect && isAdmin) {
+                if (!ChannelStore.isDefault(channel)) {
+                    manageMembersOption = (
+                        <li role='presentation'>
+                            <a
+                                role='menuitem'
+                                href='#'
+                                onClick={() => this.setState({showMembersModal: true})}
+                            >
+                                {'Manage Members'}
+                            </a>
+                        </li>
+                    );
+
+                    deleteChannelOption = (
+                        <li role='presentation'>
+                            <ToggleModalButton
+                                role='menuitem'
+                                dialogType={DeleteChannelModal}
+                                dialogProps={{channel}}
+                            >
+                                {'Delete Channel...'}
+                            </ToggleModalButton>
+                        </li>
+                    );
+                }
 
                 renameChannelOption = (
                     <li role='presentation'>
@@ -206,37 +222,19 @@ export default class Navbar extends React.Component {
                         </a>
                     </li>
                 );
-
-                deleteChannelOption = (
-                    <li role='presentation'>
-                        <a
-                            role='menuitem'
-                            href='#'
-                            data-toggle='modal'
-                            data-target='#delete_channel'
-                            data-title={channel.display_name}
-                            data-channelid={channel.id}
-                        >
-                            {'Delete Channel...'}
-                        </a>
-                    </li>
-                );
             }
 
             var notificationPreferenceOption;
             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>
                 );
             }