Frontend lint update (#3253)

* client: Add lint command

Signed-off-by: koooge <koooooge@gmail.com>

* client: Override eslint rule object-curly-newline to keep current style

Signed-off-by: koooge <koooooge@gmail.com>

* client: Override eslint rule no-else-return to keep current style

Signed-off-by: koooge <koooooge@gmail.com>

* client: Fix eslint import/named

Signed-off-by: koooge <koooooge@gmail.com>

* client: eslint-5

Signed-off-by: koooge <koooooge@gmail.com>

* codeclimate: Delete the old setting

Signed-off-by: koooge <koooooge@gmail.com>

* client: Downgrade eslint 5 to 4 in codeclimate

Signed-off-by: koooge <koooooge@gmail.com>

* client: npx install-peerdeps --dev eslint-config-airbnb

Signed-off-by: koooge <koooooge@gmail.com>

* client: Enbale .jsx lint

Signed-off-by: koooge <koooooge@gmail.com>

* client: Set warn

Signed-off-by: koooge <koooooge@gmail.com>

* client: Fix lint indent, implicit-arrow-linebreak, lines-between-class-members

Signed-off-by: koooge <koooooge@gmail.com>

* client: Disable eslint operator-linebreak

Signed-off-by: koooge <koooooge@gmail.com>

* Revert "client: Downgrade eslint 5 to 4 in codeclimate"

This reverts commit f0fb0f0.

* client: Fix react/button-has-type

Signed-off-by: koooge <koooooge@gmail.com>

* client: Disable an eslint rule react/jsx-one-expression-per-line

Signed-off-by: koooge <koooooge@gmail.com>

* codeclimate: Disable no-multiple-empty-lines

Signed-off-by: koooge <koooooge@gmail.com>

* client: Disable eslint react/destructuring-assignment

Signed-off-by: koooge <koooooge@gmail.com>

.codeclimate.yml

@@ -3,20 +3,20 @@ engines:
     enabled: true
   eslint:
     enabled: true
-    channel: "eslint-3"
+    channel: "eslint-5"
     config:
       config: client/.eslintrc.js
     checks:
       import/no-unresolved:
         enabled: false
+      no-multiple-empty-lines: # TODO: Enable
+        enabled: false
 ratings:
   paths:
   - "redash/**/*.py"
   - "client/**/*.js"
 exclude_paths:
 - tests/**/*.py
 - migrations/**/*.py
-- old_migrations/**/*.py
 - setup/**/*
 - bin/**/*
-

client/.eslintrc.js

@@ -26,15 +26,22 @@ module.exports = {
     "no-lonely-if": "off",
     "consistent-return": "off",
     "no-control-regex": "off",
+    'no-multiple-empty-lines': 'warn',
     "no-script-url": "off", // some <a> tags should have href="javascript:void(0)"
+    'operator-linebreak': 'off',
+    'react/destructuring-assignment': 'off',
     "react/jsx-filename-extension": "off",
+    'react/jsx-one-expression-per-line': 'off',
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
+    'react/jsx-wrap-multilines': 'warn',
+    'react/no-access-state-in-setstate': 'warn',
     "react/prefer-stateless-function": "warn",
     "react/forbid-prop-types": "warn",
     "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
     "jsx-a11y/click-events-have-key-events": "off",
+    'jsx-a11y/label-has-associated-control': 'warn',
     "jsx-a11y/label-has-for": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "max-len": ['error', 120, 2, {
@@ -43,6 +50,8 @@ module.exports = {
       ignoreRegExpLiterals: true,
       ignoreStrings: true,
       ignoreTemplateLiterals: true,
-    }]
+    }],
+    "no-else-return": ["error", {"allowElseIf": true}],
+    "object-curly-newline": ["error", {"consistent": true}]
   }
 };

client/app/components/EditInPlace.jsx

@@ -18,6 +18,7 @@ export class EditInPlace extends React.Component {
     placeholder: '',
     value: '',
   };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -67,14 +68,13 @@ export class EditInPlace extends React.Component {
     </span>
   );
 
