MM-20535 Convert create_team to TypeScript (mattermost#4972)

components/create_team/__snapshots__/create_team.test.jsx.snap → components/create_team/__snapshots__/create_team.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`/components/create_team should match snapshot 1`] = `
 <div>
  <Connect(AnnouncementBarController) />
  <BackButton
- onClick={[Function]}
  url="/test-team/channels/test-channel"
  />
  <div
@@ -22,15 +21,15 @@ exports[`/components/create_team should match snapshot 1`] = `
  >
  <Switch>
  <Route
- path="https://localhost:8065/create_team/display_name"
+ path="/route/1/display_name"
  render={[Function]}
  />
  <Route
- path="https://localhost:8065/create_team/team_url"
+ path="/route/1/team_url"
  render={[Function]}
  />
  <Redirect
- to="https://localhost:8065/create_team/display_name"
+ to="/route/1/display_name"
  />
  </Switch>
  </div>

components/create_team/create_team.test.tsx

@@ -0,0 +1,100 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {shallow, ShallowWrapper} from 'enzyme';
+import React from 'react';
+import {TeamType} from 'mattermost-redux/types/teams';
+import {ChannelType} from 'mattermost-redux/types/channels';
+
+import {createMemoryHistory, createLocation} from 'history';
+import {match as RouterMatch} from 'react-router';
+
+import CreateTeam from 'components/create_team/create_team';
+
+jest.mock('components/announcement_bar');
+jest.mock('components/common/back_button');
+jest.mock('react-router-dom');
+
+const history = createMemoryHistory();
+const path = '/route/:id';
+
+const match: RouterMatch<{ id: string }> = {
+ isExact: false,
+ path,
+ url: path.replace(':id', '1'),
+ params: {id: '1'}
+};
+
+const location = createLocation(match.url);
+
+describe('/components/create_team', () => {
+ const defaultProps = {
+ currentChannel: {
+ id: '1',
+ team_id: '1',
+ type: 'O' as ChannelType,
+ create_at: 1,
+ update_at: 2,
+ delete_at: 0,
+ display_name: 'test',
+ name: 'test-channel',
+ header: 'a',
+ purpose: 'a',
+ last_post_at: 1,
+ total_msg_count: 1,
+ extra_update_at: 1,
+ creator_id: 'a',
+ scheme_id: 'a',
+ group_constrained: false
+ },
+ currentTeam: {
+ id: '1',
+ create_at: 1,
+ update_at: 2,
+ delete_at: 0,
+ display_name: 'test',
+ name: 'test-team',
+ description: 'a',
+ email: '[email protected]',
+ type: 'O' as TeamType,
+ company_name: 'mattermost',
+ allowed_domains: 'a',
+ invite_id: 'a',
+ allow_open_invite: true,
+ scheme_id: 'a',
+ group_constrained: false
+ },
+ siteName: 'Mattermost',
+ customBrand: true,
+ enableCustomBrand: true,
+ customDescriptionText: 'Welcome to our custom branded site!',
+ match,
+ history,
+ location
+ };
+
+ test('should match snapshot', () => {
+ const wrapper: ShallowWrapper<any, any, CreateTeam> = shallow(
+ <CreateTeam {...defaultProps}/>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should run props.history.push with new state', () => {
+ const wrapper: ShallowWrapper<any, any, CreateTeam> = shallow(
+ <CreateTeam {...defaultProps}/>
+ );
+
+ const pushSpy = jest.spyOn(history, 'push');
+ const state = {team: {name: 'team_name'}, wizard: ''};
+ wrapper.setState(state);
+
+ state.team.name = 'new_team';
+ state.wizard = 'display_name';
+ wrapper.instance().updateParent(state);
+
+ expect(state.team.name).toBe('new_team');
+ expect(pushSpy).toHaveBeenCalledWith('/create_team/display_name');
+ });
+});

components/create_team/create_team.tsx

@@ -0,0 +1,124 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Route, Switch, Redirect, RouteComponentProps} from 'react-router-dom';
+
+import {Channel} from 'mattermost-redux/types/channels';
+
+import {Team} from 'mattermost-redux/types/teams';
+
+import AnnouncementBar from 'components/announcement_bar';
+import BackButton from 'components/common/back_button';
+import DisplayName from 'components/create_team/components/display_name';
+import SiteNameAndDescription from 'components/common/site_name_and_description';
+import TeamUrl from 'components/create_team/components/team_url';
+
+type Props = {
+
+ /*
+ * Object containing information on the current team, used to define BackButton's url
+ */
+ currentTeam: Team;
+
+ /*
+ * Object containing information on the current selected channel, used to define BackButton's url
+ */
+ currentChannel: Channel;
+
+ /*
+ * String containing the custom branding's text
+ */
+ customDescriptionText: string;
+
+ /*
+ * String containing the custom branding's Site Name
+ */
+ siteName: string;
+
+ /*
+ * Object from react-router
+ */
+ match: {
+ url: string;
+ };
+};
+
+type State = {
+ team: object;
+ wizard: string;
+};
+
+export default class CreateTeam extends React.PureComponent<Props & RouteComponentProps<{}>, State> {
+ public constructor(props: Props & RouteComponentProps<{}>) {
+ super(props);
+
+ this.state = {
+ team: {},
+ wizard: 'display_name',
+ };
+ }
+
+ public updateParent = (state: State) => {
+ this.setState(state);
+ this.props.history.push('/create_team/' + state.wizard);
+ };
+
+ render() {
+ const {
+ currentChannel,
+ currentTeam,
+ customDescriptionText,
+ match,
+ siteName
+ } = this.props;
+
+ let url = '/select_team';
+ if (currentTeam) {
+ url = `/${currentTeam.name}`;
+ if (currentChannel) {
+ url += `/channels/${currentChannel.name}`;
+ }
+ }
+
+ return (
+ <div>
+ <AnnouncementBar/>
+ <BackButton url={url}/>
+ <div className='col-sm-12'>
+ <div className='signup-team__container'>
+ <SiteNameAndDescription
+ customDescriptionText={customDescriptionText}
+ siteName={siteName}
+ />
+ <div className='signup__content'>
+ <Switch>
+ <Route
+ path={`${this.props.match.url}/display_name`}
+ render={(props) => (
+ <DisplayName
+ state={this.state}
+ updateParent={this.updateParent}
+ {...props}
+ />
+ )}
+ />
+ <Route
+ path={`${this.props.match.url}/team_url`}
+ render={(props) => (
+ <TeamUrl
+ state={this.state}
+ updateParent={this.updateParent}
+ {...props}
+ />
+ )}
+ />
+ <Redirect to={`${match.url}/display_name`}/>
+ </Switch>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}

components/create_team/index.js → components/create_team/index.ts

@@ -6,16 +6,17 @@ import {connect} from 'react-redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
+import {GlobalState} from 'mattermost-redux/types/store';
 
 import CreateTeam from './create_team';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: GlobalState) {
  const config = getConfig(state);
  const currentChannel = getCurrentChannel(state);
  const currentTeam = getCurrentTeam(state);
 
- const customDescriptionText = config.CustomDescriptionText;
- const siteName = config.SiteName;
+ const customDescriptionText = config.CustomDescriptionText!;
+ const siteName = config.SiteName!;
 
  return {
  currentChannel,