Fixes issues with the tutorial (#6786)

* PLT-6907 Increased hit area for tutorial

* PLT-6907 Show the tutorial no matter what channel you're in

* Fixing eslint issue

webapp/components/channel_view.jsx

@@ -5,13 +5,19 @@ import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Constants from 'utils/constants.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import ChannelHeader from 'components/channel_header.jsx';
 import FileUploadOverlay from 'components/file_upload_overlay.jsx';
 import CreatePost from 'components/create_post.jsx';
 import PostView from 'components/post_view';
+import TutorialView from 'components/tutorial/tutorial_view.jsx';
+const TutorialSteps = Constants.TutorialSteps;
+const Preferences = Constants.Preferences;
 
 import ChannelStore from 'stores/channel_store.jsx';
+import PreferenceStore from 'stores/preference_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 
@@ -27,7 +33,8 @@ export default class ChannelView extends React.Component {
     }
     getStateFromStores() {
         return {
-            channelId: ChannelStore.getCurrentId()
+            channelId: ChannelStore.getCurrentId(),
+            tutorialStep: PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999)
         };
     }
     isStateValid() {
@@ -66,6 +73,10 @@ export default class ChannelView extends React.Component {
         return false;
     }
     render() {
+        if (this.state.tutorialStep <= TutorialSteps.INTRO_SCREENS) {
+            return (<TutorialView/>);
+        }
+
         return (
             <div
                 id='app-content'

webapp/components/needs_team/needs_team.jsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 
 import $ from 'jquery';
 
-import {browserHistory} from 'react-router/es6';
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -18,7 +17,6 @@ import {startPeriodicSync, stopPeriodicSync} from 'actions/websocket_actions.jsx
 import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
-const TutorialSteps = Constants.TutorialSteps;
 const Preferences = Constants.Preferences;
 
 import AnnouncementBar from 'components/announcement_bar';
@@ -102,14 +100,6 @@ export default class NeedsTeam extends React.Component {
         }
     }
 
-    componentWillMount() {
-        // Go to tutorial if we are first arriving
-        const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
-        if (tutorialStep <= TutorialSteps.INTRO_SCREENS) {
-            browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/tutorial');
-        }
-    }
-
     componentDidMount() {
         TeamStore.addChangeListener(this.onTeamChanged);
         PreferenceStore.addChangeListener(this.onPreferencesChanged);

webapp/components/tutorial/tutorial_tip.jsx

@@ -138,7 +138,10 @@ export default class TutorialTip extends React.Component {
         }
 
         return (
-            <div className={'tip-div ' + this.props.overlayClass}>
+            <div
+                className={'tip-div ' + this.props.overlayClass}
+                onClick={this.toggle}
+            >
                 <img
                     className='tip-button'
                     src={tutorialGifImage}

webapp/routes/route_team.jsx

@@ -328,18 +328,6 @@ export default {
                         (comarr) => callback(null, {team_sidebar: comarr[0].default, sidebar: comarr[1].default, center: comarr[2].default})
                         );
                     }
-                },
-                {
-                    path: 'tutorial',
-                    getComponents: (location, callback) => {
-                        Promise.all([
-                            System.import('components/team_sidebar'),
-                            System.import('components/sidebar.jsx'),
-                            System.import('components/tutorial/tutorial_view.jsx')
-                        ]).then(
-                        (comarr) => callback(null, {team_sidebar: comarr[0].default, sidebar: comarr[1].default, center: comarr[2].default})
-                        );
-                    }
                 }
             ]
         }