Fixes issues with the tutorial (mattermost#6786)

* PLT-6907 Increased hit area for tutorial * PLT-6907 Show the tutorial no matter what channel you're in * Fixing eslint issue
stevepartridge · Jun 29, 2017 · 768b4ad · 768b4ad
1 parent 86f53c8
commit 768b4ad
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 24 deletions.
diff --git a/components/channel_view.jsx b/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'

diff --git a/components/needs_team/needs_team.jsx b/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);

diff --git a/components/tutorial/tutorial_tip.jsx b/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}

diff --git a/routes/route_team.jsx b/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})
- );
- }
  }
  ]
  }