MM-20577 - Migrate 'components/admin_console/system_user_detail/team_list' module and associated tests to TypeScript

components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.jsx.snap → components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap

@@ -551,7 +551,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
  <button
  className="btn btn-link prev disabled"
  disabled={true}
- onClick={null}
+ onClick={[Function]}
  >
  <PreviousIcon
  additionalClassName={null}
@@ -666,7 +666,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
  <button
  className="btn btn-link prev disabled"
  disabled={true}
- onClick={null}
+ onClick={[Function]}
  >
  <PreviousIcon
  additionalClassName={null}
@@ -675,7 +675,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
  <button
  className="btn btn-link next disabled"
  disabled={true}
- onClick={null}
+ onClick={[Function]}
  >
  <NextIcon
  additionalClassName={null}

components/admin_console/system_user_detail/team_list/abstract_list.test.jsx → components/admin_console/system_user_detail/team_list/abstract_list.test.tsx

@@ -4,8 +4,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import AbstractList from './abstract_list.jsx';
-import TeamRow from './team_row.jsx';
+import AbstractList from './abstract_list';
+import TeamRow from './team_row';
 
 describe('admin_console/system_user_detail/team_list/AbstractList', () => {
  const renderRow = jest.fn((item) => {

components/admin_console/system_user_detail/team_list/abstract_list.jsx → components/admin_console/system_user_detail/team_list/abstract_list.tsx

@@ -2,79 +2,91 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
+import {ActionFunc} from 'mattermost-redux/types/actions';
+
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 
 import './abstract_list.scss';
 
 const PAGE_SIZE = 10;
 
-export default class AbstractList extends React.PureComponent {
- static propTypes = {
- userId: PropTypes.string.isRequired,
- headerLabels: PropTypes.array.isRequired,
- data: PropTypes.arrayOf(PropTypes.object),
- onPageChangedCallback: PropTypes.func,
- total: PropTypes.number.isRequired,
- renderRow: PropTypes.func.isRequired,
- emptyListTextId: PropTypes.string.isRequired,
- emptyListTextDefaultMessage: PropTypes.string.isRequired,
- actions: PropTypes.shape({
- getTeamsData: PropTypes.func.isRequired,
- removeGroup: PropTypes.func,
- }).isRequired,
+type Props = {
+ userId: string;
+ headerLabels: Record<string, any>[];
+ data: Record<string, any>[];
+ onPageChangedCallback?: (paging: Paging) => void;
+ total: number;
+ renderRow: (item: {[x: string]: string}) => JSX.Element;
+ emptyListTextId: string;
+ emptyListTextDefaultMessage: string;
+ actions: {
+ getTeamsData: (userId: string) => ActionFunc & Partial<{then: (func: () => void) => void}> | Promise<Record<string, any>>;
+ removeGroup?: () => void;
  };
+}
+
+type State = {
+ loading: boolean;
+ page: number;
+}
+
+type Paging = {
+ startCount: number;
+ endCount: number;
+ total: number;
+}
 
- static defaultProps = {
+export default class AbstractList extends React.PureComponent<Props, State> {
+ public static defaultProps = {
  data: [],
  };
 
- constructor(props) {
+ public constructor(props: Props) {
  super(props);
  this.state = {
  loading: true,
  page: 0,
  };
  }
 
- componentDidMount() {
+ public componentDidMount() {
  this.performSearch(this.state.page);
  }
 
- previousPage = async (e) => {
+ private previousPage = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
  e.preventDefault();
  const page = this.state.page < 1 ? 0 : this.state.page - 1;
  this.setState({page, loading: true});
  this.performSearch(page);
  }
 
- nextPage = async (e) => {
+ private nextPage = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
  e.preventDefault();
  const page = this.state.page + 1;
  this.setState({page, loading: true});
  this.performSearch(page);
  }
 
- performSearch = () => {
+ private performSearch = (page: number): void => {
  const newState = {...this.state};
  const userId = this.props.userId;
  delete newState.page;
 
  newState.loading = true;
  this.setState(newState);
 
- this.props.actions.getTeamsData(userId).then(() => {
+ this.props.actions.getTeamsData(userId).then!(() => {
  if (this.props.onPageChangedCallback) {
  this.props.onPageChangedCallback(this.getPaging());
  }
  this.setState({loading: false});
  });
  }
 
- getPaging() {
+ private getPaging(): Paging {
  const startCount = (this.state.page * PAGE_SIZE) + 1;
  let endCount = (this.state.page * PAGE_SIZE) + PAGE_SIZE;
  const total = this.props.total;
@@ -84,7 +96,7 @@ export default class AbstractList extends React.PureComponent {
  return {startCount, endCount, total};
  }
 
- renderHeaderLabels = () => {
+ private renderHeaderLabels = (): React.ReactFragment => {
  return (
  <React.Fragment>
  {this.props.headerLabels.map((headerLabel, id) => (
@@ -98,7 +110,7 @@ export default class AbstractList extends React.PureComponent {
  );
  }
 
- renderRows = () => {
+ private renderRows = (): JSX.Element | JSX.Element[] => {
  if (this.state.loading) {
  return (
  <div className='AbstractList__loading'>
@@ -122,7 +134,7 @@ export default class AbstractList extends React.PureComponent {
  return pageData;
  }
 
- render = () => {
+ public render = (): JSX.Element => {
  const {startCount, endCount, total} = this.getPaging();
  const lastPage = endCount === total;
  const firstPage = this.state.page === 0;
@@ -149,14 +161,14 @@ export default class AbstractList extends React.PureComponent {
  </div>
  <button
  className={'btn btn-link prev ' + (firstPage ? 'disabled' : '')}
- onClick={firstPage ? null : this.previousPage}
+ onClick={firstPage ? () => null : this.previousPage}
  disabled={firstPage}
  >
  <PreviousIcon/>
  </button>
  <button
  className={'btn btn-link next ' + (lastPage ? 'disabled' : '')}
- onClick={lastPage ? null : this.nextPage}
+ onClick={lastPage ? () => null : this.nextPage}
  disabled={lastPage}
  >
  <NextIcon/>

components/admin_console/system_user_detail/team_list/index.js → components/admin_console/system_user_detail/team_list/index.ts

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import {bindActionCreators, Dispatch} from 'redux';
 
 import {
  getTeamsForUser,
@@ -11,17 +11,20 @@ import {
  updateTeamMemberSchemeRoles,
 } from 'mattermost-redux/actions/teams';
 
+import {GenericAction} from 'mattermost-redux/types/actions';
+import {GlobalState} from 'mattermost-redux/types/store';
+
 import {getCurrentLocale} from 'selectors/i18n';
 
-import TeamList from './team_list.jsx';
+import TeamList from './team_list';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: GlobalState) {
  return {
  locale: getCurrentLocale(state),
  };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
  return {
  actions: bindActionCreators({
  getTeamsData: getTeamsForUser,

components/admin_console/system_user_detail/team_list/team_image.jsx → components/admin_console/system_user_detail/team_list/team_image.tsx

@@ -1,11 +1,16 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-export default class TeamButton extends React.PureComponent {
- render() {
+type Props = {
+ small: boolean;
+ teamIconUrl: string;
+ displayName: string;
+}
+
+export default class TeamButton extends React.PureComponent<Props, {}> {
+ public render(): JSX.Element {
  const {small, teamIconUrl} = this.props;
  const classModifier = small ? 'small' : 'large';
  let content;
@@ -41,10 +46,4 @@ export default class TeamButton extends React.PureComponent {
  </div>
  );
  }
-}
-
-TeamButton.propTypes = {
- small: PropTypes.bool,
- teamIconUrl: PropTypes.string,
- displayName: PropTypes.string,
-};
+}

components/admin_console/system_user_detail/team_list/team_list.test.jsx → components/admin_console/system_user_detail/team_list/team_list.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import TeamList from './team_list.jsx';
+import TeamList from './team_list';
 
 describe('admin_console/system_user_detail/team_list/TeamList', () => {
  const defaultProps = {