MM-22155 ESLint configuration updates part 1 (#5544)

* MM-22155 Disable no-undefined

* MM-22155 Disable react/jsx-filename-extension

* MM-22155 Disable no-magic-numbers

* MM-22155 Re-enable camelcase

* MM-22155 Re-enable no-unused-vars

.eslintrc.json

@@ -37,19 +37,7 @@
  ]
  }
  ],
- "no-magic-numbers": [
- 1,
- {
- "ignore": [
- -1,
- 0,
- 1,
- 2
- ],
- "enforceConst": true,
- "detectObjects": true
- }
- ],
+ "no-undefined": 0,
  "react/jsx-filename-extension": 0,
  "react/prop-types": [
  2,
@@ -69,7 +57,20 @@
  "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
+ "@typescript-eslint/camelcase": [
+ 2,
+ {
+ "properties": "never"
+ }
+ ],
  "@typescript-eslint/no-non-null-assertion": 0,
+ "@typescript-eslint/no-unused-vars": [
+ 2,
+ {
+ "vars": "all",
+ "args": "after-used"
+ }
+ ],
  "@typescript-eslint/no-var-requires": 0,
  "@typescript-eslint/no-empty-function": 0,
  "@typescript-eslint/prefer-interface": 0,
@@ -89,18 +90,7 @@
  "variables": false
  }
  ],
- "@typescript-eslint/camelcase": [
- 2,
- {
- "properties": "never"
- }
- ],
- "react/jsx-filename-extension": [
- 1,
- {
- "extensions": [".jsx", ".tsx"]
- }
- ]
+ "react/jsx-filename-extension": 0
  }
  },
  {

components/admin_console/audits/audits.tsx

@@ -4,8 +4,6 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
-
 import ComplianceReports from 'components/admin_console/compliance_reports';
 import AuditTable from 'components/audit_table';
 import LoadingScreen from 'components/loading_screen';

components/admin_console/data_grid/data_grid_search.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {CSSProperties} from 'react';
+import React from 'react';
 
 import * as Utils from 'utils/utils.jsx';
 import SearchIcon from 'components/widgets/icons/search_icon';
@@ -14,7 +14,7 @@ type Props = {
  term: string;
 }
 
-class DataGridSearch extends React.Component<Props> {
+class DataGridSearch extends React.PureComponent<Props> {
  handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  const term = e.target.value;
  this.props.onSearch(term);

components/admin_console/system_user_detail/team_list/abstract_list.tsx

@@ -53,24 +53,24 @@ export default class AbstractList extends React.PureComponent<Props, State> {
  }
 
  public componentDidMount() {
- this.performSearch(this.state.page);
+ this.performSearch();
  }
 
  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);
+ this.performSearch();
  }
 
  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);
+ this.performSearch();
  }
 
- private performSearch = (page: number): void => {
+ private performSearch = (): void => {
  const newState = {...this.state};
  const userId = this.props.userId;
  delete newState.page;

components/admin_console/team_channel_settings/channel/list/channel_list.tsx

@@ -98,7 +98,7 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
  }
  }
  };
