PLT-4307 - fix !channel link hrefs. (#4122)

* PLT-4307 - fix !channel link hrefs.

* Fix style.

4 files changed, 17 insertions, 6 deletions

diff --git a/webapp/components/post_view/components/post_message_container.jsx b/webapp/components/post_view/components/post_message_container.jsx
index 749af4ecc..00d0097ca 100644
--- a/webapp/components/post_view/components/post_message_container.jsx
+++ b/webapp/components/post_view/components/post_message_container.jsx
@@ -7,6 +7,7 @@ import ChannelStore from 'stores/channel_store.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import {Preferences} from 'utils/constants.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 import PostMessageView from './post_message_view.jsx';
@@ -37,7 +38,8 @@ export default class PostMessageContainer extends React.Component {
             enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
             mentionKeys,
             usernameMap: UserStore.getProfilesUsernameMap(),
-            channelNamesMap: ChannelStore.getChannelNamesMap()
+            channelNamesMap: ChannelStore.getChannelNamesMap(),
+            team: TeamStore.getCurrent()
         };
     }
 
@@ -95,6 +97,7 @@ export default class PostMessageContainer extends React.Component {
                 mentionKeys={this.state.mentionKeys}
                 usernameMap={this.state.usernameMap}
                 channelNamesMap={this.state.channelNamesMap}
+                team={this.state.team}
             />
         );
     }
diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx
index 5242e6648..24f96a8d9 100644
--- a/webapp/components/post_view/components/post_message_view.jsx
+++ b/webapp/components/post_view/components/post_message_view.jsx
@@ -14,7 +14,8 @@ export default class PostMessageView extends React.Component {
         enableFormatting: React.PropTypes.bool.isRequired,
         mentionKeys: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
         usernameMap: React.PropTypes.object.isRequired,
-        channelNamesMap: React.PropTypes.object.isRequired
+        channelNamesMap: React.PropTypes.object.isRequired,
+        team: React.PropTypes.object.isRequired
     };
 
     shouldComponentUpdate(nextProps) {
@@ -56,7 +57,8 @@ export default class PostMessageView extends React.Component {
             siteURL: Utils.getSiteURL(),
             mentionKeys: this.props.mentionKeys,
             usernameMap: this.props.usernameMap,
-            channelNamesMap: this.props.channelNamesMap
+            channelNamesMap: this.props.channelNamesMap,
+            team: this.props.team
         });
 
         return (
diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index 2b0633e5c..9834f4b9b 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -28,6 +28,7 @@ const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-
 //      be handled by a special click handler (Utils.handleFormattedTextClick)
 // - channelNamesMap - An object mapping channel display names to channels. If provided, !channel mentions will be replaced with
 //      links to the relevant channel.
+// - team - The current team.
 export function formatText(text, inputOptions) {
     let output = text;
 
@@ -64,7 +65,7 @@ export function doFormatText(text, options) {
     }
 
     if (options.channelNamesMap) {
-        output = autolinkChannelMentions(output, tokens, options.channelNamesMap);
+        output = autolinkChannelMentions(output, tokens, options.channelNamesMap, options.team);
     }
 
     output = autolinkEmails(output, tokens);
@@ -204,16 +205,20 @@ function autolinkAtMentions(text, tokens, usernameMap) {
     return output;
 }
 
-function autolinkChannelMentions(text, tokens, channelNamesMap) {
+function autolinkChannelMentions(text, tokens, channelNamesMap, team) {
     function channelMentionExists(c) {
         return Boolean(channelNamesMap[c]);
     }
     function addToken(channelName, mention, displayName) {
         const index = tokens.size;
         const alias = `MM_CHANNELMENTION${index}`;
+        let href = '#';
+        if (team) {
+            href = '/' + team.name + '/channels/' + channelName;
+        }
 
         tokens.set(alias, {
-            value: `<a class='mention-link' href='#' data-channel-mention="${channelName}">${displayName}</a>`,
+            value: `<a class='mention-link' href="${href}" data-channel-mention="${channelName}">${displayName}</a>`,
             originalText: mention
         });
         return alias;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index ffc676e63..25a9dfa7d 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1374,6 +1374,7 @@ export function handleFormattedTextClick(e) {
             browserHistory.push(linkAttribute.value);
         }
     } else if (channelMentionAttribute) {
+        e.preventDefault();
         browserHistory.push('/' + TeamStore.getCurrent().name + '/channels/' + channelMentionAttribute.value);
     }
 }