Merge pull request #593 from nickago/MM-1892

MM-1892 Added help text to username, nickname, and fullname

2 files changed, 37 insertions, 1 deletions

diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 282fb7681..2a607b3e0 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -40,6 +40,7 @@ export default class UserSettings extends React.Component {
                         user={this.state.user}
                         activeSection={this.props.activeSection}
                         updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
                     />
                 </div>
             );
@@ -86,4 +87,4 @@ UserSettings.propTypes = {
     activeSection: React.PropTypes.string,
     updateSection: React.PropTypes.func,
     updateTab: React.PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx
index ead7ac1d5..f2127ce0c 100644
--- a/web/react/components/user_settings_general.jsx
+++ b/web/react/components/user_settings_general.jsx
@@ -267,6 +267,28 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            function notifClick(e) {
+                e.preventDefault();
+                this.updateSection('');
+                this.props.updateTab('notifications');
+            }
+
+            const notifLink = (
+                <a
+                    href='#'
+                    onClick={notifClick.bind(this)}
+                >
+                    Notifications
+                </a>
+            );
+
+            const extraInfo = (
+                <span>
+                    By default, you will receive mention notifications when someone types your first name.
+                    Go to {notifLink} settings to change this default.
+                </span>
+            );
+
             nameSection = (
                 <SettingItemMax
                     title='Full Name'
@@ -278,6 +300,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -326,6 +349,13 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            const extraInfo = (
+                <span>
+                    Use Nickname for a name you might be called that is different from your first name and user name.
+                    This is most often used when two or more people have similar sounding names and usernames.
+                </span>
+            );
+
             nicknameSection = (
                 <SettingItemMax
                     title='Nickname'
@@ -337,6 +367,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -375,6 +406,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            const extraInfo = (<span>Pick something easy for teammates to recognize and recall.</span>);
+
             usernameSection = (
                 <SettingItemMax
                     title='Username'
@@ -386,6 +419,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -524,5 +558,6 @@ export default class UserSettingsGeneralTab extends React.Component {
 UserSettingsGeneralTab.propTypes = {
     user: React.PropTypes.object,
     updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func,
     activeSection: React.PropTypes.string
 };