- private getDataBySearch = async (page: number, perPage: number, notAssociatedToGroup? : string, excludeDefaultChannels?: boolean): Promise<ChannelWithTeamData[]> => {
+ private getDataBySearch = async (page: number, perPage: number): Promise<ChannelWithTeamData[]> => {
  const response = await this.props.actions.searchAllChannels(this.state.searchString, '', false, page, perPage);
  const channels = new Array(page * perPage); // Pad the array with empty entries because AbstractList expects to slice the results based on the pagination offset.
  if ('data' in response) {

components/admin_console/text_setting.tsx

@@ -13,7 +13,7 @@ interface Props extends WidgetTextSettingProps {
 
 const AdminTextSetting: React.SFC<Props> = (props: Props): JSX.Element => {
  const {setByEnv, disabled, ...sharedProps} = props;
- const isTextDisabled = props.disabled || props.setByEnv;
+ const isTextDisabled = disabled || setByEnv;
 
  return (
  <TextSetting

components/admin_console/user_grid/user_grid.tsx

@@ -13,7 +13,7 @@ import DataGrid, {Row, Column} from 'components/admin_console/data_grid/data_gri
 
 import UserGridName from './user_grid_name';
 import UserGridRemove from './user_grid_remove';
-import UserGridRoleDropdown, {BaseMembership, Role} from './user_grid_role_dropdown';
+import UserGridRoleDropdown, {BaseMembership} from './user_grid_role_dropdown';
 
 import './user_grid.scss';
 

components/analytics/format.tsx

@@ -1,6 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import {Dictionary} from 'mattermost-redux/types/utilities';
 
 import * as Utils from 'utils/utils.jsx';
 

components/channel_groups_manage_modal/channel_groups_manage_modal.tsx

@@ -6,14 +6,13 @@ import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';
 
 import Groups from 'mattermost-redux/constants/groups';
 
-import {Group, SyncableType} from 'mattermost-redux/types/groups';
+import {Group} from 'mattermost-redux/types/groups';
 
 import {Channel} from 'mattermost-redux/types/channels';
 
 import AddGroupsToChannelModal from 'components/add_groups_to_channel_modal';
 
 import {ModalIdentifiers} from 'utils/constants';
-import {intlShape} from 'utils/react_intl';
 
 import ListModal, {DEFAULT_NUM_PER_PAGE} from 'components/list_modal.jsx';
 

components/channel_groups_manage_modal/index.ts

@@ -8,8 +8,6 @@ import {getMyChannelMember} from 'mattermost-redux/actions/channels';
 import {GlobalState} from 'mattermost-redux/types/store';
 import {ActionFunc} from 'mattermost-redux/types/actions';
 
-import {SyncableType} from 'mattermost-redux/types/groups';
-
 import {closeModal, openModal} from 'actions/views/modals';
 
 import ChannelGroupsManageModal from './channel_groups_manage_modal';

components/common/infinite_scroll.jsx

@@ -138,7 +138,6 @@ export default class InfiniteScroll extends React.PureComponent {
  const {isEndofData, isFetching} = this.state;
  const showLoader = !isEndofData && isFetching; // show loader if fetching and end of data is not reached.
  return (
- // eslint-disable-next-line react/jsx-filename-extension
  <>
  <div
  className={`infinite-scroll ${styleClass}`}

components/do_verify_email/do_verify_email.tsx

@@ -6,8 +6,6 @@ import {FormattedMessage} from 'react-intl';
 
 import {Error} from 'mattermost-redux/types/errors';
 
-import {UserProfile} from 'mattermost-redux/types/users';
-
 import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
 
 import {trackEvent} from 'actions/diagnostics_actions.jsx';

components/do_verify_email/index.ts

@@ -5,7 +5,7 @@ import {bindActionCreators, Dispatch} from 'redux';
 import {connect} from 'react-redux';
 import {verifyUserEmail, getMe} from 'mattermost-redux/actions/users';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentUserId, getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {clearErrors, logError} from 'mattermost-redux/actions/errors';
 
 import {GenericAction} from 'mattermost-redux/types/actions';

components/file_attachment/filename_overlay.test.tsx

@@ -9,7 +9,7 @@ import DownloadIcon from 'components/widgets/icons/download_icon';
 import AttachmentIcon from 'components/widgets/icons/attachment_icon';
 
 describe('components/file_attachment/FilenameOverlay', () => {
- function emptyFunction(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {} //eslint-disable-line no-empty-function
+ function emptyFunction() {} //eslint-disable-line no-empty-function
  const fileInfo = {
  id: 'thumbnail_id',
  name: 'test_filename',

components/link_tooltip/link_tooltip.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import PropTypes from 'prop-types';
-import React, {RefObject, MouseEvent, CSSProperties} from 'react';
+import React, {RefObject, CSSProperties} from 'react';
 import Popper from 'popper.js';
 import ReactDOM from 'react-dom';
 

components/multiselect/multiselect.test.tsx

@@ -10,7 +10,7 @@ import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 import MultiSelect, {Value} from './multiselect';
 import MultiSelectList, {Props as MultiSelectProps} from './multiselect_list';
 
-const element = (props: any) => <div/>;
+const element = () => <div/>;
 
 describe('components/multiselect/multiselect', () => {
  const totalCount = 8;

components/popover_list_members/popover_list_members.jsx

@@ -88,7 +88,7 @@ export default class PopoverListMembers extends React.PureComponent {
 
  handleGetProfilesInChannel = (e) => {
  this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover});
- this.props.actions.loadProfilesAndStatusesInChannel(this.props.channel.id, 0, undefined, 'status'); // eslint-disable-line no-undefined
+ this.props.actions.loadProfilesAndStatusesInChannel(this.props.channel.id, 0, undefined, 'status');
  };
 
  getTargetPopover = () => {

components/post_emoji/post_emoji.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {CSSProperties} from 'react';
+import React from 'react';
 
 interface PostEmojiProps {
  name: string;

components/rhs_thread/rhs_thread.tsx

@@ -3,7 +3,6 @@
 
 import {FormattedMessage} from 'react-intl';
 import React from 'react';
-import Scrollbars from 'react-custom-scrollbars';
 import {Posts} from 'mattermost-redux/constants';
 import {Channel} from 'mattermost-redux/types/channels';
 import {ExtendedPost} from 'mattermost-redux/actions/posts';

components/searchable_user_list/searchable_user_list.jsx

@@ -42,7 +42,7 @@ class SearchableUserList extends React.PureComponent {
 
  static defaultProps = {
  users: [],
- usersPerPage: 50, // eslint-disable-line no-magic-numbers
+ usersPerPage: 50,
  extraInfo: {},
  actions: [],
  actionProps: {},

components/sidebar/channel_navigator/index.ts

@@ -4,7 +4,6 @@
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux';
 
-import {GlobalState} from 'mattermost-redux/types/store';
 import {ActionFunc} from 'mattermost-redux/types/actions';
 
 import {openModal} from 'actions/views/modals';
@@ -14,20 +13,20 @@ import ChannelNavigator from './channel_navigator';
 
 // TODO: For Phase 1. Will revisit history in Phase 2
 function goBack() {
- return (dispatch: any, getState: any) => {
+ return () => {
  browserHistory.goBack();
  return {data: null};
  };
 }
 
 function goForward() {
- return (dispatch: any, getState: any) => {
+ return () => {
  browserHistory.goForward();
  return {data: null};
  };
 }
 
-function mapStateToProps(state: GlobalState) {
+function mapStateToProps() {
  return {
  canGoBack: true, // TODO: Phase 1 only
  canGoForward: true,

components/sidebar/sidebar_category_list/sidebar_category_list.tsx

@@ -11,7 +11,6 @@ import debounce from 'lodash/debounce';
 import {Channel} from 'mattermost-redux/types/channels';
 import {ChannelCategory} from 'mattermost-redux/types/channel_categories';
 import {Team} from 'mattermost-redux/types/teams';
-import {RelationOneToOne} from 'mattermost-redux/types/utilities';
 
 import UnreadChannelIndicator from 'components/unread_channel_indicator';
 import {Constants} from 'utils/constants';

components/sidebar/sidebar_channel/sidebar_base_channel/sidebar_base_channel.tsx

@@ -8,9 +8,6 @@ import {Channel} from 'mattermost-redux/types/channels';
 import {trackEvent} from 'actions/diagnostics_actions';
 import * as GlobalActions from 'actions/global_actions';
 
-import GlobeIcon from 'components/widgets/icons/globe_icon';
-import LockIcon from 'components/widgets/icons/lock_icon';
-
 import SidebarChannelLink from 'components/sidebar/sidebar_channel/sidebar_channel_link';
 import {localizeMessage} from 'utils/utils';
 import Constants from 'utils/constants';

components/sidebar/sidebar_channel/sidebar_channel_icon/sidebar_channel_icon.tsx

@@ -5,9 +5,6 @@ import React from 'react';
 
 import {Channel} from 'mattermost-redux/types/channels';
 
-import ArchiveIcon from 'components/widgets/icons/archive_icon';
-import DraftIcon from 'components/widgets/icons/draft_icon';
-
 type Props = {
  icon: JSX.Element | null;
  channel: Channel;

components/team_groups_manage_modal/team_groups_manage_modal.jsx

@@ -119,7 +119,7 @@ class TeamGroupsManageModal extends React.PureComponent {
  height='32'
  />
  <div className='more-modal__details'>
- <div className='more-modal__name'>{item.display_name} {'-'} &nbsp;
+ <div className='more-modal__name'>{item.display_name} {'-'} {'&nbsp;'}
  <span className='more-modal__name_count'>
  <FormattedMessage
  id='numMembers'

components/team_sidebar/team_button/index.ts

@@ -4,12 +4,11 @@
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
 
-import {GlobalState} from 'mattermost-redux/types/store';
 import {GenericAction} from 'mattermost-redux/types/actions';
 
 import TeamButton from './team_button';
 
-function mapStateToProps(state: GlobalState) {
+function mapStateToProps() {
  return {
  };
 }

components/user_list_row/user_list_row.jsx

@@ -106,10 +106,10 @@ export default class UserListRow extends React.PureComponent {
  hasMention={true}
  displayUsername={true}
  />
-  
+ {' '}
  {this.props.user.first_name || this.props.user.last_name || this.props.user.nickname ?
  '-' : null}
-  
+ {' '}
  {Utils.displayFullAndNicknameForUser(this.props.user)}
  </div>
  <div

components/widgets/menu/menu_items/submenu_item.tsx

@@ -74,7 +74,7 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
  private onClick = (event: React.MouseEvent<HTMLElement>) => {
  const {id, postId, subMenu, action, root} = this.props;
  const isMobile = Utils.isMobile();
- const pathPair = Object.entries(event.nativeEvent).find(([key, value]) => key === 'path');
+ const pathPair = Object.entries(event.nativeEvent).find(([key]) => key === 'path');
  let path: HTMLElement[] | undefined;
  if (pathPair) {
  path = pathPair[1];

components/widgets/menu/menu_wrapper_animation.tsx

@@ -15,7 +15,7 @@ type Props = {
 }
 
 export default class MenuWrapperAnimation extends React.PureComponent<Props> {
- private onEntering = (node: HTMLElement, isAppearing: boolean) => {
+ private onEntering = (node: HTMLElement) => {
  const nodeStyler = styler(node);
  chain(
  action(({update, complete}) => {

e2e/cypress/integration/accessibility/accessibility_popovers_spec.js

@@ -61,8 +61,8 @@ describe('Verify Accessibility Support in Popovers', () => {
  });
 
  // * Verify emoji navigation using arrow keys
- verifyArrowKeysEmojiNavigation('{rightarrow}', 3); // eslint-disable-line no-magic-numbers
- verifyArrowKeysEmojiNavigation('{leftarrow}', 2); // eslint-disable-line no-magic-numbers
+ verifyArrowKeysEmojiNavigation('{rightarrow}', 3);
+ verifyArrowKeysEmojiNavigation('{leftarrow}', 2);
 
  // # Press tab
  cy.get($el).focus().tab();

e2e/cypress/integration/emoji/react_to_last_message_shortcut_spec.js

@@ -44,7 +44,6 @@ describe('Keyboard shortcut for adding reactions to last message in channel or t
 
  // # Create a new channel for later use such as when channel is empty test
  cy.getCurrentTeamId().then((teamId) => {
- // eslint-disable-next-line no-magic-numbers
  cy.apiCreateChannel(teamId, newChannelName, newChannelName).then((response) => {
  testChannel = response.body;
  });