1 files changed, 24 insertions, 54 deletions

diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx
index aef1593dc..6f83778c9 100644
--- a/web/react/utils/channel_intro_mssages.jsx
+++ b/web/react/utils/channel_intro_mssages.jsx
@@ -1,13 +1,14 @@
-
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import * as Utils from './utils.jsx';
-import InviteMemberModal from '../components/invite_member_modal.jsx';
+import EditChannelHeaderModal from '../components/edit_channel_header_modal.jsx';
+import ToggleModalButton from '../components/toggle_modal_button.jsx';
 import UserProfile from '../components/user_profile.jsx';
 import ChannelStore from '../stores/channel_store.jsx';
 import Constants from '../utils/constants.jsx';
 import TeamStore from '../stores/team_store.jsx';
+import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
 export function createChannelIntroMessage(channel, showInviteModal) {
     if (channel.type === 'D') {
@@ -49,17 +50,7 @@ export function createDMIntroMessage(channel) {
                     {'This is the start of your direct message history with ' + teammateName + '.'}<br/>
                     {'Direct messages and files shared here are not shown to people outside this area.'}
                 </p>
-                <a
-                    className='intro-links'
-                    href='#'
-                    data-toggle='modal'
-                    data-target='#edit_channel'
-                    data-header={channel.header}
-                    data-title={channel.display_name}
-                    data-channelid={channel.id}
-                >
-                    <i className='fa fa-pencil'></i>{'Set a header'}
-                </a>
+                {createSetHeaderButton(channel)}
             </div>
         );
     }
@@ -71,7 +62,7 @@ export function createDMIntroMessage(channel) {
     );
 }
 
-export function createOffTopicIntroMessage(channel, showInviteModal) { //eslint-disable-line react/no-multi-comp
+export function createOffTopicIntroMessage(channel, showInviteModal) {
     return (
         <div className='channel-intro'>
             <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
@@ -79,17 +70,7 @@ export function createOffTopicIntroMessage(channel, showInviteModal) { //eslint-
                 {'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
                 <br/>
             </p>
-            <a
-                className='intro-links'
-                href='#'
-                data-toggle='modal'
-                data-target='#edit_channel'
-                data-header={channel.header}
-                data-title={channel.display_name}
-                data-channelid={channel.id}
-            >
-                <i className='fa fa-pencil'></i>{'Set a header'}
-            </a>
+            {createSetHeaderButton(channel)}
             <a
                 href='#'
                 className='intro-links'
@@ -101,7 +82,7 @@ export function createOffTopicIntroMessage(channel, showInviteModal) { //eslint-
     );
 }
 
-export function createDefaultIntroMessage(channel) { //eslint-disable-line react/no-multi-comp
+export function createDefaultIntroMessage(channel) {
     const team = TeamStore.getCurrent();
     let inviteModalLink;
     if (team.type === Constants.INVITE_TEAM) {
@@ -109,7 +90,7 @@ export function createDefaultIntroMessage(channel) { //eslint-disable-line react
             <a
                 className='intro-links'
                 href='#'
-                onClick={InviteMemberModal.show}
+                onClick={EventHelpers.showInviteMemberModal}
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this team'}
             </a>
@@ -119,10 +100,7 @@ export function createDefaultIntroMessage(channel) { //eslint-disable-line react
             <a
                 className='intro-links'
                 href='#'
-                data-toggle='modal'
-                data-target='#get_link'
-                data-title='Team Invite'
-                data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
+                onClick={EventHelpers.showGetTeamInviteLinkModal}
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this team'}
             </a>
@@ -138,23 +116,13 @@ export function createDefaultIntroMessage(channel) { //eslint-disable-line react
                 {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
             </p>
             {inviteModalLink}
-            <a
-                className='intro-links'
-                href='#'
-                data-toggle='modal'
-                data-target='#edit_channel'
-                data-header={channel.header}
-                data-title={channel.display_name}
-                data-channelid={channel.id}
-            >
-                <i className='fa fa-pencil'></i>{'Set a header'}
-            </a>
+            {createSetHeaderButton(channel)}
             <br/>
         </div>
     );
 }
 
-export function createStandardIntroMessage(channel, showInviteModal) { //eslint-disable-line react/no-multi-comp
+export function createStandardIntroMessage(channel, showInviteModal) {
     var uiName = channel.display_name;
     var creatorName = '';
 
@@ -193,17 +161,7 @@ export function createStandardIntroMessage(channel, showInviteModal) { //eslint-
                 {memberMessage}
                 <br/>
             </p>
-            <a
-                className='intro-links'
-                href='#'
-                data-toggle='modal'
-                data-target='#edit_channel'
-                data-header={channel.header}
-                data-title={channel.display_name}
-                data-channelid={channel.id}
-            >
-                <i className='fa fa-pencil'></i>{'Set a header'}
-            </a>
+            {createSetHeaderButton(channel)}
             <a
                 className='intro-links'
                 href='#'
@@ -214,3 +172,15 @@ export function createStandardIntroMessage(channel, showInviteModal) { //eslint-
         </div>
     );
 }
+
+function createSetHeaderButton(channel) {
+    return (
+        <ToggleModalButton
+            className='intro-links'
+            dialogType={EditChannelHeaderModal}
+            dialogProps={{channel}}
+        >
+            <i className='fa fa-pencil'></i>{'Set a header'}
+        </ToggleModalButton>
+    );
+}