Fixes #12472 : Migrate 'components/common' module and associated test…

…s to TypeScript (mattermost#4566)

* changed file name to typescript ones

* added typescript to files

* added the missing type def

* nit : one of the props was required not optional

* nit : line

components/claim/claim_controller.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import logoImage from 'images/logo.png';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import OAuthToEmail from 'components/claim/components/oauth_to_email';
 import EmailToOAuth from 'components/claim/components/email_to_oauth';
 import LDAPToEmail from 'components/claim/components/ldap_to_email';

components/common/back_button.jsx → components/common/back_button.tsx

@@ -1,30 +1,29 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 
-export default class BackButton extends React.PureComponent {
- static propTypes = {
+type Props = {
 
-  /**
-  * URL to return to
-  */
-  url: PropTypes.string,
+ /**
+ * URL to return to
+ */
+ url: string;
 
-  /**
-  * An optional click handler that will trigger when the user clicks on the back button
-  */
-  onClick: PropTypes.func,
- };
+ /**
+ * onClick handler when user clicks back button
+ */
+ onClick?: React.EventHandler<React.MouseEvent>;
+}
 
- static defaultProps = {
- url: '/',
- };
+export default class BackButton extends React.PureComponent<Props> {
+ public static defaultProps: Partial<Props> = {
+ url: '/'
+ }
 
- render() {
+ public render(): JSX.Element {
  return (
  <div
  id='back_button'
@@ -38,11 +37,11 @@ export default class BackButton extends React.PureComponent {
  id='generic_icons.back'
  defaultMessage='Back Icon'
  >
- {(title) => (
+ {(title: string | JSX.Element) => (
  <span
  id='back_button_icon'
  className='fa fa-1x fa-angle-left'
- title={title}
+ title={title.toString()}
  />
  )}
  </FormattedMessage>

components/common/comment_icon.jsx → components/common/comment_icon.tsx

@@ -1,35 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
-import {Locations} from 'utils/constants';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import ReplyIcon from 'components/widgets/icons/reply_icon';
 
-export default class CommentIcon extends React.PureComponent {
- static propTypes = {
- location: PropTypes.oneOf([Locations.CENTER, Locations.SEARCH]).isRequired,
- handleCommentClick: PropTypes.func.isRequired,
- searchStyle: PropTypes.string,
- commentCount: PropTypes.number,
- postId: PropTypes.string,
- extraClass: PropTypes.string,
- };
+type Props = {
+ location: 'CENTER' | 'SEARCH';
+ handleCommentClick: React.EventHandler<React.MouseEvent>;
+ searchStyle: string;
+ commentCount: number;
+ postId?: string;
+ extraClass: string;
+}
 
- static defaultProps = {
+export default class CommentIcon extends React.PureComponent<Props> {
+ public static defaultProps: Partial<Props> = {
+ location: 'CENTER',
  searchStyle: '',
  commentCount: 0,
  extraClass: '',
- location: Locations.CENTER,
- };
+ }
 
- render() {
- let commentCountSpan = '';
+ public render(): JSX.Element {
+ let commentCountSpan: JSX.Element | null = null;
  let iconStyle = 'comment-icon__container';
  if (this.props.commentCount > 0) {
  iconStyle += ' icon--show';

components/common/site_name_and_description.test.jsx → components/common/site_name_and_description.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {FormattedMessage} from 'react-intl';
 
-import SiteNameAndDescription from 'components/common/site_name_and_description.jsx';
+import SiteNameAndDescription from 'components/common/site_name_and_description';
 
 describe('/components/common/SiteNameAndDescription', () => {
  const baseProps = {

components/common/site_name_and_description.jsx → components/common/site_name_and_description.tsx

@@ -1,21 +1,20 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-export default class SiteNameAndDescription extends React.PureComponent {
- static propTypes = {
- customDescriptionText: PropTypes.string,
- siteName: PropTypes.string,
- };
+type Props = {
+ customDescriptionText?: string;
+ siteName: string;
+}
 
- static defaultProps = {
- siteName: 'Mattermost',
- };
+export default class SiteNameAndDescription extends React.PureComponent<Props> {
+ public static defaultProps: Partial<Props> = {
+ siteName: 'Mattermost'
+ }
 
- render() {
+ public render(): JSX.Element {
  const {
  customDescriptionText,
  siteName,

components/create_team/create_team.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {Route, Switch, Redirect} from 'react-router-dom';
 
 import AnnouncementBar from 'components/announcement_bar';
-import BackButton from 'components/common/back_button.jsx';
+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';

components/create_team/create_team.test.jsx

@@ -8,7 +8,7 @@ import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 import CreateTeam from 'components/create_team/create_team.jsx';
 
 jest.mock('components/announcement_bar');
-jest.mock('components/common/back_button.jsx');
+jest.mock('components/common/back_button');
 jest.mock('react-router-dom');
 
 describe('/components/create_team', () => {

components/do_verify_email/do_verify_email.jsx

@@ -9,7 +9,7 @@ import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {browserHistory} from 'utils/browser_history';
 import {AnnouncementBarTypes, AnnouncementBarMessages, VerifyEmailErrors} from 'utils/constants';
 import logoImage from 'images/logo.png';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import LoadingScreen from 'components/loading_screen';
 
 import * as GlobalActions from 'actions/global_actions.jsx';

components/login/login_controller/login_controller.jsx

@@ -26,7 +26,7 @@ import SiteNameAndDescription from 'components/common/site_name_and_description'
 import AnnouncementBar from 'components/announcement_bar';
 import FormError from 'components/form_error';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import LoadingScreen from 'components/loading_screen';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';

components/mfa/mfa_controller/mfa_controller.jsx

@@ -8,7 +8,7 @@ import {Route, Switch} from 'react-router-dom';
 
 import {emitUserLoggedOutEvent} from 'actions/global_actions.jsx';
 import logoImage from 'images/logo.png';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import LogoutIcon from 'components/widgets/icons/fa_logout_icon';
 
 import Setup from '../setup';

components/post_view/post_info/post_info.jsx

@@ -12,7 +12,7 @@ import * as ReduxPostUtils from 'mattermost-redux/utils/post_utils';
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants';
-import CommentIcon from 'components/common/comment_icon.jsx';
+import CommentIcon from 'components/common/comment_icon';
 import DotMenu from 'components/dot_menu';
 import PostFlagIcon from 'components/post_view/post_flag_icon';
 import PostReaction from 'components/post_view/post_reaction';

components/search_results_item/search_results_item.jsx

@@ -10,7 +10,7 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 import PostMessageContainer from 'components/post_view/post_message_view';
 import FileAttachmentListContainer from 'components/file_attachment_list';
-import CommentIcon from 'components/common/comment_icon.jsx';
+import CommentIcon from 'components/common/comment_icon';
 import DotMenu from 'components/dot_menu';
 import PostProfilePicture from 'components/post_profile_picture';
 import UserProfile from 'components/user_profile';

components/select_team/select_team.jsx

@@ -16,7 +16,7 @@ import Constants from 'utils/constants';
 import logoImage from 'images/logo.png';
 
 import AnnouncementBar from 'components/announcement_bar';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import LoadingScreen from 'components/loading_screen';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import SiteNameAndDescription from 'components/common/site_name_and_description';

components/should_verify_email/should_verify_email.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';
 
 export default class ShouldVerifyEmail extends React.PureComponent {

components/signup/signup_controller/signup_controller.jsx

@@ -11,7 +11,7 @@ import {browserHistory} from 'utils/browser_history';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import logoImage from 'images/logo.png';
 import AnnouncementBar from 'components/announcement_bar';
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import FormError from 'components/form_error';
 import LocalizedIcon from 'components/localized_icon';
 

components/signup/signup_email/signup_email.jsx

@@ -16,7 +16,7 @@ import * as Utils from 'utils/utils.jsx';
 
 import logoImage from 'images/logo.png';
 
-import BackButton from 'components/common/back_button.jsx';
+import BackButton from 'components/common/back_button';
 import LoadingScreen from 'components/loading_screen';
 import SiteNameAndDescription from 'components/common/site_name_and_description';
 

types/react-bootstrap.d.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+/* eslint-disable react/require-optimization */
+
+// Here we are extending the Interface defined by @types/react-bootstrap to include out own
+// additional types, this soon will be not needed when we upgrade React-Bootstrap version to latest
+// Until that happens this is the fix
+
+import * as React from 'react';
+import {OverlayTriggerProps} from 'react-bootstrap';
+
+export interface AdditionalOverlayTriggerProps extends React.ComponentPropsWithRef<typeof OverlayTriggerProps> {
+
+ className?: string;
+}
+
+declare class OverlayTrigger extends React.Component<AdditionalOverlayTriggerProps> {}
+
+declare module 'react-bootstrap' {
+ export {OverlayTrigger};
+}