[GH-12442] Convert profile_picture and related test to typescript (ma…

…ttermost#3876)

* Convert profile_picture and related test to typescript
* Add ImageSize enum to `types/images.d.ts
* Use createRef instead of deprecated refs access in profile_picture component
Fixes mattermost/mattermost#12442

* Update package-lock.json

* Remove ImageSize enum because change is greater in scope and opinionated

* Revert size prop to string to avoid a lot of casting

* Update snapshot

* Fix snapshot

* Revert unrelated changes to package-lock.json

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

@@ -59,7 +59,7 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
 >
  <button
  className="status-wrapper style--none "
- tabIndex="-1"
+ tabIndex={-1}
  >
  <span
  className="profile-icon "

components/admin_console/admin_user_card/admin_user_card.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Client4} from 'mattermost-redux/client';
 
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import * as Utils from 'utils/utils.jsx';
 
 import './admin_user_card.scss';

components/channel_invite_modal/channel_invite_modal.jsx

@@ -10,7 +10,7 @@ import {Client4} from 'mattermost-redux/client';
 import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
 
 import {displayEntireNameForUser, localizeMessage, isGuest} from 'utils/utils.jsx';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import MultiSelect from 'components/multiselect/multiselect.jsx';
 import AddIcon from 'components/widgets/icons/fa_add_icon';
 import GuestBadge from 'components/widgets/badges/guest_badge';

components/more_direct_channels/more_direct_channels.jsx

@@ -11,7 +11,7 @@ import {browserHistory} from 'utils/browser_history';
 import Constants from 'utils/constants.jsx';
 import {displayEntireNameForUser, localizeMessage, isGuest} from 'utils/utils.jsx';
 import MultiSelect from 'components/multiselect/multiselect.jsx';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import AddIcon from 'components/widgets/icons/fa_add_icon';
 import GuestBadge from 'components/widgets/badges/guest_badge';
 import BotBadge from 'components/widgets/badges/bot_badge';

components/post_view/channel_intro_message/channel_intro_message.jsx

@@ -10,7 +10,7 @@ import {Permissions} from 'mattermost-redux/constants';
 import {Constants, ModalIdentifiers} from 'utils/constants';
 import ChannelInviteModal from 'components/channel_invite_modal';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import ToggleModalButtonRedux from 'components/toggle_modal_button_redux';
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
 import UserProfile from 'components/user_profile';

components/profile_picture.test.jsx → components/profile_picture.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 
 describe('components/ProfilePicture', () => {
  const baseProps = {

components/profile_picture.jsx → components/profile_picture.tsx

@@ -1,42 +1,49 @@
 // 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} from 'react-bootstrap';
 
 import ProfilePopover from 'components/profile_popover';
 import StatusIcon from 'components/status_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-export default class ProfilePicture extends React.PureComponent {
- static defaultProps = {
+interface MMOverlayTrigger extends OverlayTrigger {
+ hide: () => void;
+}
+
+type Props = {
+ hasMention?: boolean;
+ isBusy?: boolean;
+ isEmoji?: boolean;
+ isRHS?: boolean;
+ profileSrc?: string;
+ size: string;
+ src: string;
+ status?: string;
+ userId?: string;
+ username?: string;
+ wrapperClass?: string;
+}
+
+export default class ProfilePicture extends React.PureComponent<Props> {
+ public overlay = React.createRef<MMOverlayTrigger>();
+
+ public static defaultProps = {
  size: 'md',
  isRHS: false,
  isEmoji: false,
  hasMention: false,
  wrapperClass: '',
  };
 
- static propTypes = {
- src: PropTypes.string.isRequired,
- profileSrc: PropTypes.string,
- status: PropTypes.string,
- size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
- userId: PropTypes.string,
- username: PropTypes.string,
- isBusy: PropTypes.bool,
- isRHS: PropTypes.bool,
- hasMention: PropTypes.bool,
- isEmoji: PropTypes.bool,
- wrapperClass: PropTypes.string,
- };
-
- hideProfilePopover = () => {
- this.refs.overlay.hide();
+ public hideProfilePopover = () => {
+ if (this.overlay.current && typeof this.overlay.current.hide === 'function') {
+ this.overlay.current.hide();
+ }
  }
 
- render() {
+ public render() {
  // profileSrc will, if possible, be the original user profile picture even if the icon
  // for the post is overriden, so that the popup shows the user identity
  const profileSrc = (typeof this.props.profileSrc === 'string' && this.props.profileSrc !== '') ?
@@ -48,7 +55,7 @@ export default class ProfilePicture extends React.PureComponent {
  if (this.props.userId) {
  return (
  <OverlayTrigger
- ref='overlay'
+ ref={this.overlay}
  trigger='click'
  placement='right'
  rootClose={true}
@@ -65,7 +72,7 @@ export default class ProfilePicture extends React.PureComponent {
  >
  <button
  className={`status-wrapper style--none ${this.props.wrapperClass}`}
- tabIndex='-1'
+ tabIndex={-1}
  >
  <span className={profileIconClass}>
  <Avatar

components/user_list_row/user_list_row.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {Client4} from 'mattermost-redux/client';
 
 import * as Utils from 'utils/utils.jsx';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import GuestBadge from 'components/widgets/badges/guest_badge';
 import BotBadge from 'components/widgets/badges/bot_badge';
 

components/user_list_row_with_error/user_list_row_with_error.jsx

@@ -7,7 +7,7 @@ import {Link} from 'react-router-dom';
 import {Client4} from 'mattermost-redux/client';
 
 import * as Utils from 'utils/utils.jsx';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_picture';
 import BotBadge from 'components/widgets/badges/bot_badge';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';

package.json

@@ -94,6 +94,7 @@
  "@storybook/addons": "5.2.1",
  "@storybook/react": "5.2.1",
  "@types/chart.js": "2.8.5",
+ "@types/react-bootstrap": "^0.32.20",
  "@types/react-color": "3.0.1",
  "@types/react-intl": "2.3.18",
  "@typescript-eslint/eslint-plugin": "1.13.0",

types/images.d.ts

@@ -2,4 +2,4 @@
 // See LICENSE.txt for license information.
 
 declare module '*.jpg';
-declare module '*.png';
+declare module '*.png';