fix lint problems

public/app/core/components/Login/LoginBackground.tsx

@@ -4,14 +4,10 @@ const xCount = 50;
 const yCount = 50;
 
 function Cell({ x, y, flipIndex }) {
-  const index = y * xCount + x;
+  const index = (y * xCount) + x;
   const bgColor1 = getColor(x, y);
   return (
-    <div
+    <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
-      className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`}
-      key={index}
-      style={{ background: bgColor1 }}
-    />
   );
 }
 
@@ -35,7 +31,7 @@ export default class LoginBackground extends Component<any, any> {
   }
 
   flipElements() {
-    const elementIndexToFlip = getRandomInt(0, xCount * yCount - 1);
+    const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
     this.setState(prevState => {
       return {
         ...prevState,
@@ -61,7 +57,9 @@ export default class LoginBackground extends Component<any, any> {
           return (
             <div className="login-bg__row">
               {Array.from(Array(xCount)).map((el2, x) => {
-                return <Cell y={y} x={x} flipIndex={this.state.flipIndex} />;
+                return (
+                  <Cell y={y} x={x} flipIndex={this.state.flipIndex} />
+                );
               })}
             </div>
           );

public/app/core/components/PasswordStrength.tsx

@@ -5,27 +5,28 @@ export interface IProps {
 }
 
 export class PasswordStrength extends React.Component<IProps, any> {
+
   constructor(props) {
     super(props);
   }
 
   render() {
     const { password } = this.props;
-    let strengthText = 'strength: strong like a bull.';
+    let strengthText = "strength: strong like a bull.";
-    let strengthClass = 'password-strength-good';
+    let strengthClass = "password-strength-good";
 
     if (!password) {
       return null;
     }
 
     if (password.length <= 8) {
-      strengthText = 'strength: you can do better.';
+      strengthText = "strength: you can do better.";
-      strengthClass = 'password-strength-ok';
+      strengthClass = "password-strength-ok";
     }
 
     if (password.length < 4) {
-      strengthText = 'strength: weak sauce.';
+      strengthText = "strength: weak sauce.";
-      strengthClass = 'password-strength-bad';
+      strengthClass = "password-strength-bad";
     }
 
     return (
@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
     );
   }
 }
+
+

public/app/core/components/colorpicker/ColorPalette.tsx

@@ -29,8 +29,7 @@ export class ColorPalette extends React.Component<IProps, any> {
           key={paletteColor}
           className={'pointer fa ' + cssClass}
           style={{ color: paletteColor }}
-          onClick={this.onColorSelect(paletteColor)}
+          onClick={this.onColorSelect(paletteColor)}>
-        >
           &nbsp;
         </i>
       );
@@ -42,3 +41,4 @@ export class ColorPalette extends React.Component<IProps, any> {
     );
   }
 }
+

public/app/core/components/colorpicker/ColorPickerPopover.tsx

@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     this.state = {
       tab: 'palette',
       color: this.props.color || DEFAULT_COLOR,
-      colorString: this.props.color || DEFAULT_COLOR,
+      colorString: this.props.color || DEFAULT_COLOR
     };
   }
 
@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     if (newColor.isValid()) {
       this.setState({
         color: newColor.toString(),
-        colorString: newColor.toString(),
+        colorString: newColor.toString()
       });
       this.props.onColorSelect(color);
     }
@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
   onColorStringChange(e) {
     let colorString = e.target.value;
     this.setState({
-      colorString: colorString,
+      colorString: colorString
     });
 
     let newColor = tinycolor(colorString);
@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
 
   componentDidMount() {
     this.pickerNavElem.find('li:first').addClass('active');
-    this.pickerNavElem.on('show', e => {
+    this.pickerNavElem.on('show', (e) => {
       // use href attr (#name => name)
       let tab = e.target.hash.slice(1);
       this.setState({
-        tab: tab,
+        tab: tab
       });
     });
   }
@@ -97,24 +97,19 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
       <div className="gf-color-picker">
         <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#palette" data-toggle="tab">
+            <a href="#palette" data-toggle="tab">Colors</a>
-              Colors
-            </a>
           </li>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#spectrum" data-toggle="tab">
+            <a href="#spectrum" data-toggle="tab">Custom</a>
-              Custom
-            </a>
           </li>
         </ul>
-        <div className="gf-color-picker__body">{currentTab}</div>
+        <div className="gf-color-picker__body">
+          {currentTab}
+        </div>
         <div>
-          <input
+          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
-            className="gf-form-input gf-form-input--small"
+            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
-            value={this.state.colorString}
+          </input>
-            onChange={this.onColorStringChange.bind(this)}
-            onBlur={this.onColorStringBlur.bind(this)}
-          />
         </div>
       </div>
     );

public/app/core/components/colorpicker/SpectrumPicker.tsx

@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> {
   }
 
   componentDidMount() {
-    let spectrumOptions = _.assignIn(
+    let spectrumOptions = _.assignIn({
-      {
       flat: true,
       showAlpha: true,
       showButtons: false,
       color: this.props.color,
       appendTo: this.elem,
       move: this.onSpectrumMove,
-      },
+    }, this.props.options);
-      this.props.options
-    );
 
     this.elem.spectrum(spectrumOptions);
     this.elem.spectrum('show');
@@ -67,6 +64,9 @@ export class SpectrumPicker extends React.Component<IProps, any> {
   }
 
   render() {
-    return <div className="spectrum-container" ref={this.setComponentElem} />;
+    return (
+      <div className="spectrum-container" ref={this.setComponentElem}></div>
+    );
   }
 }
+

public/app/core/components/search/SearchResult.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import { observer } from 'mobx-react';
+import { observer } from "mobx-react";
-import { store } from 'app/stores/store';
+import { store } from "app/stores/store";
 
 export interface SearchResultProps {
   search: any;
@@ -13,7 +13,7 @@ export class SearchResult extends React.Component<SearchResultProps, any> {
     super(props);
 
     this.state = {
-      search: store.search,
+      search: store.search
     };
 
     store.search.query();
@@ -56,20 +56,29 @@ export class SearchResultSection extends React.Component<SectionProps, any> {
   render() {
     let collapseClassNames = classNames({
       fa: true,
-      'fa-plus': !this.props.section.expanded,
+      "fa-plus": !this.props.section.expanded,
-      'fa-minus': this.props.section.expanded,
+      "fa-minus": this.props.section.expanded,
-      'search-section__header__toggle': true,
+      "search-section__header__toggle": true
     });
 
     return (
       <div className="search-section" key={this.props.section.id}>
         <div className="search-section__header">
-          <i className={classNames('search-section__header__icon', this.props.section.icon)} />
+          <i
-          <span className="search-section__header__text">{this.props.section.title}</span>
+            className={classNames(
+              "search-section__header__icon",
+              this.props.section.icon
+            )}
+          />
+          <span className="search-section__header__text">
+            {this.props.section.title}
+          </span>
           <i className={collapseClassNames} onClick={this.toggleSection} />
         </div>
         {this.props.section.expanded && (
-          <div className="search-section__items">{this.props.section.items.map(this.renderItem)}</div>
+          <div className="search-section__items">
+            {this.props.section.items.map(this.renderItem)}
+          </div>
         )}
       </div>
     );

public/app/core/specs/PasswordStrength.jest.tsx

@@ -4,18 +4,21 @@ import { shallow } from 'enzyme';
 import {PasswordStrength} from '../components/PasswordStrength';
 
 describe('PasswordStrength', () => {
+
   it('should have class bad if length below 4', () => {
     const wrapper = shallow(<PasswordStrength password="asd" />);
-    expect(wrapper.find('.password-strength-bad')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-bad")).toHaveLength(1);
   });
 
   it('should have class ok if length below 8', () => {
     const wrapper = shallow(<PasswordStrength password="asdasd" />);
-    expect(wrapper.find('.password-strength-ok')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-ok")).toHaveLength(1);
   });
 
   it('should have class good if length above 8', () => {
     const wrapper = shallow(<PasswordStrength password="asdaasdda" />);
-    expect(wrapper.find('.password-strength-good')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-good")).toHaveLength(1);
   });
+
 });
+

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -46,6 +46,9 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
       return <AddPanelPanel panel={this.props.panel} getPanelContainer={this.props.getPanelContainer} />;
     }
 
-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+    return (
+      <div ref={element => this.element = element} className="panel-height-helper" />
+    );
   }
 }
+