Updating ESLint

webapp/.eslintrc.json

@@ -36,6 +36,7 @@
         "block-scoped-var": 2,
         "brace-style": [2, "1tbs", { "allowSingleLine": false }],
         "camelcase": [2, {"properties": "never"}],
+        "class-methods-use-this": 1,
         "comma-dangle": [2, "never"],
         "comma-spacing": [2, {"before": false, "after": true}],
         "comma-style": [2, "last"],
@@ -48,6 +49,7 @@
         "dot-location": [2, "object"],
         "dot-notation": 2,
         "eqeqeq": [2, "smart"],
+        "func-call-spacing": [2, "never"],
         "func-names": 2,
         "func-style": [2, "declaration"],
         "generator-star-spacing": [2, {"before": false, "after": true}],
@@ -56,14 +58,16 @@
         "id-blacklist": 0,
         "indent": [2, 4, {"SwitchCase": 0}],
         "jsx-quotes": [2, "prefer-single"],
-        "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
+        "key-spacing": [2, {"beforeColon": false, "afterColon": true, "mode": "strict"}],
         "keyword-spacing": [2, {"before": true, "after": true, "overrides": {}}],
+        "line-comment-position": 0,
         "linebreak-style": 2,
         "lines-around-comment": [2, { "beforeBlockComment": true, "beforeLineComment": true, "allowBlockStart": true, "allowBlockEnd": true }],
         "max-lines": [1, {"max": 450, "skipBlankLines": true, "skipComments": false}],
         "max-nested-callbacks": [1, {"max":1}],
         "max-nested-callbacks": [2, {"max":2}],
         "max-statements-per-line": [2, {"max": 1}],
+        "multiline-ternary": [1, "never"],
         "new-cap": 2,
         "new-parens": 2,
         "newline-before-return": 0,
@@ -99,6 +103,8 @@
         "no-fallthrough": 2,
         "no-floating-decimal": 2,
         "no-func-assign": 2,
+        "no-global-assign": 2,
+        "no-implicit-coercion": 2,
         "no-implicit-globals": 0,
         "no-implied-eval": 2,
         "no-inner-declarations": 0,
@@ -131,12 +137,14 @@
         "no-redeclare": 2,
         "no-return-assign": [2, "always"],
         "no-script-url": 2,
-        "no-self-assign": 2,
+        "no-self-assign": [2, {"props": true}],
         "no-self-compare": 2,
         "no-sequences": 2,
         "no-shadow": [2, {"hoist": "functions"}],
         "no-shadow-restricted-names": 2,
         "no-spaced-func": 2,
+        "no-tabs": 0,
+        "no-template-curly-in-string": 2,
         "no-ternary": 0,
         "no-this-before-super": 2,
         "no-throw-literal": 2,
@@ -149,6 +157,7 @@
         "no-unneeded-ternary": [2, {"defaultAssignment": false}],
         "no-unreachable": 2,
         "no-unsafe-finally": 2,
+        "no-unsafe-negation": 2,
         "no-unused-expressions": 2,
         "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
         "no-use-before-define": [2, "nofunc"],
@@ -172,6 +181,7 @@
         "padded-blocks": [2, "never"],
         "prefer-arrow-callback": 2,
         "prefer-const": 2,
+        "prefer-numeric-literals": 2,
         "prefer-reflect": 2,
         "prefer-rest-params": 2,
         "prefer-spread": 2,
@@ -184,6 +194,7 @@
         "react/jsx-closing-bracket-location": [2, { "location": "tag-aligned" }],
         "react/jsx-curly-spacing": [2, "never"],
         "react/jsx-equals-spacing": [2, "never"],
+        "react/jsx-filename-extension": 2,
         "react/jsx-first-prop-new-line": [2, "multiline"],
         "react/jsx-handler-names": 0,
         "react/jsx-indent": [2, 4],
@@ -196,11 +207,10 @@
         "react/jsx-no-target-blank": 2,
         "react/jsx-no-undef": 2,
         "react/jsx-pascal-case": 2,
-        "react/jsx-filename-extension": 2,
         "react/jsx-space-before-closing": [2, "never"],
         "react/jsx-uses-react": 2,
         "react/jsx-uses-vars": 2,
