MM-22155 Replace usage of React.Component with React.PureComponent (#…

…5536)

* MM-22155 Replace usage of React.Component with React.PureComponent

* MM-22155 Switch GifPicker to use PureComponent

actions/views/modals.test.jsx

@@ -9,7 +9,7 @@ import thunk from 'redux-thunk';
 import {openModal, closeModal} from 'actions/views/modals';
 import {ActionTypes, ModalIdentifiers} from 'utils/constants';
 
-class TestModal extends React.Component {
+class TestModal extends React.PureComponent {
  render() {
  return (
  <Modal

components/add_groups_to_channel_modal/add_groups_to_channel_modal.jsx

@@ -18,7 +18,7 @@ import AddIcon from 'components/widgets/icons/fa_add_icon';
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
 
-export default class AddGroupsToChannelModal extends React.Component {
+export default class AddGroupsToChannelModal extends React.PureComponent {
  static propTypes = {
  currentChannelName: PropTypes.string.isRequired,
  currentChannelId: PropTypes.string.isRequired,

components/add_groups_to_team_modal/add_groups_to_team_modal.jsx

@@ -18,7 +18,7 @@ import AddIcon from 'components/widgets/icons/fa_add_icon';
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
 
-export default class AddGroupsToTeamModal extends React.Component {
+export default class AddGroupsToTeamModal extends React.PureComponent {
  static propTypes = {
  currentTeamName: PropTypes.string.isRequired,
  currentTeamId: PropTypes.string.isRequired,

components/add_user_to_channel_modal/add_user_to_channel_modal.jsx

@@ -14,7 +14,7 @@ import SuggestionList from 'components/suggestion/suggestion_list.jsx';
 
 import {placeCaretAtEnd} from 'utils/utils.jsx';
 
-export default class AddUserToChannelModal extends React.Component {
+export default class AddUserToChannelModal extends React.PureComponent {
  static propTypes = {
 
  /**

components/admin_console/admin_button_outline/admin_button_outline.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import './admin_button_outline.scss';
 
-export default class AdminButtonOutline extends React.Component {
+export default class AdminButtonOutline extends React.PureComponent {
  static propTypes = {
  onClick: PropTypes.func.isRequired,
  children: PropTypes.string.isRequired,
@@ -21,4 +21,4 @@ export default class AdminButtonOutline extends React.Component {
  </button>
  );
  }
-}
+}

components/admin_console/admin_console.tsx

@@ -69,7 +69,7 @@ type Item = {
  url: string;
 }
 
-export default class AdminConsole extends React.Component<Props, State> {
+export default class AdminConsole extends React.PureComponent<Props, State> {
  public constructor(props: Props) {
  super(props);
  this.state = {

components/admin_console/admin_navbar_dropdown/admin_navbar_dropdown.tsx

@@ -29,7 +29,7 @@ type Props = {
  };
 };
 
-class AdminNavbarDropdown extends React.Component<Props, {}> {
+class AdminNavbarDropdown extends React.PureComponent<Props, {}> {
  private handleLogout = (e: React.MouseEvent<HTMLButtonElement>) => {
  if (this.props.navigationBlocked) {
  e.preventDefault();

components/admin_console/admin_settings.tsx

@@ -34,7 +34,7 @@ type ClientErrorPlaceholder = {
  server_error_id: string;
 }
 
-export default abstract class AdminSettings extends React.Component<Props, State> {
+export default abstract class AdminSettings extends React.PureComponent<Props, State> {
  public constructor(props: Props) {
  super(props);
  const stateInit = {

components/admin_console/admin_sidebar/admin_sidebar.jsx

@@ -40,7 +40,7 @@ const renderScrollThumbVertical = (props) => (
  />
 );
 
-class AdminSidebar extends React.Component {
+class AdminSidebar extends React.PureComponent {
  static propTypes = {
  license: PropTypes.object.isRequired,
  config: PropTypes.object,

components/admin_console/admin_sidebar_category.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {NavLink, Route} from 'react-router-dom';
 
-export default class AdminSidebarCategory extends React.Component {
+export default class AdminSidebarCategory extends React.PureComponent {
  static get propTypes() {
  return {
  name: PropTypes.string,

components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx

@@ -17,7 +17,7 @@ type Props = {
  currentUser: UserProfile& {last_picture_update?: number};
 }
 
-export default class SidebarHeader extends React.Component<Props> {
+export default class SidebarHeader extends React.PureComponent<Props> {
  public render() {
  const me = this.props.currentUser;
  let profilePicture = null;

components/admin_console/admin_sidebar_section.jsx

@@ -8,7 +8,7 @@ import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import BlockableLink from 'components/admin_console/blockable_link';
 import * as Utils from 'utils/utils.jsx';
 
-export default class AdminSidebarSection extends React.Component {
+export default class AdminSidebarSection extends React.PureComponent {
  static get propTypes() {
  return {
  name: PropTypes.string.isRequired,

components/admin_console/boolean_setting.tsx

@@ -21,7 +21,7 @@ type Props = {
  helpText: React.ReactNode;
 }
 
-export default class BooleanSetting extends React.Component<Props> {
+export default class BooleanSetting extends React.PureComponent<Props> {
  public static defaultProps = {
  trueText: (
  <FormattedMessage

components/admin_console/cluster_table.jsx

@@ -10,7 +10,7 @@ import statusGreen from 'images/status_green.png';
 import statusYellow from 'images/status_yellow.png';
 import ReloadIcon from 'components/widgets/icons/fa_reload_icon';
 
-export default class ClusterTable extends React.Component {
+export default class ClusterTable extends React.PureComponent {
  static propTypes = {
  clusterInfos: PropTypes.array.isRequired,
  reload: PropTypes.func.isRequired,

components/admin_console/cluster_table_container.jsx

@@ -8,7 +8,7 @@ import LoadingScreen from '../loading_screen';
 
 import ClusterTable from './cluster_table.jsx';
 
-export default class ClusterTableContainer extends React.Component {
+export default class ClusterTableContainer extends React.PureComponent {
  constructor(props) {
  super(props);
 

components/admin_console/custom_enable_disable_guest_accounts_setting.tsx

@@ -20,7 +20,7 @@ type Props = {
  showConfirm: boolean;
 }
 
-export default class CustomEnableDisableGuestAccountsSetting extends React.Component<Props> {
+export default class CustomEnableDisableGuestAccountsSetting extends React.PureComponent<Props> {
  public handleChange = (id: string, value: boolean, submit = false) => {
  const confirmNeeded = value === false; // Requires confirmation if disabling guest accounts
  let warning: React.ReactNode | string = '';

components/admin_console/custom_url_schemes_setting.jsx

@@ -11,7 +11,7 @@ import LocalizedInput from 'components/localized_input/localized_input';
 
 import Setting from './setting';
 
-export default class CustomUrlSchemesSetting extends React.Component {
+export default class CustomUrlSchemesSetting extends React.PureComponent {
  static get propTypes() {
  return {
  id: PropTypes.string.isRequired,

components/admin_console/dropdown_setting.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import Setting from './setting';
 
-export default class DropdownSetting extends React.Component {
+export default class DropdownSetting extends React.PureComponent {
  static propTypes = {
  id: PropTypes.string.isRequired,
  values: PropTypes.array.isRequired,

components/admin_console/generated_setting.tsx

@@ -22,7 +22,7 @@ type Props = {
  regenerateHelpText?: React.ReactNode;
 }
 
-export default class GeneratedSetting extends React.Component<Props> {
+export default class GeneratedSetting extends React.PureComponent<Props> {
  public static get defaultProps() {
  return {
  disabled: false,

components/admin_console/group_settings/group_row.jsx

@@ -11,7 +11,7 @@ import {localizeMessage} from 'utils/utils.jsx';
 import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon.jsx';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
-export default class GroupRow extends React.Component {
+export default class GroupRow extends React.PureComponent {
  static propTypes = {
  primary_key: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,

components/admin_console/highlight.tsx

@@ -10,7 +10,7 @@ type Props = {
  children: React.ReactNode;
 }
 
-export default class Highlight extends React.Component<Props> {
+export default class Highlight extends React.PureComponent<Props> {
  private markInstance? : Mark;
  private ref: React.RefObject<HTMLDivElement>;
 

components/admin_console/license_settings/license_settings.jsx

@@ -10,7 +10,7 @@ import * as Utils from 'utils/utils.jsx';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
-export default class LicenseSettings extends React.Component {
+export default class LicenseSettings extends React.PureComponent {
  static propTypes = {
  license: PropTypes.object.isRequired,
  config: PropTypes.object,

components/admin_console/manage_teams_modal/manage_teams_dropdown.jsx

@@ -9,7 +9,7 @@ import Menu from 'components/widgets/menu/menu';
 
 import * as Utils from 'utils/utils.jsx';
 
-export default class ManageTeamsDropdown extends React.Component {
+export default class ManageTeamsDropdown extends React.PureComponent {
  static propTypes = {
  team: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,

components/admin_console/manage_teams_modal/manage_teams_modal.jsx

@@ -15,7 +15,7 @@ import Avatar from 'components/widgets/users/avatar';
 import ManageTeamsDropdown from './manage_teams_dropdown.jsx';
 import RemoveFromTeamButton from './remove_from_team_button.jsx';
 
-export default class ManageTeamsModal extends React.Component {
+export default class ManageTeamsModal extends React.PureComponent {
  static propTypes = {
  locale: PropTypes.string.isRequired,
  onModalDismissed: PropTypes.func.isRequired,

components/admin_console/multiselect_settings.jsx

@@ -9,7 +9,7 @@ import FormError from 'components/form_error';
 
 import Setting from './setting';
 
-export default class MultiSelectSetting extends React.Component {
+export default class MultiSelectSetting extends React.PureComponent {
  static propTypes = {
  id: PropTypes.string.isRequired,
  values: PropTypes.array.isRequired,

components/admin_console/permission_schemes_settings/edit_post_time_limit_button/edit_post_time_limit_button.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import {Constants} from 'utils/constants';
 import {t} from 'utils/i18n';
 
-export default class EditPostTimeLimitButton extends React.Component {
+export default class EditPostTimeLimitButton extends React.PureComponent {
  static propTypes = {
  timeLimit: PropTypes.number.isRequired,
  onClick: PropTypes.func,

components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.jsx

@@ -12,7 +12,7 @@ import {t} from 'utils/i18n';
 
 const INT32_MAX = 2147483647;
 
-export default class EditPostTimeLimitModal extends React.Component {
+export default class EditPostTimeLimitModal extends React.PureComponent {
  static propTypes = {
  config: PropTypes.object.isRequired,
  show: PropTypes.bool,

components/admin_console/permission_schemes_settings/guest_permissions_tree/guest_permissions_tree.jsx

@@ -12,7 +12,7 @@ import PermissionGroup from '../permission_group.jsx';
 import EditPostTimeLimitButton from '../edit_post_time_limit_button';
 import EditPostTimeLimitModal from '../edit_post_time_limit_modal';
 
-export default class GuestPermissionsTree extends React.Component {
+export default class GuestPermissionsTree extends React.PureComponent {
  static propTypes = {
  scope: PropTypes.string.isRequired,
  role: PropTypes.object.isRequired,

components/admin_console/permission_schemes_settings/permission_description.jsx

@@ -10,7 +10,7 @@ import {generateId} from 'utils/utils.jsx';
 import {intlShape} from 'utils/react_intl';
 import Constants from 'utils/constants';
 
-export class PermissionDescription extends React.Component {
+export class PermissionDescription extends React.PureComponent {
  static propTypes = {
  intl: intlShape.isRequired,
  id: PropTypes.string.isRequired,

components/admin_console/permission_schemes_settings/permission_group.jsx

@@ -23,7 +23,7 @@ const getRecursivePermissions = (permissions) => {
  return result;
 };
 
-export default class PermissionGroup extends React.Component {
+export default class PermissionGroup extends React.PureComponent {
  static propTypes = {
  id: PropTypes.string.isRequired,
  uniqId: PropTypes.string.isRequired,

components/admin_console/permission_schemes_settings/permission_row.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import PermissionCheckbox from './permission_checkbox.jsx';
 import PermissionDescription from './permission_description.jsx';
 
-export default class PermissionRow extends React.Component {
+export default class PermissionRow extends React.PureComponent {
  static propTypes = {
  id: PropTypes.string.isRequired,
  uniqId: PropTypes.string.isRequired,

components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.jsx

@@ -24,7 +24,7 @@ import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import PermissionsTree, {EXCLUDED_PERMISSIONS} from '../permissions_tree';
 import GuestPermissionsTree, {GUEST_INCLUDED_PERMISSIONS} from '../guest_permissions_tree';
 
-export default class PermissionSystemSchemeSettings extends React.Component {
+export default class PermissionSystemSchemeSettings extends React.PureComponent {
  static propTypes = {
  config: PropTypes.object.isRequired,
  roles: PropTypes.object.isRequired,

components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.jsx

@@ -27,7 +27,7 @@ import LocalizedInput from 'components/localized_input/localized_input';
 
 import TeamInList from './team_in_list';
 
-export default class PermissionTeamSchemeSettings extends React.Component {
+export default class PermissionTeamSchemeSettings extends React.PureComponent {
  static propTypes = {
  schemeId: PropTypes.string,
  scheme: PropTypes.object,

components/admin_console/permission_schemes_settings/permission_team_scheme_settings/team_in_list/team_in_list.jsx

@@ -9,7 +9,7 @@ import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 import {imageURLForTeam} from 'utils/utils';
 
-export default class TeamInList extends React.Component {
+export default class TeamInList extends React.PureComponent {
  static propTypes = {
  team: PropTypes.object.isRequired,
  onRemoveTeam: PropTypes.func,

components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.jsx

@@ -16,7 +16,7 @@ import Constants from 'utils/constants';
 
 const MAX_TEAMS_PER_SCHEME_SUMMARY = 8;
 
-export default class PermissionsSchemeSummary extends React.Component {
+export default class PermissionsSchemeSummary extends React.PureComponent {
  static propTypes = {
  scheme: PropTypes.object.isRequired,
  teams: PropTypes.array,

components/admin_console/permission_schemes_settings/permissions_tree/permissions_tree.jsx

@@ -12,7 +12,7 @@ import PermissionGroup from '../permission_group.jsx';
 import EditPostTimeLimitButton from '../edit_post_time_limit_button';
 import EditPostTimeLimitModal from '../edit_post_time_limit_modal';
 
-export default class PermissionsTree extends React.Component {
+export default class PermissionsTree extends React.PureComponent {
  static propTypes = {
  scope: PropTypes.string.isRequired,
  config: PropTypes.object.isRequired,

components/admin_console/radio_setting.tsx

@@ -15,7 +15,7 @@ interface Props {
  helpText?: React.ReactNode;
  onChange(id: string, value: any): void;
 }
-export default class RadioSetting extends React.Component<Props> {
+export default class RadioSetting extends React.PureComponent<Props> {
  public static defaultProps: Partial<Props> = {
  disabled: false,
  };

components/admin_console/request_button/request_button.jsx

@@ -16,7 +16,7 @@ import WarningIcon from 'components/widgets/icons/fa_warning_icon';
  * its outcome as either success, or failure accompanied by the
  * `message` property of the `err` object.
  */
-export default class RequestButton extends React.Component {
+export default class RequestButton extends React.PureComponent {
  static propTypes = {
 
  /**

components/admin_console/reset_email_modal/reset_email_modal.jsx

@@ -10,7 +10,7 @@ import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import {adminResetEmail} from 'actions/admin_actions.jsx';
 
-export default class ResetEmailModal extends React.Component {
+export default class ResetEmailModal extends React.PureComponent {
  static propTypes = {
  user: PropTypes.object,
  show: PropTypes.bool.isRequired,

components/admin_console/reset_password_modal/reset_password_modal.tsx

@@ -38,7 +38,7 @@ type Props = {
  };
 }
 
-export default class ResetPasswordModal extends React.Component<Props, State> {
+export default class ResetPasswordModal extends React.PureComponent<Props, State> {
  public static defaultProps: Partial<Props> = {
  show: false,
  };

components/admin_console/schema_admin_settings.jsx

@@ -37,7 +37,7 @@ import FormattedAdminHeader from 'components/widgets/admin_console/formatted_adm
 
 import Setting from './setting';
 
-export default class SchemaAdminSettings extends React.Component {
+export default class SchemaAdminSettings extends React.PureComponent {
  static propTypes = {
  config: PropTypes.object,
  environmentConfig: PropTypes.object,

components/admin_console/server_logs/logs.jsx

@@ -11,7 +11,7 @@ import FormattedAdminHeader from 'components/widgets/admin_console/formatted_adm
 
 import LogList from './log_list.jsx';
 
-export default class Logs extends React.Component {
+export default class Logs extends React.PureComponent {
  static propTypes = {
 
  /*

components/admin_console/settings_group.jsx

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export default class SettingsGroup extends React.Component {
+export default class SettingsGroup extends React.PureComponent {
  static get propTypes() {
  return {
  show: PropTypes.bool.isRequired,