Improving redirect on guest accounts (#3739)

* Improving redirect on guest accounts

* Fixing tests

* moving tests to the new correct place

components/channel_layout/channel_controller.jsx

@@ -22,16 +22,41 @@ import ModalController from 'components/modal_controller';
 import TeamSidebar from 'components/team_sidebar';
 import Sidebar from 'components/sidebar';
 import * as Utils from 'utils/utils';
+import * as UserAgent from 'utils/user_agent.jsx';
 import CenterChannel from 'components/channel_layout/center_channel';
+import LoadingScreen from 'components/loading_screen';
 
 export default class ChannelController extends React.Component {
  static propTypes = {
  pathName: PropTypes.string.isRequired,
  teamType: PropTypes.string.isRequired,
+ fetchingChannels: PropTypes.bool.isRequired,
  };
 
  shouldComponentUpdate(nextProps) {
- return this.props.teamType !== nextProps.teamType || this.props.pathName !== nextProps.pathName;
+ return this.props.teamType !== nextProps.teamType || this.props.pathName !== nextProps.pathName || this.props.fetchingChannels !== nextProps.fetchingChannels;
+ }
+
+ componentDidMount() {
+ const platform = window.navigator.platform;
+
+ document.body.classList.add('app__body', 'channel-view');
+
+ // IE Detection
+ if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
+ document.body.classList.add('browser--ie');
+ }
+
+ // OS Detection
+ if (platform === 'Win32' || platform === 'Win64') {
+ document.body.classList.add('os--windows');
+ } else if (platform === 'MacIntel' || platform === 'MacPPC') {
+ document.body.classList.add('os--mac');
+ }
+ }
+
+ componentWillUnmount() {
+ document.body.classList.remove('app__body', 'channel-view');
  }
 
  render() {
@@ -48,7 +73,8 @@ export default class ChannelController extends React.Component {
  <SidebarRightMenu teamType={this.props.teamType}/>
  <Route component={TeamSidebar}/>
  <Route component={Sidebar}/>
- <Route component={CenterChannel}/>
+ {!this.props.fetchingChannels && <Route component={CenterChannel}/>}
+ {this.props.fetchingChannels && <LoadingScreen/>}
  <Pluggable pluggableName='Root'/>
  <GetPostLinkModal/>
  <GetPublicLinkModal/>

components/channel_view/channel_view.test.jsx → components/channel_layout/channel_controller.test.jsx

@@ -4,28 +4,20 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import ChannelView from './channel_view.jsx';
+import ChannelController from './channel_controller.jsx';
 
-describe('components/ChannelView', () => {
+describe('components/channel_layout/ChannelController', () => {
  const props = {
- channelId: 'channelId',
- deactivatedChannel: true,
- match: {
- url: '/team/channels/off-topic',
- },
- showTutorial: false,
- channelIsArchived: false,
- viewArchivedChannels: false,
- actions: {
- goToLastViewedChannel: jest.fn(),
- },
+ pathName: 'test',
+ teamType: 'test',
+ fetchingChannels: false,
  };
  test('Should have app__body and channel-view classes on body after mount', () => {
  Object.defineProperty(window.navigator, 'platform', {
  value: 'Win32',
  writable: true,
  });
- shallow(<ChannelView {...props}/>);
+ shallow(<ChannelController {...props}/>);
 
  expect(document.body.classList.contains('app__body')).toBe(true);
  expect(document.body.classList.contains('channel-view')).toBe(true);
@@ -36,7 +28,7 @@ describe('components/ChannelView', () => {
  value: 'Win32',
  writable: true,
  });
- shallow(<ChannelView {...props}/>);
+ shallow(<ChannelController {...props}/>);
 
  expect(document.body.classList.contains('os--windows')).toBe(true);
  });
@@ -46,7 +38,7 @@ describe('components/ChannelView', () => {
  value: 'Win32',
  writable: true,
  });
- shallow(<ChannelView {...props}/>);
+ shallow(<ChannelController {...props}/>);
 
  expect(document.body.classList.contains('os--windows')).toBe(true);
  });
@@ -56,7 +48,7 @@ describe('components/ChannelView', () => {
  value: 'MacIntel',
  writable: true,
  });
- shallow(<ChannelView {...props}/>);
+ shallow(<ChannelController {...props}/>);
 
  expect(document.body.classList.contains('os--mac')).toBe(true);
  });
@@ -66,7 +58,7 @@ describe('components/ChannelView', () => {
  value: 'MacPPC',
  writable: true,
  });
- shallow(<ChannelView {...props}/>);
+ shallow(<ChannelController {...props}/>);
 
  expect(document.body.classList.contains('os--mac')).toBe(true);
  });
@@ -76,7 +68,7 @@ describe('components/ChannelView', () => {
  value: 'MacPPC',
  writable: true,
  });
- const wrapper = shallow(<ChannelView {...props}/>);
+ const wrapper = shallow(<ChannelController {...props}/>);
 
  wrapper.unmount();
  expect(document.body.classList.contains('app__body')).toBe(false);

components/channel_layout/channel_identifier_router/actions.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {joinChannel, getChannelByNameAndTeamName, markGroupChannelOpen} from 'mattermost-redux/actions/channels';
+import {joinChannel, getChannelByNameAndTeamName, markGroupChannelOpen, fetchMyChannelsAndMembers} from 'mattermost-redux/actions/channels';
 import {getUser, getUserByUsername, getUserByEmail} from 'mattermost-redux/actions/users';
 import {getTeamByName} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId, getUserByUsername as selectUserByUsername, getUser as selectUser, getUserByEmail as selectUserByEmail} from 'mattermost-redux/selectors/entities/users';