-        "react/no-comment-textnodes": 2,
+        "react/jsx-no-comment-textnodes": 2,
         "react/no-danger": 0,
         "react/no-deprecated": 2,
         "react/no-did-mount-set-state": 2,
@@ -219,19 +229,28 @@
         "react/require-render-return": 2,
         "react/self-closing-comp": 2,
         "react/sort-comp": 0,
-        "react/wrap-multilines": 2,
+        "react/jsx-wrap-multilines": 2,
+        "react/no-find-dom-node": 1,
+        "react/forbid-component-props": 0,
+        "react/no-danger-with-children": 2,
+        "react/no-unused-prop-types": [1, {"skipShapeProps": true}],
+        "react/style-prop-object": 2,
+        "react/no-children-prop": 2,
+        "react/no-unescaped-entities": 2,
         "require-yield": 2,
         "rest-spread-spacing": [2, "never"],
         "semi": [2, "always"],
         "semi-spacing": [2, {"before": false, "after": true}],
         "sort-imports": 0,
+        "sort-keys": 0,
         "space-before-blocks": [2, "always"],
         "space-before-function-paren": [2, "never"],
         "space-in-parens": [2, "never"],
         "space-infix-ops": 2,
         "space-unary-ops": [2, { "words": true, "nonwords": false }],
+        "symbol-description": 2,
         "template-curly-spacing": [2, "never"],
-        "valid-typeof": 2,
+        "valid-typeof": [2, {"requireStringLiterals": false}],
         "vars-on-top": 0,
         "wrap-iife": [2, "outside"],
         "wrap-regex": 2,

webapp/actions/global_actions.jsx

