format code using prettier (#1774)

16 files changed, 401 insertions, 397 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/bucket.js b/server/sonar-web/src/main/js/apps/code/bucket.js
index 6b1a972b4ce..7b235e0f14b 100644
--- a/server/sonar-web/src/main/js/apps/code/bucket.js
+++ b/server/sonar-web/src/main/js/apps/code/bucket.js
@@ -21,31 +21,31 @@ let bucket = {};
 let childrenBucket = {};
 let breadcrumbsBucket = {};
 
-export function addComponent (component) {
+export function addComponent(component) {
   bucket[component.key] = component;
 }
 
-export function getComponent (componentKey) {
+export function getComponent(componentKey) {
   return bucket[componentKey];
 }
 
-export function addComponentChildren (componentKey, children, total, page) {
+export function addComponentChildren(componentKey, children, total, page) {
   childrenBucket[componentKey] = { children, total, page };
 }
 
-export function getComponentChildren (componentKey) {
+export function getComponentChildren(componentKey) {
   return childrenBucket[componentKey];
 }
 
-export function addComponentBreadcrumbs (componentKey, breadcrumbs) {
+export function addComponentBreadcrumbs(componentKey, breadcrumbs) {
   breadcrumbsBucket[componentKey] = breadcrumbs;
 }
 
-export function getComponentBreadcrumbs (componentKey) {
+export function getComponentBreadcrumbs(componentKey) {
   return breadcrumbsBucket[componentKey];
 }
 
-export function clearBucket () {
+export function clearBucket() {
   bucket = {};
   childrenBucket = {};
   breadcrumbsBucket = {};
diff --git a/server/sonar-web/src/main/js/apps/code/components/App.js b/server/sonar-web/src/main/js/apps/code/components/App.js
index 8e75483c1da..a8a8fd02a51 100644
--- a/server/sonar-web/src/main/js/apps/code/components/App.js
+++ b/server/sonar-web/src/main/js/apps/code/components/App.js
@@ -25,7 +25,12 @@ import Breadcrumbs from './Breadcrumbs';
 import SourceViewer from './../../../components/SourceViewer/SourceViewer';
 import Search from './Search';
 import ListFooter from '../../../components/controls/ListFooter';
-import { retrieveComponentChildren, retrieveComponent, loadMoreChildren, parseError } from '../utils';
+import {
+  retrieveComponentChildren,
+  retrieveComponent,
+  loadMoreChildren,
+  parseError
+} from '../utils';
 import { addComponent, addComponentBreadcrumbs, clearBucket } from '../bucket';
 import { getComponent } from '../../../store/rootReducer';
 import '../code.css';
@@ -42,12 +47,12 @@ class App extends React.Component {
     error: null
   };
 
-  componentDidMount () {
+  componentDidMount() {
     this.mounted = true;
     this.handleComponentChange();
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.component !== this.props.component) {
       this.handleComponentChange();
     } else if (prevProps.location !== this.props.location) {
@@ -55,12 +60,12 @@ class App extends React.Component {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     clearBucket();
     this.mounted = false;
   }
 
-  handleComponentChange () {
+  handleComponentChange() {
     const { component } = this.props;
 
     // we already know component's breadcrumbs,
@@ -68,52 +73,57 @@ class App extends React.Component {
 
     this.setState({ loading: true });
     const isView = component.qualifier === 'VW' || component.qualifier === 'SVW';
-    retrieveComponentChildren(component.key, isView).then(r => {
-      addComponent(r.baseComponent);
-      this.handleUpdate();
-    }).catch(e => {
-      if (this.mounted) {
-        this.setState({ loading: false });
-        parseError(e).then(this.handleError.bind(this));
-      }
-    });
+    retrieveComponentChildren(component.key, isView)
+      .then(r => {
+        addComponent(r.baseComponent);
+        this.handleUpdate();
+      })
+      .catch(e => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+          parseError(e).then(this.handleError.bind(this));
+        }
+      });
   }
 
-  loadComponent (componentKey) {
+  loadComponent(componentKey) {
     this.setState({ loading: true });
 
-    const isView = this.props.component.qualifier === 'VW' || this.props.component.qualifier === 'SVW';
-    retrieveComponent(componentKey, isView).then(r => {
-      if (this.mounted) {
-        if (['FIL', 'UTS'].includes(r.component.qualifier)) {
-          this.setState({
-            loading: false,
-            sourceViewer: r.component,
-            breadcrumbs: r.breadcrumbs,
-            searchResults: null
-          });
-        } else {
-          this.setState({
-            loading: false,
-            baseComponent: r.component,
-            components: r.components,
-            breadcrumbs: r.breadcrumbs,
-            total: r.total,
-            page: r.page,
-            sourceViewer: null,
-            searchResults: null
-          });
+    const isView = this.props.component.qualifier === 'VW' ||
+      this.props.component.qualifier === 'SVW';
+    retrieveComponent(componentKey, isView)
+      .then(r => {
+        if (this.mounted) {
+          if (['FIL', 'UTS'].includes(r.component.qualifier)) {
+            this.setState({
+              loading: false,
+              sourceViewer: r.component,
+              breadcrumbs: r.breadcrumbs,
+              searchResults: null
+            });
+          } else {
+            this.setState({
+              loading: false,
+              baseComponent: r.component,
+              components: r.components,
+              breadcrumbs: r.breadcrumbs,
+              total: r.total,
+              page: r.page,
+              sourceViewer: null,
+              searchResults: null
+            });
+          }
         }
-      }
-    }).catch(e => {
-      if (this.mounted) {
-        this.setState({ loading: false });
-        parseError(e).then(this.handleError.bind(this));
-      }
-    });
+      })
+      .catch(e => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+          parseError(e).then(this.handleError.bind(this));
+        }
+      });
   }
 
-  handleUpdate () {
+  handleUpdate() {
     const { component, location } = this.props;
     const { selected } = location.query;
     const finalKey = selected || component.key;
@@ -121,41 +131,44 @@ class App extends React.Component {
     this.loadComponent(finalKey);
   }
 
-  handleLoadMore () {
+  handleLoadMore() {
     const { baseComponent, page } = this.state;
-    const isView = this.props.component.qualifier === 'VW' || this.props.component.qualifier === 'SVW';
-    loadMoreChildren(baseComponent.key, page + 1, isView).then(r => {
-      if (this.mounted) {
-        this.setState({
-          components: [...this.state.components, ...r.components],
-          page: r.page,
-          total: r.total
-        });
-      }
-    }).catch(e => {
-      if (this.mounted) {
-        this.setState({ loading: false });
-        parseError(e).then(this.handleError.bind(this));
-      }
-    });
+    const isView = this.props.component.qualifier === 'VW' ||
+      this.props.component.qualifier === 'SVW';
+    loadMoreChildren(baseComponent.key, page + 1, isView)
+      .then(r => {
+        if (this.mounted) {
+          this.setState({
+            components: [...this.state.components, ...r.components],
+            page: r.page,
+            total: r.total
+          });
+        }
+      })
+      .catch(e => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+          parseError(e).then(this.handleError.bind(this));
+        }
+      });
   }
 
-  handleError (error) {
+  handleError(error) {
     if (this.mounted) {
       this.setState({ error });
     }
   }
 
-  render () {
+  render() {
     const { component, location } = this.props;
     const {
-        loading,
-        error,
-        baseComponent,
-        components,
-        breadcrumbs,
-        total,
-        sourceViewer
+      loading,
+      error,
+      baseComponent,
+      components,
+      breadcrumbs,
+      total,
+      sourceViewer
     } = this.state;
 
     const shouldShowSourceViewer = !!sourceViewer;
@@ -165,49 +178,40 @@ class App extends React.Component {
     const componentsClassName = classNames('spacer-top', { 'new-loading': loading });
 
     return (
-        <div className="page page-limited">
-          {error && (
-              <div className="alert alert-danger">
-                {error}
-              </div>
-          )}
-
-          <Search
-              location={location}
-              component={component}
-              onError={this.handleError.bind(this)}/>
-
-
-          <div className="code-components">
-            {shouldShowBreadcrumbs && (
-                <Breadcrumbs
-                    rootComponent={component}
-                    breadcrumbs={breadcrumbs}/>
-            )}
-
-            {shouldShowComponents && (
-                <div className={componentsClassName}>
-                  <Components
-                      rootComponent={component}
-                      baseComponent={baseComponent}
-                      components={components}/>
-                </div>
-            )}
-
-            {shouldShowComponents && (
-                <ListFooter
-                    count={components.length}
-                    total={total}
-                    loadMore={this.handleLoadMore.bind(this)}/>
-            )}
-
-            {shouldShowSourceViewer && (
-                <div className="spacer-top">
-                  <SourceViewer component={sourceViewer.key}/>
-                </div>
-            )}
-          </div>
+      <div className="page page-limited">
+        {error &&
+          <div className="alert alert-danger">
+            {error}
+          </div>}
+
+        <Search location={location} component={component} onError={this.handleError.bind(this)} />
+
+        <div className="code-components">
+          {shouldShowBreadcrumbs &&
+            <Breadcrumbs rootComponent={component} breadcrumbs={breadcrumbs} />}
+
+          {shouldShowComponents &&
+            <div className={componentsClassName}>
+              <Components
+                rootComponent={component}
+                baseComponent={baseComponent}
+                components={components}
+              />
+            </div>}
+
+          {shouldShowComponents &&
+            <ListFooter
+              count={components.length}
+              total={total}
+              loadMore={this.handleLoadMore.bind(this)}
+            />}
+
+          {shouldShowSourceViewer &&
+            <div className="spacer-top">
+              <SourceViewer component={sourceViewer.key} />
+            </div>}
         </div>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/Breadcrumb.js b/server/sonar-web/src/main/js/apps/code/components/Breadcrumb.js
index c2c49928649..99dc00ab670 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Breadcrumb.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Breadcrumb.js
@@ -21,10 +21,7 @@ import React from 'react';
 import ComponentName from './ComponentName';
 
 const Breadcrumb = ({ rootComponent, component, canBrowse }) => (
-    <ComponentName
-        rootComponent={rootComponent}
-        component={component}
-        canBrowse={canBrowse}/>
+  <ComponentName rootComponent={rootComponent} component={component} canBrowse={canBrowse} />
 );
 
 export default Breadcrumb;
diff --git a/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.js b/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.js
index d42d47f6a57..fe9116f7cfc 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.js
@@ -21,16 +21,17 @@ import React from 'react';
 import Breadcrumb from './Breadcrumb';
 
 const Breadcrumbs = ({ rootComponent, breadcrumbs }) => (
-    <ul className="code-breadcrumbs">
-      {breadcrumbs.map((component, index) => (
-          <li key={component.key}>
-            <Breadcrumb
-                rootComponent={rootComponent}
-                component={component}
-                canBrowse={index < breadcrumbs.length - 1}/>
-          </li>
-      ))}
-    </ul>
+  <ul className="code-breadcrumbs">
+    {breadcrumbs.map((component, index) => (
+      <li key={component.key}>
+        <Breadcrumb
+          rootComponent={rootComponent}
+          component={component}
+          canBrowse={index < breadcrumbs.length - 1}
+        />
+      </li>
+    ))}
+  </ul>
 );
 
 export default Breadcrumbs;
diff --git a/server/sonar-web/src/main/js/apps/code/components/Component.js b/server/sonar-web/src/main/js/apps/code/components/Component.js
index d2deccf4376..9166c570e7a 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Component.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Component.js
@@ -30,30 +30,33 @@ const TOP_OFFSET = 200;
 const BOTTOM_OFFSET = 10;
 
 export default class Component extends React.Component {
-  componentDidMount () {
+  componentDidMount() {
     this.handleUpdate();
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     this.handleUpdate();
   }
 
-  handleUpdate () {
+  handleUpdate() {
     const { selected } = this.props;
 
     // scroll viewport so the current selected component is visible
     if (selected) {
-      setTimeout(() => {
-        this.handleScroll();
-      }, 0);
+      setTimeout(
+        () => {
+          this.handleScroll();
+        },
+        0
+      );
     }
   }
 
-  handleScroll () {
+  handleScroll() {
     const node = ReactDOM.findDOMNode(this);
     const position = node.getBoundingClientRect();
     const { top, bottom } = position;
@@ -64,7 +67,7 @@ export default class Component extends React.Component {
     }
   }
 
-  render () {
+  render() {
     const { component, rootComponent, selected, previous, canBrowse } = this.props;
     const isView = ['VW', 'SVW'].includes(rootComponent.qualifier);
 
@@ -74,54 +77,58 @@ export default class Component extends React.Component {
       switch (component.qualifier) {
         case 'FIL':
         case 'UTS':
-          componentAction = <ComponentPin component={component}/>;
+          componentAction = <ComponentPin component={component} />;
           break;
         default:
-          componentAction = <ComponentDetach component={component}/>;
+          componentAction = <ComponentDetach component={component} />;
       }
     }
 
-    const columns = isView ? [
-      { metric: 'releasability_rating', type: 'RATING' },
-      { metric: 'reliability_rating', type: 'RATING' },
-      { metric: 'security_rating', type: 'RATING' },
-      { metric: 'sqale_rating', type: 'RATING' },
-      { metric: 'ncloc', type: 'SHORT_INT' }
-    ] : [
-      { metric: 'ncloc', type: 'SHORT_INT' },
-      { metric: 'bugs', type: 'SHORT_INT' },
-      { metric: 'vulnerabilities', type: 'SHORT_INT' },
-      { metric: 'code_smells', type: 'SHORT_INT' },
-      { metric: 'coverage', type: 'PERCENT' },
-      { metric: 'duplicated_lines_density', type: 'PERCENT' }
-    ];
+    const columns = isView
+      ? [
+          { metric: 'releasability_rating', type: 'RATING' },
+          { metric: 'reliability_rating', type: 'RATING' },
+          { metric: 'security_rating', type: 'RATING' },
+          { metric: 'sqale_rating', type: 'RATING' },
+          { metric: 'ncloc', type: 'SHORT_INT' }
+        ]
+      : [
+          { metric: 'ncloc', type: 'SHORT_INT' },
+          { metric: 'bugs', type: 'SHORT_INT' },
+          { metric: 'vulnerabilities', type: 'SHORT_INT' },
+          { metric: 'code_smells', type: 'SHORT_INT' },
+          { metric: 'coverage', type: 'PERCENT' },
+          { metric: 'duplicated_lines_density', type: 'PERCENT' }
+        ];
 
     return (
-        <tr className={classNames({ selected })}>
-          <td className="thin nowrap">
-            <span className="spacer-right">
-              {componentAction}
-            </span>
-          </td>
-          <td className="code-name-cell">
-            <ComponentName
+      <tr className={classNames({ selected })}>
+        <td className="thin nowrap">
+          <span className="spacer-right">
+            {componentAction}
+          </span>
+        </td>
+        <td className="code-name-cell">
+          <ComponentName
+            component={component}
+            rootComponent={rootComponent}
+            previous={previous}
+            canBrowse={canBrowse}
+          />
+        </td>
+
+        {columns.map(column => (
+          <td key={column.metric} className="thin nowrap text-right">
+            <div className="code-components-cell">
+              <ComponentMeasure
                 component={component}
-                rootComponent={rootComponent}
-                previous={previous}
-                canBrowse={canBrowse}/>
+                metricKey={column.metric}
+                metricType={column.type}
+              />
+            </div>
           </td>
-
-          {columns.map(column => (
-              <td key={column.metric} className="thin nowrap text-right">
-                <div className="code-components-cell">
-                  <ComponentMeasure
-                      component={component}
-                      metricKey={column.metric}
-                      metricType={column.type}/>
-                </div>
-              </td>
-          ))}
-        </tr>
+        ))}
+      </tr>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentDetach.js b/server/sonar-web/src/main/js/apps/code/components/ComponentDetach.js
index da85d25d9be..69e1aafd253 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentDetach.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentDetach.js
@@ -22,9 +22,11 @@ import { Link } from 'react-router';
 import { translate } from '../../../helpers/l10n';
 
 const ComponentDetach = ({ component }) => (
-    <Link to={{ pathname: '/dashboard', query: { id: component.refKey || component.key } }}
-          className="icon-detach"
-          title={translate('code.open_component_page')}/>
+  <Link
+    to={{ pathname: '/dashboard', query: { id: component.refKey || component.key } }}
+    className="icon-detach"
+    title={translate('code.open_component_page')}
+  />
 );
 
 export default ComponentDetach;
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.js b/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.js
index 58928392896..bfb5a4b8e40 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.js
@@ -24,19 +24,17 @@ const ComponentMeasure = ({ component, metricKey, metricType }) => {
   const isProject = component.qualifier === 'TRK';
   const isReleasability = metricKey === 'releasability_rating';
 
-  const finalMetricKey = (isProject && isReleasability) ? 'alert_status' : metricKey;
-  const finalMetricType = (isProject && isReleasability) ? 'LEVEL' : metricType;
+  const finalMetricKey = isProject && isReleasability ? 'alert_status' : metricKey;
+  const finalMetricType = isProject && isReleasability ? 'LEVEL' : metricType;
 
   const measure = Array.isArray(component.measures) &&
-      component.measures.find(measure => measure.metric === finalMetricKey);
+    component.measures.find(measure => measure.metric === finalMetricKey);
 
   if (!measure) {
-    return <span/>;
+    return <span />;
   }
 
-  return (
-      <Measure measure={measure} metric={{ key: finalMetricKey, type: finalMetricType }}/>
-  );
+  return <Measure measure={measure} metric={{ key: finalMetricKey, type: finalMetricType }} />;
 };
 
 export default ComponentMeasure;
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentName.js b/server/sonar-web/src/main/js/apps/code/components/ComponentName.js
index 74ee0565e0f..d3c7efa4578 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentName.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentName.js
@@ -22,7 +22,7 @@ import { Link } from 'react-router';
 import Truncated from './Truncated';
 import QualifierIcon from '../../../components/shared/qualifier-icon';
 
-function getTooltip (component) {
+function getTooltip(component) {
   const isFile = component.qualifier === 'FIL' || component.qualifier === 'UTS';
   if (isFile && component.path) {
     return component.path + '\n\n' + component.key;
@@ -31,7 +31,7 @@ function getTooltip (component) {
   }
 }
 
-function mostCommitPrefix (strings) {
+function mostCommitPrefix(strings) {
   const sortedStrings = strings.slice(0).sort();
   const firstString = sortedStrings[0];
   const firstStringLength = firstString.length;
@@ -49,22 +49,25 @@ function mostCommitPrefix (strings) {
 const ComponentName = ({ component, rootComponent, previous, canBrowse }) => {
   const areBothDirs = component.qualifier === 'DIR' && previous && previous.qualifier === 'DIR';
   const prefix = areBothDirs ? mostCommitPrefix([component.name + '/', previous.name + '/']) : '';
-  const name = prefix ? (
-      <span>
+  const name = prefix
+    ? <span>
         <span style={{ color: '#777' }}>{prefix}</span>
         <span>{component.name.substr(prefix.length)}</span>
       </span>
-  ) : component.name;
+    : component.name;
 
   let inner = null;
 
   if (component.refKey && component.qualifier !== 'SVW') {
     inner = (
-        <Link to={{ pathname: '/dashboard', query: { id: component.refKey } }} className="link-with-icon">
-          <QualifierIcon qualifier={component.qualifier}/>
-          {' '}
-          <span>{name}</span>
-        </Link>
+      <Link
+        to={{ pathname: '/dashboard', query: { id: component.refKey } }}
+        className="link-with-icon"
+      >
+        <QualifierIcon qualifier={component.qualifier} />
+        {' '}
+        <span>{name}</span>
+      </Link>
     );
   } else if (canBrowse) {
     const query = { id: rootComponent.key };
@@ -72,26 +75,26 @@ const ComponentName = ({ component, rootComponent, previous, canBrowse }) => {
       Object.assign(query, { selected: component.key });
     }
     inner = (
-        <Link to={{ pathname: '/code', query }} className="link-with-icon">
-          <QualifierIcon qualifier={component.qualifier}/>
-          {' '}
-          <span>{name}</span>
-        </Link>
+      <Link to={{ pathname: '/code', query }} className="link-with-icon">
+        <QualifierIcon qualifier={component.qualifier} />
+        {' '}
+        <span>{name}</span>
+      </Link>
     );
   } else {
     inner = (
-        <span>
-          <QualifierIcon qualifier={component.qualifier}/>
-          {' '}
-          {name}
-        </span>
+      <span>
+        <QualifierIcon qualifier={component.qualifier} />
+        {' '}
+        {name}
+      </span>
     );
   }
 
   return (
-      <Truncated title={getTooltip(component)}>
-        {inner}
-      </Truncated>
+    <Truncated title={getTooltip(component)}>
+      {inner}
+    </Truncated>
   );
 };
 
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentPin.js b/server/sonar-web/src/main/js/apps/code/components/ComponentPin.js
index 20670ac9bcb..5ab8c75959a 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentPin.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentPin.js
@@ -29,13 +29,14 @@ const ComponentPin = ({ component }) => {
   };
 
   return (
-      <a
-          className="link-no-underline"
-          onClick={handleClick}
-          title={translate('component_viewer.open_in_workspace')}
-          href="#">
-        <PinIcon/>
-      </a>
+    <a
+      className="link-no-underline"
+      onClick={handleClick}
+      title={translate('component_viewer.open_in_workspace')}
+      href="#"
+    >
+      <PinIcon />
+    </a>
   );
 };
 
diff --git a/server/sonar-web/src/main/js/apps/code/components/Components.js b/server/sonar-web/src/main/js/apps/code/components/Components.js
index c106cd180da..62d653d3543 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Components.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Components.js
@@ -23,35 +23,34 @@ import ComponentsEmpty from './ComponentsEmpty';
 import ComponentsHeader from './ComponentsHeader';
 
 const Components = ({ rootComponent, baseComponent, components, selected }) => (
-    <table className="data zebra">
-      <ComponentsHeader baseComponent={baseComponent} rootComponent={rootComponent}/>
-      {baseComponent && (
-          <tbody>
-            <Component
-                key={baseComponent.key}
-                rootComponent={rootComponent}
-                component={baseComponent}/>
-            <tr className="blank">
-              <td colSpan="8">&nbsp;</td>
-            </tr>
-          </tbody>
-      )}
+  <table className="data zebra">
+    <ComponentsHeader baseComponent={baseComponent} rootComponent={rootComponent} />
+    {baseComponent &&
       <tbody>
-        {components.length ? (
-            components.map((component, index, list) => (
-                <Component
-                    key={component.key}
-                    rootComponent={rootComponent}
-                    component={component}
-                    selected={component === selected}
-                    previous={index > 0 ? list[index - 1] : null}
-                    canBrowse={true}/>
-            ))
-        ) : (
-            <ComponentsEmpty/>
-        )}
-      </tbody>
-    </table>
+        <Component
+          key={baseComponent.key}
+          rootComponent={rootComponent}
+          component={baseComponent}
+        />
+        <tr className="blank">
+          <td colSpan="8">&nbsp;</td>
+        </tr>
+      </tbody>}
+    <tbody>
+      {components.length
+        ? components.map((component, index, list) => (
+            <Component
+              key={component.key}
+              rootComponent={rootComponent}
+              component={component}
+              selected={component === selected}
+              previous={index > 0 ? list[index - 1] : null}
+              canBrowse={true}
+            />
+          ))
+        : <ComponentsEmpty />}
+    </tbody>
+  </table>
 );
 
 export default Components;
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.js b/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.js
index e254cd99d60..ea40873c8db 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.js
@@ -21,14 +21,12 @@ import React from 'react';
 import { translate } from '../../../helpers/l10n';
 
 const ComponentsEmpty = () => (
-    <tr>
-      <td colSpan="2">
-        {translate('no_results')}
-      </td>
-      <td colSpan="6">
-        &nbsp;
-      </td>
-    </tr>
+  <tr>
+    <td colSpan="2">
+      {translate('no_results')}
+    </td>
+    <td colSpan="6" />
+  </tr>
 );
 
 export default ComponentsEmpty;
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
index 92290dda6a6..ec63a912732 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
@@ -23,33 +23,35 @@ import { translate } from '../../../helpers/l10n';
 const ComponentsHeader = ({ baseComponent, rootComponent }) => {
   const isView = rootComponent.qualifier === 'VW' || rootComponent.qualifier === 'SVW';
 
-  const columns = isView ? [
-    translate('metric_domain.Releasability'),
-    translate('metric_domain.Reliability'),
-    translate('metric_domain.Security'),
-    translate('metric_domain.Maintainability'),
-    translate('metric', 'ncloc', 'name')
-  ] : [
-    translate('metric', 'ncloc', 'name'),
-    translate('metric', 'bugs', 'name'),
-    translate('metric', 'vulnerabilities', 'name'),
-    translate('metric', 'code_smells', 'name'),
-    translate('metric', 'coverage', 'name'),
-    translate('metric', 'duplicated_lines_density', 'short_name')
-  ];
+  const columns = isView
+    ? [
+        translate('metric_domain.Releasability'),
+        translate('metric_domain.Reliability'),
+        translate('metric_domain.Security'),
+        translate('metric_domain.Maintainability'),
+        translate('metric', 'ncloc', 'name')
+      ]
+    : [
+        translate('metric', 'ncloc', 'name'),
+        translate('metric', 'bugs', 'name'),
+        translate('metric', 'vulnerabilities', 'name'),
+        translate('metric', 'code_smells', 'name'),
+        translate('metric', 'coverage', 'name'),
+        translate('metric', 'duplicated_lines_density', 'short_name')
+      ];
 
   return (
-      <thead>
-        <tr className="code-components-header">
-          <th className="thin nowrap">&nbsp;</th>
-          <th>&nbsp;</th>
-          {columns.map(column => (
-              <th key={column} className="thin nowrap text-right code-components-cell">
-                {baseComponent && column}
-              </th>
-          ))}
-        </tr>
-      </thead>
+    <thead>
+      <tr className="code-components-header">
+        <th className="thin nowrap">&nbsp;</th>
+        <th>&nbsp;</th>
+        {columns.map(column => (
+          <th key={column} className="thin nowrap text-right code-components-cell">
+            {baseComponent && column}
+          </th>
+        ))}
+      </tr>
+    </thead>
   );
 };
 
diff --git a/server/sonar-web/src/main/js/apps/code/components/Search.js b/server/sonar-web/src/main/js/apps/code/components/Search.js
index 818e28083dc..93315434b45 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Search.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Search.js
@@ -45,16 +45,16 @@ export default class Search extends React.Component {
     selectedIndex: null
   };
 
-  componentWillMount () {
+  componentWillMount() {
     this.handleSearch = debounce(this.handleSearch.bind(this), 250);
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.mounted = true;
     this.refs.input.focus();
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     // if the url has change, reset the current state
     if (nextProps.location !== this.props.location) {
       this.setState({
@@ -66,33 +66,33 @@ export default class Search extends React.Component {
     }
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.mounted = false;
   }
 
-  checkInputValue (query) {
+  checkInputValue(query) {
     return this.refs.input.value === query;
   }
 
-  handleSelectNext () {
+  handleSelectNext() {
     const { selectedIndex, results } = this.state;
     if (results != null && selectedIndex != null && selectedIndex < results.length - 1) {
       this.setState({ selectedIndex: selectedIndex + 1 });
     }
   }
 
-  handleSelectPrevious () {
+  handleSelectPrevious() {
     const { selectedIndex, results } = this.state;
     if (results != null && selectedIndex != null && selectedIndex > 0) {
       this.setState({ selectedIndex: selectedIndex - 1 });
     }
   }
 
-  handleSelectCurrent () {
+  handleSelectCurrent() {
     const { component } = this.props;
     const { results, selectedIndex } = this.state;
     if (results != null && selectedIndex != null) {
@@ -112,7 +112,7 @@ export default class Search extends React.Component {
     }
   }
 
-  handleKeyDown (e) {
+  handleKeyDown(e) {
     switch (e.keyCode) {
       case 13:
         e.preventDefault();
@@ -130,7 +130,7 @@ export default class Search extends React.Component {
     }
   }
 
-  handleSearch (query) {
+  handleSearch(query) {
     // first time check if value has changed due to debounce
     if (this.mounted && this.checkInputValue(query)) {
       const { component, onError } = this.props;
@@ -140,27 +140,27 @@ export default class Search extends React.Component {
       const qualifiers = isView ? 'SVW,TRK' : 'BRC,UTS,FIL';
 
       getTree(component.key, { q: query, s: 'qualifier,name', qualifiers })
-          .then(r => {
-            // second time check if value has change due to api request
-            if (this.mounted && this.checkInputValue(query)) {
-              this.setState({
-                results: r.components,
-                selectedIndex: r.components.length > 0 ? 0 : null,
-                loading: false
-              });
-            }
-          })
-          .catch(e => {
-            // second time check if value has change due to api request
-            if (this.mounted && this.checkInputValue(query)) {
-              this.setState({ loading: false });
-              parseError(e).then(onError);
-            }
-          });
+        .then(r => {
+          // second time check if value has change due to api request
+          if (this.mounted && this.checkInputValue(query)) {
+            this.setState({
+              results: r.components,
+              selectedIndex: r.components.length > 0 ? 0 : null,
+              loading: false
+            });
+          }
+        })
+        .catch(e => {
+          // second time check if value has change due to api request
+          if (this.mounted && this.checkInputValue(query)) {
+            this.setState({ loading: false });
+            parseError(e).then(onError);
+          }
+        });
     }
   }
 
-  handleQueryChange (query) {
+  handleQueryChange(query) {
     this.setState({ query });
     if (query.length < 3) {
       this.setState({ results: null });
@@ -169,18 +169,18 @@ export default class Search extends React.Component {
     }
   }
 
-  handleInputChange (e) {
+  handleInputChange(e) {
     const query = e.target.value;
     this.handleQueryChange(query);
   }
 
-  handleSubmit (e) {
+  handleSubmit(e) {
     e.preventDefault();
     const query = this.refs.input.value;
     this.handleQueryChange(query);
   }
 
-  render () {
+  render() {
     const { component } = this.props;
     const { query, loading, selectedIndex, results } = this.state;
     const selected = selectedIndex != null && results != null ? results[selectedIndex] : null;
@@ -188,44 +188,39 @@ export default class Search extends React.Component {
       'code-search-with-results': results != null
     });
     const inputClassName = classNames('search-box-input', {
-      'touched': query.length > 0 && query.length < 3
+      touched: query.length > 0 && query.length < 3
     });
 
     return (
-        <div id="code-search" className={containerClassName}>
-          <form className="search-box" onSubmit={this.handleSubmit.bind(this)}>
-            <button className="search-box-submit button-clean">
-              <i className="icon-search"/>
-            </button>
-
-            <input
-                ref="input"
-                onKeyDown={this.handleKeyDown.bind(this)}
-                onChange={this.handleInputChange.bind(this)}
-                value={query}
-                className={inputClassName}
-                type="search"
-                name="q"
-                placeholder={translate('search_verb')}
-                maxLength="100"
-                autoComplete="off"/>
-
-            {loading && (
-                <i className="spinner spacer-left"/>
-            )}
-
-            <span className="note spacer-left">
-              {translateWithParameters('select2.tooShort', 3)}
-            </span>
-          </form>
-
-          {results != null && (
-              <Components
-                  rootComponent={component}
-                  components={results}
-                  selected={selected}/>
-          )}
-        </div>
+      <div id="code-search" className={containerClassName}>
+        <form className="search-box" onSubmit={this.handleSubmit.bind(this)}>
+          <button className="search-box-submit button-clean">
+            <i className="icon-search" />
+          </button>
+
+          <input
+            ref="input"
+            onKeyDown={this.handleKeyDown.bind(this)}
+            onChange={this.handleInputChange.bind(this)}
+            value={query}
+            className={inputClassName}
+            type="search"
+            name="q"
+            placeholder={translate('search_verb')}
+            maxLength="100"
+            autoComplete="off"
+          />
+
+          {loading && <i className="spinner spacer-left" />}
+
+          <span className="note spacer-left">
+            {translateWithParameters('select2.tooShort', 3)}
+          </span>
+        </form>
+
+        {results != null &&
+          <Components rootComponent={component} components={results} selected={selected} />}
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/Truncated.js b/server/sonar-web/src/main/js/apps/code/components/Truncated.js
index ce0c488ffa8..82c6cd14fdd 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Truncated.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Truncated.js
@@ -20,11 +20,9 @@
 import React from 'react';
 
 const Truncated = ({ children, title }) => (
-    <span
-        className="code-truncated"
-        title={title}>
-      {children}
-    </span>
+  <span className="code-truncated" title={title}>
+    {children}
+  </span>
 );
 
 export default Truncated;
diff --git a/server/sonar-web/src/main/js/apps/code/routes.js b/server/sonar-web/src/main/js/apps/code/routes.js
index e7f4a836853..07bb9e8a918 100644
--- a/server/sonar-web/src/main/js/apps/code/routes.js
+++ b/server/sonar-web/src/main/js/apps/code/routes.js
@@ -21,6 +21,4 @@ import React from 'react';
 import { IndexRoute } from 'react-router';
 import App from './components/App';
 
-export default (
-    <IndexRoute component={App}/>
-);
+export default <IndexRoute component={App} />;
diff --git a/server/sonar-web/src/main/js/apps/code/utils.js b/server/sonar-web/src/main/js/apps/code/utils.js
index c6999204de8..c5451d4a89e 100644
--- a/server/sonar-web/src/main/js/apps/code/utils.js
+++ b/server/sonar-web/src/main/js/apps/code/utils.js
@@ -50,7 +50,7 @@ const VIEW_METRICS = [
 
 const PAGE_SIZE = 100;
 
-function requestChildren (componentKey, metrics, page) {
+function requestChildren(componentKey, metrics, page) {
   return getChildren(componentKey, metrics, { p: page, ps: PAGE_SIZE }).then(r => {
     if (r.paging.total > r.paging.pageSize * r.paging.pageIndex) {
       return requestChildren(componentKey, metrics, page + 1).then(moreComponents => {
@@ -61,13 +61,15 @@ function requestChildren (componentKey, metrics, page) {
   });
 }
 
-function requestAllChildren (componentKey, metrics) {
+function requestAllChildren(componentKey, metrics) {
   return requestChildren(componentKey, metrics, 1);
 }
 
-function expandRootDir (metrics) {
-  return function ({ components, total, ...other }) {
-    const rootDir = components.find(component => component.qualifier === 'DIR' && component.name === '/');
+function expandRootDir(metrics) {
+  return function({ components, total, ...other }) {
+    const rootDir = components.find(
+      component => component.qualifier === 'DIR' && component.name === '/'
+    );
     if (rootDir) {
       return requestAllChildren(rootDir.key, metrics).then(rootDirComponents => {
         const nextComponents = without([...rootDirComponents, ...components], rootDir);
@@ -80,7 +82,7 @@ function expandRootDir (metrics) {
   };
 }
 
-function prepareChildren (r) {
+function prepareChildren(r) {
   return {
     components: r.components,
     total: r.paging.total,
@@ -89,17 +91,17 @@ function prepareChildren (r) {
   };
 }
 
-function skipRootDir (breadcrumbs) {
+function skipRootDir(breadcrumbs) {
   return breadcrumbs.filter(component => {
     return !(component.qualifier === 'DIR' && component.name === '/');
   });
 }
 
-function storeChildrenBase (children) {
+function storeChildrenBase(children) {
   children.forEach(addComponent);
 }
 
-function storeChildrenBreadcrumbs (parentComponentKey, children) {
+function storeChildrenBreadcrumbs(parentComponentKey, children) {
   const parentBreadcrumbs = getComponentBreadcrumbs(parentComponentKey);
   if (parentBreadcrumbs) {
     children.forEach(child => {
@@ -109,7 +111,7 @@ function storeChildrenBreadcrumbs (parentComponentKey, children) {
   }
 }
 
-function getMetrics (isView) {
+function getMetrics(isView) {
   return isView ? VIEW_METRICS : METRICS;
 }
 
@@ -118,7 +120,7 @@ function getMetrics (isView) {
  * @param {boolean} isView
  * @returns {Promise}
  */
-function retrieveComponentBase (componentKey, isView) {
+function retrieveComponentBase(componentKey, isView) {
   const existing = getComponentFromBucket(componentKey);
   if (existing) {
     return Promise.resolve(existing);
@@ -137,7 +139,7 @@ function retrieveComponentBase (componentKey, isView) {
  * @param {boolean} isView
  * @returns {Promise}
  */
-export function retrieveComponentChildren (componentKey, isView) {
+export function retrieveComponentChildren(componentKey, isView) {
   const existing = getComponentChildren(componentKey);
   if (existing) {
     return Promise.resolve({
@@ -150,28 +152,26 @@ export function retrieveComponentChildren (componentKey, isView) {
   const metrics = getMetrics(isView);
 
   return getChildren(componentKey, metrics, { ps: PAGE_SIZE, s: 'qualifier,name' })
-      .then(prepareChildren)
-      .then(expandRootDir(metrics))
-      .then(r => {
-        addComponentChildren(componentKey, r.components, r.total, r.page);
-        storeChildrenBase(r.components);
-        storeChildrenBreadcrumbs(componentKey, r.components);
-        return r;
-      });
+    .then(prepareChildren)
+    .then(expandRootDir(metrics))
+    .then(r => {
+      addComponentChildren(componentKey, r.components, r.total, r.page);
+      storeChildrenBase(r.components);
+      storeChildrenBreadcrumbs(componentKey, r.components);
+      return r;
+    });
 }
 
-function retrieveComponentBreadcrumbs (componentKey) {
+function retrieveComponentBreadcrumbs(componentKey) {
   const existing = getComponentBreadcrumbs(componentKey);
   if (existing) {
     return Promise.resolve(existing);
   }
 
-  return getBreadcrumbs(componentKey)
-      .then(skipRootDir)
-      .then(breadcrumbs => {
-        addComponentBreadcrumbs(componentKey, breadcrumbs);
-        return breadcrumbs;
-      });
+  return getBreadcrumbs(componentKey).then(skipRootDir).then(breadcrumbs => {
+    addComponentBreadcrumbs(componentKey, breadcrumbs);
+    return breadcrumbs;
+  });
 }
 
 /**
@@ -179,7 +179,7 @@ function retrieveComponentBreadcrumbs (componentKey) {
  * @param {boolean} isView
  * @returns {Promise}
  */
-export function retrieveComponent (componentKey, isView) {
+export function retrieveComponent(componentKey, isView) {
   return Promise.all([
     retrieveComponentBase(componentKey, isView),
     retrieveComponentChildren(componentKey, isView),
@@ -195,18 +195,18 @@ export function retrieveComponent (componentKey, isView) {
   });
 }
 
-export function loadMoreChildren (componentKey, page, isView) {
+export function loadMoreChildren(componentKey, page, isView) {
   const metrics = getMetrics(isView);
 
   return getChildren(componentKey, metrics, { ps: PAGE_SIZE, p: page })
-      .then(prepareChildren)
-      .then(expandRootDir(metrics))
-      .then(r => {
-        addComponentChildren(componentKey, r.components, r.total, r.page);
-        storeChildrenBase(r.components);
-        storeChildrenBreadcrumbs(componentKey, r.components);
-        return r;
-      });
+    .then(prepareChildren)
+    .then(expandRootDir(metrics))
+    .then(r => {
+      addComponentChildren(componentKey, r.components, r.total, r.page);
+      storeChildrenBase(r.components);
+      storeChildrenBreadcrumbs(componentKey, r.components);
+      return r;
+    });
 }
 
 /**
@@ -214,13 +214,14 @@ export function loadMoreChildren (componentKey, page, isView) {
  * @param {Error} error
  * @returns {Promise}
  */
-export function parseError (error) {
+export function parseError(error) {
   const DEFAULT_MESSAGE = translate('default_error_message');
 
   try {
-    return error.response.json()
-        .then(r => r.errors.map(error => error.msg).join('. '))
-        .catch(() => DEFAULT_MESSAGE);
+    return error.response
+      .json()
+      .then(r => r.errors.map(error => error.msg).join('. '))
+      .catch(() => DEFAULT_MESSAGE);
   } catch (ex) {
     return Promise.resolve(DEFAULT_MESSAGE);
   }