-  renderEdit = () =>
-    React.createElement(this.props.editor, {
-      ref: this.inputRef,
-      className: 'rd-form-control',
-      defaultValue: this.props.value,
-      onBlur: this.stopEditing,
-      onKeyDown: this.keyDown,
-    });
+  renderEdit = () => React.createElement(this.props.editor, {
+    ref: this.inputRef,
+    className: 'rd-form-control',
+    defaultValue: this.props.value,
+    onBlur: this.stopEditing,
+    onKeyDown: this.keyDown,
+  });
 
   render() {
     return (

client/app/components/ParameterMappingInput.jsx

@@ -260,8 +260,8 @@ export class ParameterMappingListInput extends React.Component {
       <div>
         {this.props.mappings.map((mapping, index) => {
           const existingParamsNames = this.props.existingParams
-              .filter(({ type }) => type === mapping.param.type) // exclude mismatching param types
-              .map(({ name }) => name); // keep names only
+            .filter(({ type }) => type === mapping.param.type) // exclude mismatching param types
+            .map(({ name }) => name); // keep names only
 
           return (
             <div key={mapping.name} className={(index === 0 ? '' : ' m-t-15')}>

client/app/components/QueryEditor.jsx

@@ -285,7 +285,7 @@ class QueryEditor extends React.Component {
               </select>
               {this.props.canEdit ? (
                 <Tooltip placement="top" title={modKey + ' + S'}>
-                  <button className="btn btn-default m-l-5" onClick={this.props.saveQuery} title="Save">
+                  <button type="button" className="btn btn-default m-l-5" onClick={this.props.saveQuery} title="Save">
                     <span className="fa fa-floppy-o" />
                     <span className="hidden-xs m-l-5">Save</span>
                     {this.props.isDirty ? '*' : null}

client/app/components/app-view/index.js

@@ -84,10 +84,9 @@ class AppViewComponent {
 export default function init(ngModule) {
   ngModule.factory(
     '$exceptionHandler',
-    () =>
-      function exceptionHandler(exception) {
-        handler.process(exception);
-      },
+    () => function exceptionHandler(exception) {
+      handler.process(exception);
+    },
   );
 
   ngModule.component('appView', {

client/app/components/queries/ScheduleDialog.jsx

@@ -197,7 +197,7 @@ export class ScheduleDialog extends React.Component {
                     <Option value={secs} key={cnt}>{durationHumanize(secs)}</Option>
                   ))}
                 </OptGroup>
-                ))}
+              ))}
             </Select>
           </div>
         </div>

client/app/components/tags-list/tags-list.js

@@ -11,6 +11,7 @@ class TagsList {
       this.allTags = tags;
     });
   }
+
   toggleTag($event, tag) {
     if ($event.shiftKey) {
       // toggle tag

client/app/filters/datetime.js

@@ -3,20 +3,19 @@ import moment from 'moment';
 export default function init(ngModule) {
   ngModule.filter('toMilliseconds', () => value => value * 1000.0);
 
-  ngModule.filter('dateTime', clientConfig =>
-    function dateTime(value) {
-      if (!value) {
-        return '';
-      }
+  ngModule.filter('dateTime', clientConfig => function dateTime(value) {
+    if (!value) {
+      return '';
+    }
 
-      const parsed = moment(value);
+    const parsed = moment(value);
 
-      if (!parsed.isValid()) {
-        return '-';
-      }
+    if (!parsed.isValid()) {
+      return '-';
+    }
 
-      return parsed.format(clientConfig.dateTimeFormat);
-    });
+    return parsed.format(clientConfig.dateTimeFormat);
+  });
 }
 
 init.init = true;

client/app/filters/markdown.js

@@ -1,19 +1,18 @@
 import { markdown } from 'markdown';
 
 export default function init(ngModule) {
-  ngModule.filter('markdown', ($sce, clientConfig) =>
-    function parseMarkdown(text) {
-      if (!text) {
-        return '';
-      }
+  ngModule.filter('markdown', ($sce, clientConfig) => function parseMarkdown(text) {
+    if (!text) {
+      return '';
+    }
 
-      let html = markdown.toHTML(String(text));
-      if (clientConfig.allowScriptsInUserInput) {
-        html = $sce.trustAsHtml(html);
-      }
+    let html = markdown.toHTML(String(text));
+    if (clientConfig.allowScriptsInUserInput) {
+      html = $sce.trustAsHtml(html);
+    }
 
-      return html;
-    });
+    return html;
+  });
 }
 
 init.init = true;

client/app/pages/data-sources/show.js

@@ -3,12 +3,12 @@ import debug from 'debug';
 import template from './show.html';
 
 const logger = debug('redash:http');
-const deleteConfirm = { class: 'btn-warning', title: 'Delete' };
-function logAndToastrError(deleteObject, httpResponse, toastr) {
+export const deleteConfirm = { class: 'btn-warning', title: 'Delete' };
+export function logAndToastrError(deleteObject, httpResponse, toastr) {
   logger('Failed to delete ' + deleteObject + ': ', httpResponse.status, httpResponse.statusText, httpResponse.data);
   toastr.error('Failed to delete ' + deleteObject + '.');
 }
-function toastrSuccessAndPath(deleteObject, deletePath, toastr, $location) {
+export function toastrSuccessAndPath(deleteObject, deletePath, toastr, $location) {
   toastr.success(deleteObject + ' deleted successfully.');
   $location.path('/' + deletePath + '/');
 }

client/app/pages/queries/view.js

@@ -454,11 +454,10 @@ function QueryViewCtrl(
   const allowedIntervals = policy.getQueryRefreshIntervals();
   $scope.refreshOptions = isArray(allowedIntervals) ? intersection(intervals, allowedIntervals) : intervals;
 
-  $scope.updateQueryMetadata = changes =>
-    $scope.$apply(() => {
-      $scope.query = Object.assign($scope.query, changes);
-      $scope.saveQuery();
-    });
+  $scope.updateQueryMetadata = changes => $scope.$apply(() => {
+    $scope.query = Object.assign($scope.query, changes);
+    $scope.saveQuery();
+  });
   $scope.showScheduleForm = false;
   $scope.openScheduleForm = () => {
     if (!$scope.canEdit || !$scope.canScheduleQuery) {

client/app/pages/settings/organization.js

@@ -26,8 +26,8 @@ function OrganizationSettingsCtrl($http, toastr, clientConfig, Events) {
   this.dateFormatList = clientConfig.dateFormatList;
   this.googleLoginEnabled = clientConfig.googleLoginEnabled;
 
-  this.disablePasswordLoginToggle = () =>
-    (clientConfig.googleLoginEnabled || this.settings.auth_saml_enabled) === false;
+  // eslint-disable-next-line max-len
+  this.disablePasswordLoginToggle = () => (clientConfig.googleLoginEnabled || this.settings.auth_saml_enabled) === false;
 }
 
 export default function init(ngModule) {

client/app/services/query-result.js

@@ -237,25 +237,24 @@ function QueryResultService($resource, $timeout, $q, QueryResultError) {
             }
           });
 
-          this.filteredData = this.query_result.data.rows.filter(row =>
-            filters.reduce((memo, filter) => {
-              if (!isArray(filter.current)) {
-                filter.current = [filter.current];
-              }
+          this.filteredData = this.query_result.data.rows.filter(row => filters.reduce((memo, filter) => {
+            if (!isArray(filter.current)) {
+              filter.current = [filter.current];
+            }
 
-              return (
-                memo &&
-                some(filter.current, (v) => {
-                  const value = row[filter.name];
-                  if (moment.isMoment(value)) {
-                    return value.isSame(v);
-                  }
-                  // We compare with either the value or the String representation of the value,
-                  // because Select2 casts true/false to "true"/"false".
-                  return v === value || String(value) === v;
-                })
-              );
-            }, true));
+            return (
+              memo &&
+              some(filter.current, (v) => {
+                const value = row[filter.name];
+                if (moment.isMoment(value)) {
+                  return value.isSame(v);
+                }
+                // We compare with either the value or the String representation of the value,
+                // because Select2 casts true/false to "true"/"false".
+                return v === value || String(value) === v;
+              })
+            );
+          }, true));
         } else {
           this.filteredData = this.query_result.data.rows;
         }

client/app/services/query.js

@@ -145,6 +145,7 @@ class Parameter {
   get ngModel() {
     return this.normalizedValue;
   }
+
   set ngModel(value) {
     this.setValue(value);
   }

client/app/visualizations/chart/index.js

@@ -231,8 +231,7 @@ function ChartEditor(ColorPalette, clientConfig) {
 
       scope.form = {
         yAxisColumns: [],
-        seriesList: sortBy(keys(scope.options.seriesOptions), name =>
-          scope.options.seriesOptions[name].zIndex),
+        seriesList: sortBy(keys(scope.options.seriesOptions), name => scope.options.seriesOptions[name].zIndex),
         valuesList: keys(scope.options.valuesOptions),
       };
 

client/app/visualizations/sankey/index.js

@@ -120,10 +120,7 @@ function createSankey(element, data) {
   const color = d3.scale.category20();
 
   data = graph(data);
-  data.nodes = _.map(data.nodes, d =>
-    _.extend(d, {
-      color: color(d.name.replace(/ .*/, '')),
-    }));
+  data.nodes = _.map(data.nodes, d => _.extend(d, { color: color(d.name.replace(/ .*/, '')) }));
 
   // append the svg canvas to the page
   const svg = d3