@@ -253,7 +253,7 @@ export function loadMorePostsTop(id, isFocusPost) {
 export function emitLoadMorePostsFocusedBottomEvent() {
     const id = PostStore.getFocusedPostId();
     const latestPostId = PostStore.getLatestPost(id).id;
-    AsyncClient.getPostsAfter(latestPostId, 0, Constants.POST_CHUNK_SIZE, !!id);
+    AsyncClient.getPostsAfter(latestPostId, 0, Constants.POST_CHUNK_SIZE, Boolean(id));
 }
 
 export function emitUserPostedEvent(post) {

webapp/client/client.jsx

@@ -749,7 +749,7 @@ export default class Client {
     updateActive(userId, active, success, error) {
         var data = {};
         data.user_id = userId;
-        data.active = '' + active;
+        data.active = String(active);
 
         request.
             post(`${this.getUsersRoute()}/update_active`).
@@ -1336,7 +1336,7 @@ export default class Client {
             set(this.defaultHeaders).
             type('application/json').
             accept('application/json').
-            send({channelId, command, suggest: '' + suggest}).
+            send({channelId, command, suggest: String(suggest)}).
             end(this.handleResponse.bind(this, 'executeCommand', success, error));
 
         this.track('api', 'api_integrations_used');

webapp/components/activity_log_modal.jsx

@@ -90,7 +90,7 @@ export default class ActivityLogModal extends React.Component {
         this.setState({moreInfo: newMoreInfo});
     }
     render() {
-        let activityList = [];
+        const activityList = [];
 
         for (let i = 0; i < this.state.sessions.length; i++) {
             const currentSession = this.state.sessions[i];

webapp/components/admin_console/admin_navbar_dropdown.jsx

@@ -77,7 +77,7 @@ export default class AdminNavbarDropdown extends React.Component {
                 <li
                     key='teamDiv'
                     className='divider'
-                ></li>
+                />
             );
         }
 
@@ -118,7 +118,7 @@ export default class AdminNavbarDropdown extends React.Component {
                         <li
                             key='teamDiv'
                             className='divider'
-                        ></li>
+                        />
                         <li>
                             <a
                                 href='#'

webapp/components/admin_console/admin_sidebar.jsx

@@ -124,7 +124,7 @@ export default class AdminSidebar extends React.Component {
                     >
                         <i
                             className='fa fa-plus'
-                        ></i>
+                        />
                     </a>
                 </OverlayTrigger>
             </span>

webapp/components/admin_console/audits.jsx

@@ -86,7 +86,7 @@ export default class Audits extends React.Component {
                             className='btn btn-link pull-right'
                             onClick={this.reload}
                         >
-                            <i className='fa fa-refresh'></i>
+                            <i className='fa fa-refresh'/>
                             <FormattedMessage
                                 id='admin.audits.reload'
                                 defaultMessage='Reload User Activity Logs'

webapp/components/admin_console/cluster_settings.jsx

@@ -82,7 +82,7 @@ export default class ClusterSettings extends AdminSettings {
                     style={{marginBottom: '10px'}}
                     className='alert alert-warning'
                 >
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedHTMLMessage
                         id='admin.cluster.loadedFrom'
                         defaultMessage='This configuration file was loaded from Node ID {clusterId}. Please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> if you are accessing the System Console through a load balancer and experiencing issues.'
@@ -101,7 +101,7 @@ export default class ClusterSettings extends AdminSettings {
                     style={{marginBottom: '10px'}}
                     className='alert alert-warning'
                 >
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedMessage
                         id='admin.cluster.should_not_change'
                         defaultMessage='WARNING: These settings may not sync with the other servers in the cluster. High Availability inter-node communication will not start until you modify the config.json to be identical on all servers and restart Mattermost. Please see the <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> on how to add or remove a server from the cluster. If you are accessing the System Console through a load balancer and experiencing issues, please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a>.'

webapp/components/admin_console/cluster_table.jsx

@@ -121,7 +121,7 @@ export default class ClusterTable extends React.Component {
                         className='btn btn-link'
                         onClick={this.props.reload}
                     >
-                        <i className='fa fa-refresh'></i>
+                        <i className='fa fa-refresh'/>
                         <FormattedMessage
                             id='admin.cluster.status_table.reload'
                             defaultMessage=' Reload Cluster Status'

webapp/components/admin_console/compliance_reports.jsx

@@ -201,7 +201,7 @@ export default class ComplianceReports extends React.Component {
                     <table className='table'>
                         <thead>
                             <tr>
-                                <th></th>
+                                <th/>
                                 <th>
                                     <FormattedMessage
                                         id='admin.compliance_table.timestamp'
@@ -373,7 +373,7 @@ export default class ComplianceReports extends React.Component {
                         className='btn btn-link'
                         onClick={this.reload}
                     >
-                        <i className='fa fa-refresh'></i>
+                        <i className='fa fa-refresh'/>
                         <FormattedMessage
                             id='admin.compliance_reports.reload'
                             defaultMessage='Reload Completed Compliance Reports'

webapp/components/admin_console/email_connection_test.jsx

@@ -64,7 +64,7 @@ export default class EmailConnectionTestButton extends React.Component {
         if (this.state.success) {
             testMessage = (
                 <div className='alert alert-success'>
-                    <i className='fa fa-check'></i>
+                    <i className='fa fa-check'/>
                     <FormattedMessage
                         id='admin.email.emailSuccess'
                         defaultMessage='No errors were reported while sending an email.  Please check your inbox to make sure.'
@@ -74,7 +74,7 @@ export default class EmailConnectionTestButton extends React.Component {
         } else if (this.state.fail) {
             testMessage = (
                 <div className='alert alert-warning'>
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedMessage
                         id='admin.email.emailFail'
                         defaultMessage='Connection unsuccessful: {error}'

webapp/components/admin_console/ldap_test_button.jsx

@@ -96,7 +96,7 @@ export default class LdapTestButton extends React.Component {
             );
         }
 
-        let helpText = (
+        const helpText = (
             <FormattedHTMLMessage
                 id='admin.ldap.testHelpText'
                 defaultMessage='Tests if the Mattermost server can connect to the AD/LDAP server specified. See log file for more detailed error messages.'

webapp/components/admin_console/recycle_db.jsx

@@ -45,14 +45,14 @@ export default class RecycleDbButton extends React.Component {
 
     render() {
         if (global.window.mm_license.IsLicensed !== 'true') {
-            return <div></div>;
+            return <div/>;
         }
 
         let testMessage = null;
         if (this.state.fail) {
             testMessage = (
                 <div className='alert alert-warning'>
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedMessage
                         id='admin.recycle.reloadFail'
                         defaultMessage='Recycling unsuccessful: {error}'
@@ -64,7 +64,7 @@ export default class RecycleDbButton extends React.Component {
             );
         }
 
-        let helpText = (
+        const helpText = (
             <FormattedHTMLMessage
                 id='admin.recycle.recycleDescription'
                 defaultMessage='Deployments using multiple databases can switch from one master database to another without restarting the Mattermost server by updating "config.json" to the new desired configuration and using the <a href="../general/configuration"><b>Configuration > Reload Configuration from Disk</b></a> feature to load the new settings while the server is running. The administrator should then use <b>Recycle Database Connections</b> feature to recycle the database connections based on the new settings.'

webapp/components/admin_console/reload_config.jsx

@@ -48,14 +48,14 @@ export default class ReloadConfigButton extends React.Component {
 
     render() {
         if (global.window.mm_license.IsLicensed !== 'true') {
-            return <div></div>;
+            return <div/>;
         }
 
         let testMessage = null;
         if (this.state.fail) {
             testMessage = (
                 <div className='alert alert-warning'>
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedMessage
                         id='admin.reload.reloadFail'
                         defaultMessage='Reload unsuccessful: {error}'
@@ -67,7 +67,7 @@ export default class ReloadConfigButton extends React.Component {
             );
         }
 
-        let helpText = (
+        const helpText = (
             <FormattedHTMLMessage
                 id='admin.reload.reloadDescription'
                 defaultMessage='Deployments using multiple databases can switch from one master database to another without restarting the Mattermost server by updating "config.json" to the new desired configuration and using the <b>Reload Configuration from Disk</b> feature to load the new settings while the server is running. The administrator should then use the <a href="../advanced/database"><b>Database > Recycle Database Connections</b></a> feature to recycle the database connections based on the new settings.'

webapp/components/admin_console/sync_now_button.jsx

@@ -53,7 +53,7 @@ export default class SyncNowButton extends React.Component {
         if (this.state.fail) {
             failMessage = (
                 <div className='alert alert-warning'>
-                    <i className='fa fa-warning'></i>
+                    <i className='fa fa-warning'/>
                     <FormattedMessage
                         id='admin.ldap.syncFailure'
                         defaultMessage='Sync Failure: {error}'
@@ -65,7 +65,7 @@ export default class SyncNowButton extends React.Component {
             );
         }
 
-        let helpText = (
+        const helpText = (
             <FormattedHTMLMessage
                 id='admin.ldap.syncNowHelpText'
                 defaultMessage='Initiates an AD/LDAP synchronization immediately.'

webapp/components/admin_console/user_item.jsx

@@ -562,7 +562,7 @@ export default class UserItem extends React.Component {
                             aria-expanded='true'
                         >
                             <span>{currentRoles} </span>
-                            <span className='caret'></span>
+                            <span className='caret'/>
                         </a>
                         <ul
                             className='dropdown-menu member-menu'

webapp/components/audit_table.jsx

@@ -237,7 +237,7 @@ class AuditTable extends React.Component {
                 sContent = <td className='word-break--all'>{auditInfo.sessionId}</td>;
             }
 
-            let descStyle = {};
+            const descStyle = {};
             if (auditInfo.desc.toLowerCase().indexOf('fail') !== -1) {
                 descStyle.color = 'red';
             }

webapp/components/backstage/components/backstage_header.jsx

@@ -20,7 +20,7 @@ export default class BackstageHeader extends React.Component {
                         key={'divider' + index}
                         className='backstage-header__divider'
                     >
-                        <i className='fa fa-angle-right'></i>
+                        <i className='fa fa-angle-right'/>
                     </span>
                 );
             }

webapp/components/backstage/components/backstage_list.jsx

@@ -89,7 +89,7 @@ export default class BackstageList extends React.Component {
                 </div>
                 <div className='backstage-filters'>
                     <div className='backstage-filter__search'>
-                        <i className='fa fa-search'></i>
+                        <i className='fa fa-search'/>
                         <input
                             type='search'
                             className='form-control'

webapp/components/channel_header.jsx

@@ -113,7 +113,7 @@ export default class ChannelHeader extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
-        return !!nextProps.channelId;
+        return Boolean(nextProps.channelId);
     }
 
     onListenerChange() {

webapp/components/channel_switch_modal.jsx

@@ -99,7 +99,7 @@ export default class SwitchChannelModal extends React.Component {
     }
 
     render() {
-        let message = this.state.error;
+        const message = this.state.error;
         return (
             <Modal
                 className='modal-browse-channel'