Migrate team_settings_modal to typescript (mattermost#6591)

components/team_settings/team_settings.jsx

@@ -61,7 +61,7 @@ TeamSettings.propTypes = {
  updateSection: PropTypes.func.isRequired,
  closeModal: PropTypes.func.isRequired,
  collapseModal: PropTypes.func.isRequired,
- team: PropTypes.object.isRequired,
+ team: PropTypes.object,
 };
 
 export default TeamSettings;

components/team_settings_modal/index.js → components/team_settings_modal/index.ts

@@ -6,9 +6,11 @@ import {connect} from 'react-redux';
 import {ModalIdentifiers} from 'utils/constants';
 import {isModalOpen} from 'selectors/views/modals';
 
-import TeamSettingsModal from './team_settings_modal.jsx';
+import {GlobalState} from 'types/store';
 
-function mapStateToProps(state) {
+import TeamSettingsModal from './team_settings_modal';
+
+function mapStateToProps(state: GlobalState) {
  const modalId = ModalIdentifiers.TEAM_SETTINGS;
  return {
  show: isModalOpen(state, modalId),

components/team_settings_modal/team_settings_modal.test.jsx → components/team_settings_modal/team_settings_modal.test.tsx

@@ -5,11 +5,11 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
-import TeamSettingsModal from 'components/team_settings_modal/team_settings_modal.jsx';
+import TeamSettingsModal from 'components/team_settings_modal/team_settings_modal';
 
 describe('components/team_settings_modal', () => {
  test('should match snapshot', () => {
- const wrapper = shallow(<TeamSettingsModal/>);
+ const wrapper = shallow(<TeamSettingsModal onHide={jest.fn()}/>);
  expect(wrapper).toMatchSnapshot();
  });
 
@@ -22,7 +22,7 @@ describe('components/team_settings_modal', () => {
  />,
  );
 
- wrapper.instance().handleHidden();
+ (wrapper.instance() as TeamSettingsModal).handleHidden();
  expect(onHide).toHaveBeenCalledTimes(1);
  });
 });

components/team_settings_modal/team_settings_modal.jsx → components/team_settings_modal/team_settings_modal.tsx

@@ -3,22 +3,29 @@
 
 import $ from 'jquery';
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import * as Utils from 'utils/utils.jsx';
-const SettingsSidebar = React.lazy(() => import('components/settings_sidebar.tsx'));
+const SettingsSidebar = React.lazy(() => import('components/settings_sidebar'));
 
 import TeamSettings from 'components/team_settings';
 
-export default class TeamSettingsModal extends React.PureComponent {
- static propTypes = {
- onHide: PropTypes.func,
- };
+type Props = {
+ onHide: () => void
+}
+
+export type State = {
+ activeTab: string,
+ activeSection: string,
+ show: boolean,
+}
 
- constructor(props) {
+export default class TeamSettingsModal extends React.PureComponent<Props, State> {
+ modalBodyRef: React.RefObject<Modal>;
+
+ constructor(props:Props) {
  super(props);
 
  this.state = {
@@ -30,23 +37,24 @@ export default class TeamSettingsModal extends React.PureComponent {
  this.modalBodyRef = React.createRef();
  }
 
- updateTab = (tab) => {
+ updateTab = (tab: string) => {
  this.setState({
  activeTab: tab,
  activeSection: '',
  });
  }
 
- updateSection = (section) => {
+ updateSection = (section:string) => {
  this.setState({activeSection: section});
  }
 
  collapseModal = () => {
- $(ReactDOM.findDOMNode(this.modalBodyRef.current)).closest('.modal-dialog').removeClass('display--content'); // eslint-disable-line jquery/no-closest, jquery/no-class
+ const el = ReactDOM.findDOMNode(this.modalBodyRef.current) as HTMLDivElement;
+ $(el).closest('.modal-dialog').removeClass('display--content'); // eslint-disable-line jquery/no-closest, jquery/no-class
 
  this.setState({
- active_tab: '',
- active_section: '',
+ activeTab: '',
+ activeSection: '',
  });
  }