Migrate get_team_invite_link_modal.jsx to be pure and use Redux (matt…

…ermost#209)

* Migrate get team invite link modal to be pure and use redux

* Add component tests

* More component test

components/get_team_invite_link_modal.jsx → components/get_team_invite_link_modal/get_team_invite_link_modal.jsx

@@ -2,24 +2,32 @@
 // See License.txt for license information.
 
 import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PropTypes from 'prop-types';
 
 import ModalStore from 'stores/modal_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
-import GetLinkModal from './get_link_modal.jsx';
+import GetLinkModal from 'components/get_link_modal.jsx';
 
-export default class GetTeamInviteLinkModal extends React.Component {
- constructor(props) {
- super(props);
+export default class GetTeamInviteLinkModal extends React.PureComponent {
+ static propTypes = {
 
- this.handleToggle = this.handleToggle.bind(this);
+ /**
+ * Current team object
+ */
+ currentTeam: PropTypes.object.isRequired,
 
- this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+ /**
+ * Global config object
+ */
+ config: PropTypes.object.isRequired
+ }
 
+ constructor(props) {
+ super(props);
  this.state = {
  show: false
  };
@@ -33,15 +41,17 @@ export default class GetTeamInviteLinkModal extends React.Component {
  ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL, this.handleToggle);
  }
 
- handleToggle(value) {
+ handleToggle = (value) => {
  this.setState({
  show: value
  });
  }
 
  render() {
+ const inviteUrl = getSiteURL() + '/signup_user_complete/?id=' + this.props.currentTeam.invite_id;
+
  let helpText;
- if (global.window.mm_config.EnableUserCreation === 'true') {
+ if (this.props.config.EnableUserCreation === 'true') {
  helpText = Utils.localizeMessage('get_team_invite_link_modal.help', 'Send teammates the link below for them to sign-up to this team site. The Team Invite Link can be shared with multiple teammates as it does not change unless it\'s regenerated in Team Settings by a Team Admin.');
  } else {
  helpText = Utils.localizeMessage('get_team_invite_link_modal.helpDisabled', 'User creation has been disabled for your team. Please ask your team administrator for details.');
@@ -50,10 +60,10 @@ export default class GetTeamInviteLinkModal extends React.Component {
  return (
  <GetLinkModal
  show={this.state.show}
- onHide={() => this.setState({show: false})}
+ onHide={() => this.handleToggle(false)}
  title={Utils.localizeMessage('get_team_invite_link_modal.title', 'Team Invite Link')}
  helpText={helpText}
- link={TeamStore.getCurrentInviteLink()}
+ link={inviteUrl}
  />
  );
  }

components/get_team_invite_link_modal/index.js

@@ -0,0 +1,16 @@
+import {connect} from 'react-redux';
+
+import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
+import GetTeamInviteLinkModal from './get_team_invite_link_modal.jsx';
+
+function mapStateToProps(state, ownProps) {
+ return {
+ ...ownProps,
+ currentTeam: getCurrentTeam(state),
+ config: getConfig(state)
+ };
+}
+
+export default connect(mapStateToProps)(GetTeamInviteLinkModal);

components/needs_team/needs_team.jsx

@@ -32,7 +32,7 @@ import DeletePostModal from 'components/delete_post_modal.jsx';
 import EditPostModal from 'components/edit_post_modal.jsx';
 import GetPostLinkModal from 'components/get_post_link_modal.jsx';
 import GetPublicLinkModal from 'components/get_public_link_modal.jsx';
-import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal.jsx';
+import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal';
 import InviteMemberModal from 'components/invite_member_modal.jsx';
 import LeaveTeamModal from 'components/leave_team_modal.jsx';
 import LeavePrivateChannelModal from 'components/modals/leave_private_channel_modal.jsx';

tests/components/get_team_invite_link_modal/__snapshots__/get_team_invite_link_modal.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/GetTeamInviteLinkModal should match snapshot when user creation is disabled 1`] = `
+<GetLinkModal
+ helpText="User creation has been disabled for your team. Please ask your team administrator for details."
+ link="null/signup_user_complete/?id=invite_id"
+ onHide={[Function]}
+ show={false}
+ title="Team Invite Link"
+/>
+`;
+
+exports[`components/GetTeamInviteLinkModal should match snapshot when user creation is enabled 1`] = `
+<GetLinkModal
+ helpText="Send teammates the link below for them to sign-up to this team site. The Team Invite Link can be shared with multiple teammates as it does not change unless it's regenerated in Team Settings by a Team Admin."
+ link="null/signup_user_complete/?id=invite_id"
+ onHide={[Function]}
+ show={false}
+ title="Team Invite Link"
+/>
+`;

tests/components/get_team_invite_link_modal/get_team_invite_link_modal.test.jsx

@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal/get_team_invite_link_modal.jsx';
+import GetLinkModal from 'components/get_link_modal.jsx';
+
+describe('components/GetTeamInviteLinkModal', () => {
+ test('should match snapshot when user creation is enabled', () => {
+ const wrapper = shallow(
+ <GetTeamInviteLinkModal
+ config={{EnableUserCreation: 'true'}}
+ currentTeam={{invite_id: 'invite_id'}}
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot when user creation is disabled', () => {
+ const wrapper = shallow(
+ <GetTeamInviteLinkModal
+ config={{EnableUserCreation: 'false'}}
+ currentTeam={{invite_id: 'invite_id'}}
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should call handleToggle on GetLinkModal\'s onHide', () => {
+ const wrapper = shallow(
+ <GetTeamInviteLinkModal
+ config={{EnableUserCreation: 'false'}}
+ currentTeam={{invite_id: 'invite_id'}}
+ />
+ );
+
+ wrapper.find(GetLinkModal).first().props().onHide();
+ expect(wrapper.state('show')).toBe(false);
+ });
+});