Merge pull request #2609 from mattermost/plt-2311

PLT-2311 Update tutorial channel names to reflect actual display names

webapp/components/sidebar.jsx

@@ -138,7 +138,9 @@ export default class Sidebar extends React.Component {
             unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())),
             showTutorialTip: tutorialStep === TutorialSteps.CHANNEL_POPOVER,
             currentTeam: TeamStore.getCurrent(),
-            currentUser: UserStore.getCurrentUser()
+            currentUser: UserStore.getCurrentUser(),
+            townSquare: ChannelStore.getByName(Constants.DEFAULT_CHANNEL),
+            offTopic: ChannelStore.getByName(Constants.OFFTOPIC_CHANNEL)
         };
     }
 
@@ -290,6 +292,16 @@ export default class Sidebar extends React.Component {
     createTutorialTip() {
         const screens = [];
 
+        let townSquareDisplayName = Constants.DEFAULT_CHANNEL_UI_NAME;
+        if (this.state.townSquare) {
+            townSquareDisplayName = this.state.townSquare.display_name;
+        }
+
+        let offTopicDisplayName = Constants.OFFTOPIC_CHANNEL_UI_NAME;
+        if (this.state.offTopic) {
+            offTopicDisplayName = this.state.offTopic.display_name;
+        }
+
         screens.push(
             <div>
                 <FormattedHTMLMessage
@@ -303,10 +315,14 @@ export default class Sidebar extends React.Component {
             <div>
                 <FormattedHTMLMessage
                     id='sidebar.tutorialScreen2'
-                    defaultMessage='<h4>"Town Square" and "Off-Topic" channels</h4>
+                    defaultMessage='<h4>"{townsquare}" and "{offtopic}" channels</h4>
                     <p>Here are two public channels to start:</p>
-                    <p><strong>Town Square</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p>
-                    <p><strong>Off-Topic</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>'
+                    <p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p>
+                    <p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>'
+                    values={{
+                        townsquare: townSquareDisplayName,
+                        offtopic: offTopicDisplayName
+                    }}
                 />
             </div>
         );

webapp/components/tutorial/tutorial_intro_screens.jsx

@@ -19,6 +19,12 @@ const NUM_SCREENS = 3;
 import React from 'react';
 
 export default class TutorialIntroScreens extends React.Component {
+    static get propTypes() {
+        return {
+            townSquare: React.PropTypes.object,
+            offTopic: React.PropTypes.object
+        };
+    }
     constructor(props) {
         super(props);
 
@@ -153,6 +159,11 @@ export default class TutorialIntroScreens extends React.Component {
             );
         }
 
+        let townSquareDisplayName = Constants.DEFAULT_CHANNEL_UI_NAME;
+        if (this.props.townSquare) {
+            townSquareDisplayName = this.props.townSquare.display_name;
+        }
+
         return (
             <div>
                 <h3>
@@ -171,7 +182,10 @@ export default class TutorialIntroScreens extends React.Component {
                 {supportInfo}
                 <FormattedMessage
                     id='tutorial_intro.end'
-                    defaultMessage='Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'
+                    defaultMessage='Click “Next” to enter {channel}. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'
+                    values={{
+                        channel: townSquareDisplayName
+                    }}
                 />
                 {circles}
             </div>

webapp/components/tutorial/tutorial_view.jsx

@@ -1,18 +1,43 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
-
 import TutorialIntroScreens from './tutorial_intro_screens.jsx';
 
+import ChannelStore from 'stores/channel_store.jsx';
+import Constants from 'utils/constants.jsx';
+
+import React from 'react';
+
 export default class TutorialView extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleChannelChange = this.handleChannelChange.bind(this);
+
+        this.state = {
+            townSquare: ChannelStore.getByName(Constants.DEFAULT_CHANNEL)
+        };
+    }
+    componentDidMount() {
+        ChannelStore.addChangeListener(this.handleChannelChange);
+    }
+    componentWillUnmount() {
+        ChannelStore.removeChangeListener(this.handleChannelChange);
+    }
+    handleChannelChange() {
+        this.setState({
+            townSquare: ChannelStore.getByName(Constants.DEFAULT_CHANNEL)
+        });
+    }
     render() {
         return (
             <div
                 id='app-content'
                 className='app__content'
             >
-                <TutorialIntroScreens/>
+                <TutorialIntroScreens
+                    townSquare={this.state.townSquare}
+                />
             </div>
         );
     }