@@ -17,7 +17,7 @@ const LENGTH_OF_GROUP_ID = 40;
 const LENGTH_OF_USER_ID_PAIR = 54;
 
 export function onChannelByIdentifierEnter({match, history}) {
- return (dispatch, getState) => {
+ return async (dispatch, getState) => {
  const state = getState();
  const {path, identifier, team} = match.params;
 
@@ -58,6 +58,7 @@ export function onChannelByIdentifierEnter({match, history}) {
  } else if (identifier.length === LENGTH_OF_GROUP_ID) {
  dispatch(goToGroupChannelByGroupId(match, history));
  } else {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  }
  }
@@ -76,6 +77,7 @@ export function goToChannelByChannelId(match, history) {
  if (!channel || !member) {
  const {data, error} = await dispatch(joinChannel(getCurrentUserId(state), teamObj.id, channelId, null));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleChannelJoinError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -114,6 +116,7 @@ export function goToChannelByChannelName(match, history) {
  if (joinError) {
  const {data: data2, error: getChannelError} = await dispatch(getChannelByNameAndTeamName(team, channelName, true));
  if (getChannelError || data2.delete_at === 0) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleChannelJoinError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -144,6 +147,7 @@ function goToDirectChannelByUsername(match, history) {
  if (!user) {
  const {data, error} = await dispatch(getUserByUsername(username));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -152,6 +156,7 @@ function goToDirectChannelByUsername(match, history) {
 
  const {error, data} = await dispatch(openDirectChannelToUserId(user.id));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -170,6 +175,7 @@ export function goToDirectChannelByUserId(match, history, userId) {
  if (!user) {
  const {data, error} = await dispatch(getUser(userId));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -191,6 +197,7 @@ export function goToDirectChannelByUserIds(match, history) {
  if (!user) {
  const {data, error} = await dispatch(getUser(userId));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -212,6 +219,7 @@ export function goToDirectChannelByEmail(match, history) {
  if (!user) {
  const {data, error} = await dispatch(getUserByEmail(email));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -235,6 +243,7 @@ function goToGroupChannelByGroupId(match, history) {
  if (!channel) {
  const {data, error} = await dispatch(joinChannel(getCurrentUserId(state), teamObj.id, null, groupId));
  if (error) {
+ await dispatch(fetchMyChannelsAndMembers(teamObj.id));
  handleError(match, history, getRedirectChannelNameForTeam(state, teamObj.id));
  return;
  }
@@ -256,7 +265,7 @@ function handleError(match, history, defaultChannel) {
  history.push(team ? `/${team}/channels/${defaultChannel}` : '/');
 }
 
-function handleChannelJoinError(match, history, defaultChannel) {
+async function handleChannelJoinError(match, history, defaultChannel) {
  const {team} = match.params;
  history.push(team ? `/error?type=channel_not_found&returnTo=/${team}/channels/${defaultChannel}` : '/');
 }

components/channel_view/channel_view.jsx

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import * as UserAgent from 'utils/user_agent.jsx';
 import deferComponentRender from 'components/deferComponentRender';
 import ChannelHeader from 'components/channel_header';
 import CreatePost from 'components/create_post';
@@ -49,28 +48,6 @@ export default class ChannelView extends React.PureComponent {
  );
  }
 
- componentDidMount() {
- const platform = window.navigator.platform;
-
- document.body.classList.add('app__body', 'channel-view');
-
- // IE Detection
- if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
- document.body.classList.add('browser--ie');
- }
-
- // OS Detection
- if (platform === 'Win32' || platform === 'Win64') {
- document.body.classList.add('os--windows');
- } else if (platform === 'MacIntel' || platform === 'MacPPC') {
- document.body.classList.add('os--mac');
- }
- }
-
- componentWillUnmount() {
- document.body.classList.remove('app__body', 'channel-view');
- }
-
  UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
  if (this.props.match.url !== nextProps.match.url) {
  this.createDeferredPostView();

components/needs_team/__snapshots__/needs_team.test.jsx.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/needs_team should match snapshots for init with existing team 1`] = `<div />`;
+exports[`components/needs_team should match snapshots for init with existing team 1`] = `
+<Switch>
+ <Route
+ component={[Function]}
+ path="/:team/integrations"
+ />
+ <Route
+ component={[Function]}
+ path="/:team/emoji"
+ />
+ <Route
+ render={[Function]}
+ />
+</Switch>
+`;
 
 exports[`components/needs_team should match snapshots for init with existing team 2`] = `
 <Switch>

components/needs_team/needs_team.jsx

@@ -180,6 +180,9 @@ export default class NeedsTeam extends React.Component {
  this.props.actions.setPreviousTeamId(team.id);
  GlobalActions.emitCloseRightHandSide();
 
+ if (Utils.isGuest(this.props.currentUser)) {
+ this.setState({finishedFetchingChannels: false});
+ }
  this.props.actions.fetchMyChannelsAndMembers(team.id).then(
  () => {
  this.setState({
@@ -225,7 +228,7 @@ export default class NeedsTeam extends React.Component {
  }
 
  render() {
- if (this.state.team === null || this.state.finishedFetchingChannels === false) {
+ if (this.state.team === null) {
  return <div/>;
  }
  const teamType = this.state.team ? this.state.team.type : '';
@@ -245,6 +248,7 @@ export default class NeedsTeam extends React.Component {
  <ChannelController
  pathName={renderProps.location.pathname}
  teamType={teamType}
+ fetchingChannels={!this.state.finishedFetchingChannels}
  />
  )}
  />

components/needs_team/needs_team.test.jsx

@@ -26,6 +26,7 @@ jest.mock('utils/utils', () => ({
  applyTheme: jest.fn(),
  localizeMessage: jest.fn(),
  areObjectsEqual: jest.fn(),
+ isGuest: jest.fn(),
 }));
 
 describe('components/needs_team', () => {