re-format js code (#1877)

server/sonar-web/.eslintrc

@@ -33,7 +33,7 @@
     "block-scoped-var": 2,
     "block-spacing": 2,
     "brace-style": 2,
-    "comma-dangle": 2,
+    "comma-dangle": [2, "never"],
     "comma-spacing": 2,
     "comma-style": 2,
     "computed-property-spacing": 2,
@@ -49,7 +49,7 @@
     "jsx-quotes": 2,
     "key-spacing": 2,
     "keyword-spacing": 2,
-    "max-len": [2, 120],
+    "max-len": [2, 100],
     "new-parens": 2,
     "no-lonely-if": 2,
     "no-multi-spaces": 2,
@@ -135,6 +135,10 @@
     "jsx-a11y/tabindex-no-positive": 2,
 
     "react/jsx-boolean-value": [2, "always"],
+    "react/jsx-closing-bracket-location": [2, {
+      "nonEmpty": "after-props",
+      "selfClosing": "tag-aligned"
+    }],
     "react/jsx-curly-spacing": [2, "never"],
     "react/jsx-equals-spacing": [2, "never"],
     "react/jsx-key": 2,

server/sonar-web/package.json

@@ -89,7 +89,7 @@
     "less-loader": "2.2.3",
     "path-exists": "2.1.0",
     "postcss-loader": "0.8.0",
-    "prettier": "^0.22.0",
+    "prettier-eslint-cli": "^3.1.3",
     "react-addons-test-utils": "15.4.2",
     "react-dev-utils": "0.2.1",
     "react-transform-hmr": "1.0.4",
@@ -108,7 +108,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "coverage": "npm test -- --coverage",
-    "format": "prettier --write --list-different --print-width 100 --single-quote --parser flow \"src/main/js/!(libs)/**/*.js\"",
+    "format": "prettier-eslint --write \"src/main/js/!(libs)/**/*.js\"",
     "lint": "eslint src/main/js",
     "typecheck": "flow src/main/js",
     "validate": "eslint src/main/js && flow check src/main/js && NODE_ENV=test jest --runInBand"

server/sonar-web/src/main/js/app/components/GlobalFooter.js

@@ -36,8 +36,11 @@ class GlobalFooter extends React.Component {
               Embedded database should be used for evaluation purpose only
             </p>
             <p>
-              The embedded database will not scale, it will not support upgrading to newer versions of SonarQube,
-              and there is no support for migrating your data out of it into a different database engine.
+              The embedded database will not scale, it will not support upgrading to newer
+              {' '}
+              versions of SonarQube, and there is no support for migrating your data out of it
+              {' '}
+              into a different database engine.
             </p>
           </div>}
 

server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js

@@ -50,8 +50,7 @@ class ComponentNavBreadcrumbs extends React.Component {
             </span>}
           <Link
             to={{ pathname: '/dashboard', query: { id: item.key } }}
-            className="link-base-color"
-          >
+            className="link-base-color">
             {index === breadcrumbs.length - 1
               ? <strong>{item.name}</strong>
               : <span>{item.name}</span>}

server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.js

@@ -78,8 +78,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/code', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {this.isView() ? translate('view_projects.page') : translate('code.page')}
         </Link>
       </li>
@@ -95,8 +94,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/activity', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('project_activity.page')}
         </Link>
       </li>
@@ -108,8 +106,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/component_issues', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('issues.page')}
         </Link>
       </li>
@@ -121,8 +118,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/component_measures', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('layout.measures')}
         </Link>
       </li>
@@ -141,8 +137,7 @@ export default class ComponentNavMenu extends React.Component {
           className="dropdown-toggle navbar-admin-link"
           id="component-navigation-admin"
           data-toggle="dropdown"
-          href="#"
-        >
+          href="#">
           {translate('layout.settings')}&nbsp;
           <i className="icon-dropdown" />
         </a>
@@ -170,8 +165,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/settings', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('project_settings.page')}
         </Link>
       </li>
@@ -186,8 +180,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/quality_profiles', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('project_quality_profiles.page')}
         </Link>
       </li>
@@ -202,8 +195,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/quality_gate', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('project_quality_gate.page')}
         </Link>
       </li>
@@ -218,8 +210,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/custom_measures', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('custom_measures.page')}
         </Link>
       </li>
@@ -234,8 +225,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/links', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('project_links.page')}
         </Link>
       </li>
@@ -250,8 +240,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project_roles', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('permissions.page')}
         </Link>
       </li>
@@ -266,8 +255,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/background_tasks', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('background_tasks.page')}
         </Link>
       </li>
@@ -282,8 +270,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/key', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('update_key.page')}
         </Link>
       </li>
@@ -305,8 +292,7 @@ export default class ComponentNavMenu extends React.Component {
       <li>
         <Link
           to={{ pathname: '/project/deletion', query: { id: this.props.component.key } }}
-          activeClassName="active"
-        >
+          activeClassName="active">
           {translate('deletion.page')}
         </Link>
       </li>
@@ -342,8 +328,7 @@ export default class ComponentNavMenu extends React.Component {
           className="dropdown-toggle"
           id="component-navigation-more"
           data-toggle="dropdown"
-          href="#"
-        >
+          href="#">
           {translate('more')}&nbsp;
           <i className="icon-dropdown" />
         </a>

server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js

@@ -38,7 +38,8 @@ class GlobalNavUser extends React.Component {
     const shouldReturnToCurrentPage = window.location.pathname !== `${window.baseUrl}/about`;
     if (shouldReturnToCurrentPage) {
       const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
-      window.location = `${window.baseUrl}/sessions/new?return_to=${returnTo}${window.location.hash}`;
+      window.location = window.baseUrl +
+        `/sessions/new?return_to=${returnTo}${window.location.hash}`;
     } else {
       window.location = `${window.baseUrl}/sessions/new`;
     }

server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.js

@@ -87,8 +87,7 @@ class SettingsNav extends React.Component {
                   className="dropdown-toggle"
                   data-toggle="dropdown"
                   id="settings-navigation-configuration"
-                  href="#"
-                >
+                  href="#">
                   {translate('sidebar.project_settings')} <i className="icon-dropdown" />
                 </a>
                 <ul className="dropdown-menu">

server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js

@@ -56,8 +56,7 @@ export default class AboutAppForSonarQubeDotCom extends React.Component {
               <a
                 className="button button-active"
                 href="https://about.sonarqube.com/get-started/"
-                target="_blank"
-              >
+                target="_blank">
                 Get Started
               </a>
               {!this.props.currentUser.isLoggedIn &&

server/sonar-web/src/main/js/apps/about/components/AboutStandards.js

@@ -25,7 +25,8 @@ import { getRulesUrl } from '../../../helpers/urls';
 
 const link = 'https://redirect.sonarsource.com/doc/rules.html';
 
-const owaspTags = 'owasp-a1,owasp-a2,owasp-a3,owasp-a4,owasp-a5,owasp-a6,owasp-a7,owasp-a8,owasp-a9,owasp-a10';
+const owaspTags = 'owasp-a1,owasp-a2,owasp-a3,owasp-a4,owasp-a5,' +
+  'owasp-a6,owasp-a7,owasp-a8,owasp-a9,owasp-a10';
 
 export default class AboutStandards extends React.Component {
   render() {
@@ -66,8 +67,7 @@ export default class AboutStandards extends React.Component {
                   to={getRulesUrl({
                     tags: 'sans-top25-porous,sans-top25-risky,sans-top25-insecure'
                   })}
-                  className="link-with-icon"
-                >
+                  className="link-with-icon">
                   <i className="icon-tags" />
                   <span className="little-spacer-left">SANS Top 25</span>
                 </Link>

server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js

@@ -44,8 +44,7 @@ export default class EntryIssueTypes extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'BUG' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(bugs, 'SHORT_INT')}
                 </Link>
               </td>
@@ -58,8 +57,7 @@ export default class EntryIssueTypes extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'VULNERABILITY' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(vulnerabilities, 'SHORT_INT')}
                 </Link>
               </td>
@@ -72,8 +70,7 @@ export default class EntryIssueTypes extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'CODE_SMELL' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(codeSmells, 'SHORT_INT')}
                 </Link>
               </td>

server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js

@@ -44,8 +44,7 @@ export default class EntryIssueTypesForSonarQubeDotCom extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'BUG' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(bugs, 'SHORT_INT')}
                 </Link>
               </td>
@@ -58,8 +57,7 @@ export default class EntryIssueTypesForSonarQubeDotCom extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'VULNERABILITY' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(vulnerabilities, 'SHORT_INT')}
                 </Link>
               </td>
@@ -72,8 +70,7 @@ export default class EntryIssueTypesForSonarQubeDotCom extends React.Component {
               <td className="about-page-issue-type-number">
                 <Link
                   to={getIssuesUrl({ resolved: false, types: 'CODE_SMELL' })}
-                  className="about-page-issue-type-link"
-                >
+                  className="about-page-issue-type-link">
                   {formatMeasure(codeSmells, 'SHORT_INT')}
                 </Link>
               </td>

server/sonar-web/src/main/js/apps/account/notifications/Projects.js

@@ -49,7 +49,8 @@ class Projects extends React.Component {
   };
 
   componentWillReceiveProps(nextProps: Props) {
-    // remove all projects from `this.state.addedProjects` that already exist in `nextProps.projects`
+    // remove all projects from `this.state.addedProjects`
+    // that already exist in `nextProps.projects`
     const nextAddedProjects = differenceBy(
       this.state.addedProjects,
       nextProps.projects,

server/sonar-web/src/main/js/apps/account/organizations/CreateOrganizationForm.js

@@ -122,8 +122,7 @@ class CreateOrganizationForm extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('my_account.create_organization')}</h2>
         </header>

server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.js

@@ -78,8 +78,7 @@ export default class UserExternalIdentity extends React.Component {
     return (
       <div
         className="identity-provider"
-        style={{ backgroundColor: identityProvider.backgroundColor }}
-      >
+        style={{ backgroundColor: identityProvider.backgroundColor }}>
         <img
           src={window.baseUrl + identityProvider.iconPath}
           width="14"

server/sonar-web/src/main/js/apps/account/projects/ProjectCard.js

@@ -72,8 +72,7 @@ export default class ProjectCard extends React.Component {
                     href={link.href}
                     title={link.name}
                     target="_blank"
-                    rel="nofollow"
-                  >
+                    rel="nofollow">
                     <i className={`icon-color-link icon-${link.type}`} />
                   </a>
                 </li>

server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js

@@ -46,8 +46,7 @@ const CurrentsFilter = ({ value, onChange }: { value: ?string, onChange: (string
         role="checkbox"
         tabIndex="0"
         aria-checked={checked ? 'true' : 'false'}
-        onClick={handleLabelClick}
-      >
+        onClick={handleLabelClick}>
         Yes
       </label>
     </div>

server/sonar-web/src/main/js/apps/background-tasks/components/Stats.js

@@ -98,8 +98,7 @@ export default class Stats extends React.Component {
             className="js-failures-count emphasised-measure"
             data-toggle="tooltip"
             title="Count of projects where processing of most recent analysis report failed"
-            href="#"
-          >
+            href="#">
             {this.props.failingCount}
           </a>
           &nbsp;
@@ -112,8 +111,7 @@ export default class Stats extends React.Component {
           <span
             className="js-failures-count emphasised-measure"
             data-toggle="tooltip"
-            title="Count of projects where processing of most recent analysis report failed"
-          >
+            title="Count of projects where processing of most recent analysis report failed">
             {this.props.failingCount}
           </span>
           &nbsp;

server/sonar-web/src/main/js/apps/background-tasks/components/TaskActions.js

@@ -90,8 +90,7 @@ export default class TaskActions extends React.Component {
                 <a
                   className="js-task-show-scanner-context"
                   href="#"
-                  onClick={this.handleShowScannerContextClick.bind(this)}
-                >
+                  onClick={this.handleShowScannerContextClick.bind(this)}>
                   <i className="spacer-right icon-list icon-gray" />
                   {translate('background_tasks.show_scanner_context')}
                 </a>
@@ -101,8 +100,7 @@ export default class TaskActions extends React.Component {
                 <a
                   className="js-task-show-stacktrace"
                   href="#"
-                  onClick={this.handleShowStacktraceClick.bind(this)}
-                >
+                  onClick={this.handleShowStacktraceClick.bind(this)}>
                   <i className="spacer-right icon-list icon-red" />
                   {translate('background_tasks.show_stacktrace')}
                 </a>

server/sonar-web/src/main/js/apps/code/components/ComponentName.js

@@ -62,8 +62,7 @@ const ComponentName = ({ component, rootComponent, previous, canBrowse }) => {
     inner = (
       <Link
         to={{ pathname: '/dashboard', query: { id: component.refKey } }}
-        className="link-with-icon"
-      >
+        className="link-with-icon">
         <QualifierIcon qualifier={component.qualifier} />
         {' '}
         <span>{name}</span>

server/sonar-web/src/main/js/apps/code/components/ComponentPin.js

@@ -33,8 +33,7 @@ const ComponentPin = ({ component }) => {
       className="link-no-underline"
       onClick={handleClick}
       title={translate('component_viewer.open_in_workspace')}
-      href="#"
-    >
+      href="#">
       <PinIcon />
     </a>
   );

server/sonar-web/src/main/js/apps/component-measures/components/IconBubbles.js

@@ -28,9 +28,10 @@ export default function IconBubbles() {
       fillRule="evenodd"
       clipRule="evenodd"
       strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-    >
-      <path d="M352 256c52.984 0 96 43.016 96 96s-43.016 96-96 96-96-43.016-96-96 43.016-96 96-96zM128 96c70.645 0 128 57.355 128 128 0 70.645-57.355 128-128 128C57.355 352 0 294.645 0 224 0 153.355 57.355 96 128 96zM352 0c52.984 0 96 43.016 96 96s-43.016 96-96 96-96-43.016-96-96 43.016-96 96-96z" />
+      strokeMiterlimit="1.414">
+      <path
+        d="M352 256c52.984 0 96 43.016 96 96s-43.016 96-96 96-96-43.016-96-96 43.016-96 96-96zM128 96c70.645 0 128 57.355 128 128 0 70.645-57.355 128-128 128C57.355 352 0 294.645 0 224 0 153.355 57.355 96 128 96zM352 0c52.984 0 96 43.016 96 96s-43.016 96-96 96-96-43.016-96-96 43.016-96 96-96z"
+      />
     </svg>
   );
 }

server/sonar-web/src/main/js/apps/component-measures/components/IconHistory.js

@@ -28,9 +28,10 @@ export default function IconHistory() {
       fillRule="evenodd"
       clipRule="evenodd"
       strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-    >
-      <path d="M512 384v32H0V32h32v352h480zM480 72v108.75q0 5.25-4.875 7.375t-8.875-1.875L436 156 277.75 314.25q-2.5 2.5-5.75 2.5t-5.75-2.5L208 256 104 360l-48-48 146.25-146.25q2.5-2.5 5.75-2.5t5.75 2.5L272 224l116-116-30.25-30.25q-4-4-1.875-8.875T363.25 64H472q3.5 0 5.75 2.25T480 72z" />
+      strokeMiterlimit="1.414">
+      <path
+        d="M512 384v32H0V32h32v352h480zM480 72v108.75q0 5.25-4.875 7.375t-8.875-1.875L436 156 277.75 314.25q-2.5 2.5-5.75 2.5t-5.75-2.5L208 256 104 360l-48-48 146.25-146.25q2.5-2.5 5.75-2.5t5.75 2.5L272 224l116-116-30.25-30.25q-4-4-1.875-8.875T363.25 64H472q3.5 0 5.75 2.25T480 72z"
+      />
     </svg>
   );
 }

server/sonar-web/src/main/js/apps/component-measures/components/IconList.js

@@ -28,9 +28,10 @@ export default function ListIcon() {
       fillRule="evenodd"
       clipRule="evenodd"
       strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-    >
-      <path d="M448 48c0-8.83-7.17-16-16-16H16C7.17 32 0 39.17 0 48v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16V48zM448 144c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32zM448 240c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32zM448 336.03c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32z" />
+      strokeMiterlimit="1.414">
+      <path
+        d="M448 48c0-8.83-7.17-16-16-16H16C7.17 32 0 39.17 0 48v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16V48zM448 144c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32zM448 240c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32zM448 336.03c0-8.83-7.17-16-16-16H16c-8.83 0-16 7.17-16 16v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16v-32z"
+      />
     </svg>
   );
 }

server/sonar-web/src/main/js/apps/component-measures/components/IconTree.js

@@ -28,9 +28,10 @@ export default function IconTree() {
       fillRule="evenodd"
       clipRule="evenodd"
       strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-    >
-      <path d="M448 48c0-8.83-7.17-16-16-16H16C7.17 32 0 39.17 0 48v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16V48zM448 144c0-8.83-6.146-16-13.714-16H77.714C70.144 128 64 135.17 64 144v32c0 8.83 6.145 16 13.714 16h356.572c7.568 0 13.714-7.17 13.714-16v-32zM448 240c0-8.83-5.12-16-11.428-16H139.428C133.12 224 128 231.17 128 240v32c0 8.83 5.12 16 11.428 16h297.144c6.307 0 11.428-7.17 11.428-16v-32zM448 336.03c0-8.83-4.097-16-9.142-16H201.143c-5.046 0-9.143 7.17-9.143 16v32c0 8.83 4.097 16 9.143 16h237.715c5.045 0 9.142-7.17 9.142-16v-32z" />
+      strokeMiterlimit="1.414">
+      <path
+        d="M448 48c0-8.83-7.17-16-16-16H16C7.17 32 0 39.17 0 48v32c0 8.83 7.17 16 16 16h416c8.83 0 16-7.17 16-16V48zM448 144c0-8.83-6.146-16-13.714-16H77.714C70.144 128 64 135.17 64 144v32c0 8.83 6.145 16 13.714 16h356.572c7.568 0 13.714-7.17 13.714-16v-32zM448 240c0-8.83-5.12-16-11.428-16H139.428C133.12 224 128 231.17 128 240v32c0 8.83 5.12 16 11.428 16h297.144c6.307 0 11.428-7.17 11.428-16v-32zM448 336.03c0-8.83-4.097-16-9.142-16H201.143c-5.046 0-9.143 7.17-9.143 16v32c0 8.83 4.097 16 9.143 16h237.715c5.045 0 9.142-7.17 9.142-16v-32z"
+      />
     </svg>
   );
 }

server/sonar-web/src/main/js/apps/component-measures/components/IconTreemap.js

@@ -27,8 +27,7 @@ export default function IconTreemap() {
       fillRule="evenodd"
       clipRule="evenodd"
       strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-    >
+      strokeMiterlimit="1.414">
       <path d="M0 0h224v448H0zM256 0h192v256H256zM256 288h192v160H256z" />
     </svg>
   );

server/sonar-web/src/main/js/apps/component-measures/components/bubbleChart/BubbleChart.js

@@ -106,11 +106,14 @@ export default class BubbleChart extends React.Component {
   }
 
   getTooltip(component) {
+    const x = formatMeasure(getMeasure(component, this.xMetric.key), this.xMetric.type);
+    const y = formatMeasure(getMeasure(component, this.yMetric.key), this.yMetric.type);
+    const size = formatMeasure(getMeasure(component, this.sizeMetric.key), this.sizeMetric.type);
     const inner = [
       component.name,
-      `${this.xMetric.name}: ${formatMeasure(getMeasure(component, this.xMetric.key), this.xMetric.type)}`,
-      `${this.yMetric.name}: ${formatMeasure(getMeasure(component, this.yMetric.key), this.yMetric.type)}`,
-      `${this.sizeMetric.name}: ${formatMeasure(getMeasure(component, this.sizeMetric.key), this.sizeMetric.type)}`
+      `${this.xMetric.name}: ${x}`,
+      `${this.yMetric.name}: ${y}`,
+      `${this.sizeMetric.name}: ${size}`
     ].join('<br>');
 
     return `<div class="text-left">${inner}</div>`;

server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js

@@ -92,8 +92,7 @@ export default class MeasureDetails extends React.Component {
           <IndexLink
             to={{ pathname: '/component_measures', query: { id: component.key } }}
             id="component-measures-back-to-all-measures"
-            className="text-muted"
-          >
+            className="text-muted">
             {translate('component_measures.all_measures')}
           </IndexLink>
           {!!metric.domain &&
@@ -104,8 +103,7 @@ export default class MeasureDetails extends React.Component {
                   pathname: `/component_measures/domain/${metric.domain}`,
                   query: { id: component.key }
                 }}
-                className="text-muted"
-              >
+                className="text-muted">
                 {translateWithParameters('component_measures.domain_measures', metric.domain)}
               </Link>
             </span>}
@@ -124,8 +122,7 @@ export default class MeasureDetails extends React.Component {
             metric={metric}
             tab={tab}
             leakPeriod={period}
-            leakPeriodDate={periodDate}
-          >
+            leakPeriodDate={periodDate}>
             {children}
           </MeasureDrilldown>}
       </section>

server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ComponentCell.js

@@ -64,22 +64,19 @@ const ComponentCell = ({ component, isSelected, onClick }) => {
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis'
-        }}
-      >
+        }}>
         {component.refId == null || component.qualifier === 'DEV_PRJ'
           ? <a
               id={'component-measures-component-link-' + component.key}
               className={linkClassName}
               href={getComponentUrl(component.key)}
-              onClick={handleClick}
-            >
+              onClick={handleClick}>
               {inner}
             </a>
           : <a
               id={'component-measures-component-link-' + component.key}
               className={linkClassName}
-              href={getComponentUrl(component.refKey || component.key)}
-            >
+              href={getComponentUrl(component.refKey || component.key)}>
               <span className="big-spacer-right">
                 <i className="icon-detach" />
               </span>

server/sonar-web/src/main/js/apps/component-measures/details/drilldown/MeasureDrilldown.js

@@ -43,8 +43,7 @@ export default class MeasureDrilldown extends React.Component {
                 to={{
                   pathname: `/component_measures/metric/${metric.key}/list`,
                   query: { id: component.key }
-                }}
-              >
+                }}>
                 <IconList />
                 {translate('component_measures.tab.list')}
               </Link>
@@ -56,8 +55,7 @@ export default class MeasureDrilldown extends React.Component {
               to={{
                 pathname: `/component_measures/metric/${metric.key}/tree`,
                 query: { id: component.key }
-              }}
-            >
+              }}>
               <IconTree />
               {translate('component_measures.tab.tree')}
             </Link>
@@ -70,8 +68,7 @@ export default class MeasureDrilldown extends React.Component {
                 to={{
                   pathname: `/component_measures/metric/${metric.key}/bubbles`,
                   query: { id: component.key }
-                }}
-              >
+                }}>
                 <IconBubbles />
                 {translate('component_measures.tab.bubbles')}
               </Link>
@@ -84,8 +81,7 @@ export default class MeasureDrilldown extends React.Component {
                 to={{
                   pathname: `/component_measures/metric/${metric.key}/treemap`,
                   query: { id: component.key }
-                }}
-              >
+                }}>
                 <IconTreemap />
                 {translate('component_measures.tab.treemap')}
               </Link>
@@ -98,8 +94,7 @@ export default class MeasureDrilldown extends React.Component {
                 to={{
                   pathname: `/component_measures/metric/${metric.key}/history`,
                   query: { id: component.key }
-                }}
-              >
+                }}>
                 <IconHistory />
                 {translate('component_measures.tab.history')}
               </Link>

server/sonar-web/src/main/js/apps/component-measures/home/Home.js

@@ -51,8 +51,7 @@ export default class Home extends React.Component {
               <li>
                 <IndexLink
                   to={{ pathname: '/component_measures', query: { id: component.key } }}
-                  activeClassName="active"
-                >
+                  activeClassName="active">
                   {translate('all')}
                 </IndexLink>
               </li>
@@ -63,8 +62,7 @@ export default class Home extends React.Component {
                       pathname: `/component_measures/domain/${domain.name}`,
                       query: { id: component.key }
                     }}
-                    activeClassName="active"
-                  >
+                    activeClassName="active">
                     {getLocalizedMetricDomain(domain.name)}
                   </Link>
                 </li>

server/sonar-web/src/main/js/apps/component-measures/home/MeasureListValue.js

@@ -28,8 +28,7 @@ const MeasureListValue = ({ measure }) => {
     return (
       <div
         id={`measure-${measure.metric.key}-leak`}
-        className="domain-measures-value domain-measures-leak"
-      >
+        className="domain-measures-value domain-measures-leak">
         <Measure measure={measure} />
       </div>
     );

server/sonar-web/src/main/js/apps/component-measures/home/MeasuresList.js

@@ -32,8 +32,7 @@ const MeasuresList = ({ measures, component, className = 'domain-measures' }) =>
             to={{
               pathname: `/component_measures/metric/${measure.metric.key}`,
               query: { id: component.key }
-            }}
-          >
+            }}>
             <div className="domain-measures-name">
               <IssueTypeIcon query={measure.metric.key} className="little-spacer-right" />
               <span id={`measure-${measure.metric.key}-name`}>

server/sonar-web/src/main/js/apps/organizations/actions.js

@@ -175,7 +175,12 @@ export const updateOrganizationMemberGroups = (
       ...add.map(id => addUserToGroup(id, member.login)),
       ...remove.map(id => removeUserFromGroup(id, member.login))
     ];
-    return Promise.all(promises).then(() => {
-      dispatch(receiveUser({ ...member, groupCount: member.groupCount + add.length - remove.length }));
-    }, onFail(dispatch));
+    return Promise.all(promises).then(
+      () => {
+        dispatch(
+          receiveUser({ ...member, groupCount: member.groupCount + add.length - remove.length })
+        );
+      },
+      onFail(dispatch)
+    );
   };

server/sonar-web/src/main/js/apps/organizations/components/MembersListItem.js

@@ -53,7 +53,10 @@ export default class MembersListItem extends React.PureComponent {
         </td>
         {organization.canAdmin &&
           <td className="text-right text-middle">
-            {translateWithParameters('organization.members.x_groups', formatMeasure(member.groupCount || 0, 'INT'))}
+            {translateWithParameters(
+              'organization.members.x_groups',
+              formatMeasure(member.groupCount || 0, 'INT')
+            )}
           </td>}
         {organization.canAdmin &&
           <td className="nowrap text-middle text-right">

server/sonar-web/src/main/js/apps/organizations/components/OrganizationDelete.js

@@ -67,8 +67,7 @@ class OrganizationDelete extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.handleCloseModal}
-      >
+        onRequestClose={this.handleCloseModal}>
 
         <header className="modal-head">
           <h2>{translate('organization.delete')}</h2>
@@ -112,8 +111,7 @@ class OrganizationDelete extends React.Component {
           <button
             className="button-red"
             disabled={this.state.loading || this.state.deleting}
-            onClick={this.handleOpenModal}
-          >
+            onClick={this.handleOpenModal}>
             {translate('delete')}
           </button>
           {this.state.deleting && this.renderModal()}

server/sonar-web/src/main/js/apps/organizations/components/OrganizationGroupCheckbox.js

@@ -45,8 +45,7 @@ export default class OrganizationGroupCheckbox extends React.PureComponent {
         className="capitalize list-item-checkable-link"
         onClick={this.toggleCheck}
         tabIndex={0}
-        role="listitem"
-      >
+        role="listitem">
         <Checkbox checked={this.props.checked} onCheck={this.onCheck} />
         {' '}{this.props.group.name}
       </li>

server/sonar-web/src/main/js/apps/organizations/components/__tests__/MembersList-test.js

@@ -28,11 +28,6 @@ const members = [
 ];
 
 it('should render a list of members of an organization', () => {
-  const wrapper = shallow(
-    <MembersList
-      organization={organization}
-      members={members}
-    />
-  );
+  const wrapper = shallow(<MembersList organization={organization} members={members} />);
   expect(wrapper).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/organizations/components/__tests__/MembersListHeader-test.js

@@ -22,15 +22,11 @@ import { shallow } from 'enzyme';
 import MembersListHeader from '../MembersListHeader';
 
 it('should render without the total', () => {
-  const wrapper = shallow(
-    <MembersListHeader handleSearch={jest.fn()} />
-  );
+  const wrapper = shallow(<MembersListHeader handleSearch={jest.fn()} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 it('should render with the total', () => {
-  const wrapper = shallow(
-    <MembersListHeader handleSearch={jest.fn()} total={8} />
-  );
+  const wrapper = shallow(<MembersListHeader handleSearch={jest.fn()} total={8} />);
   expect(wrapper).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/organizations/components/__tests__/MembersListItem-test.js

@@ -26,31 +26,20 @@ const admin = { login: 'admin', name: 'Admin Istrator', avatar: '', groupCount:
 const john = { login: 'john', name: 'John Doe', avatar: '7daf6c79d4802916d83f6266e24850af' };
 
 it('should not render actions and groups for non admin', () => {
-  const wrapper = shallow(
-    <MembersListItem
-      organization={organization}
-      member={admin}
-    />
-  );
+  const wrapper = shallow(<MembersListItem organization={organization} member={admin} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 it('should render actions and groups for admin', () => {
   const wrapper = shallow(
-    <MembersListItem
-      organization={{ ...organization, canAdmin: true }}
-      member={admin}
-    />
+    <MembersListItem organization={{ ...organization, canAdmin: true }} member={admin} />
   );
   expect(wrapper).toMatchSnapshot();
 });
 
 it('should groups at 0 if the groupCount field is not defined (just added user)', () => {
   const wrapper = shallow(
-    <MembersListItem
-      organization={{ ...organization, canAdmin: true }}
-      member={john}
-    />
+    <MembersListItem organization={{ ...organization, canAdmin: true }} member={john} />
   );
   expect(wrapper).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/organizations/components/__tests__/MembersPageHeader-test.js

@@ -22,9 +22,7 @@ import { shallow } from 'enzyme';
 import MembersPageHeader from '../MembersPageHeader';
 
 it('should render the members page header', () => {
-  const wrapper = shallow(
-    <MembersPageHeader />
-  );
+  const wrapper = shallow(<MembersPageHeader />);
   expect(wrapper).toMatchSnapshot();
   wrapper.setProps({ loading: true });
   expect(wrapper.find('.spinner')).toMatchSnapshot();

server/sonar-web/src/main/js/apps/organizations/components/forms/AddMemberForm.js

@@ -69,8 +69,7 @@ export default class AddMemberForm extends React.PureComponent {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('users.add')}</h2>
         </header>

server/sonar-web/src/main/js/apps/organizations/components/forms/ManageMemberGroupsForm.js

@@ -107,15 +107,17 @@ export default class ManageMemberGroupsForm extends React.PureComponent {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('organization.members.manage_groups')}</h2>
         </header>
         <form onSubmit={this.handleSubmit}>
           <div className="modal-body">
             <strong>
-              {translateWithParameters('organization.members.members_groups', this.props.member.name)}
+              {translateWithParameters(
+                'organization.members.members_groups',
+                this.props.member.name
+              )}
             </strong>{' '}{this.state.loading && <i className="spinner" />}
             {!this.state.loading &&
               <ul className="list-spaced">

server/sonar-web/src/main/js/apps/organizations/components/forms/RemoveMemberForm.js

@@ -63,8 +63,7 @@ export default class RemoveMemberForm extends React.PureComponent {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('users.remove')}</h2>
         </header>

server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js

@@ -71,16 +71,14 @@ export default class OrganizationNavigation extends React.Component {
           <li>
             <Link
               to={`/organizations/${organization.key}/permission_templates`}
-              activeClassName="active"
-            >
+              activeClassName="active">
               {translate('permission_templates')}
             </Link>
           </li>
           <li>
             <Link
               to={`/organizations/${organization.key}/projects_management`}
-              activeClassName="active"
-            >
+              activeClassName="active">
               {translate('projects_management')}
             </Link>
           </li>
@@ -136,8 +134,7 @@ export default class OrganizationNavigation extends React.Component {
                       className="link-underline"
                       href={organization.url}
                       title={organization.url}
-                      rel="nofollow"
-                    >
+                      rel="nofollow">
                       {organization.url}
                     </a>
                   </p>
@@ -148,8 +145,7 @@ export default class OrganizationNavigation extends React.Component {
               <li>
                 <Link
                   to={`/organizations/${organization.key}/projects`}
-                  className={isHomeActive ? 'active' : ''}
-                >
+                  className={isHomeActive ? 'active' : ''}>
                   {translate('projects.page')}
                 </Link>
               </li>

server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js

@@ -99,7 +99,8 @@ export default class OverviewApp extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.component.key !== prevProps.component.key) {
-      this.loadMeasures(this.props.component.key).then(() => this.loadHistory(this.props.component));
+      this.loadMeasures(this.props.component.key).then(() =>
+        this.loadHistory(this.props.component));
     }
   }
 

server/sonar-web/src/main/js/apps/overview/main/Coverage.js

@@ -99,8 +99,7 @@ class Coverage extends React.Component {
           <DrilldownLink
             component={component.key}
             metric={newCoverageMeasure.metric.key}
-            period={leakPeriod.index}
-          >
+            period={leakPeriod.index}>
             <span className="js-overview-main-new-coverage">
               {formatMeasure(newCoverageValue, 'PERCENT')}
             </span>
@@ -115,8 +114,7 @@ class Coverage extends React.Component {
             className="spacer-right overview-domain-secondary-measure-value"
             component={component.key}
             metric={newLinesToCover.metric.key}
-            period={leakPeriod.index}
-          >
+            period={leakPeriod.index}>
             <span className="js-overview-main-new-coverage">
               {formatMeasure(newLinesToCoverValue, 'SHORT_INT')}
             </span>

server/sonar-web/src/main/js/apps/overview/main/Duplications.js

@@ -83,8 +83,7 @@ class Duplications extends React.Component {
           <DrilldownLink
             component={component.key}
             metric={newDuplicationsMeasure.metric.key}
-            period={leakPeriod.index}
-          >
+            period={leakPeriod.index}>
             <span className="js-overview-main-new-duplications">
               {formatMeasure(newDuplicationsValue, 'PERCENT')}
             </span>
@@ -99,8 +98,7 @@ class Duplications extends React.Component {
             className="spacer-right overview-domain-secondary-measure-value"
             component={component.key}
             metric={newLinesMeasure.metric.key}
-            period={leakPeriod.index}
-          >
+            period={leakPeriod.index}>
             <span className="js-overview-main-new-lines">
               {formatMeasure(newLinesValue, 'SHORT_INT')}
             </span>

server/sonar-web/src/main/js/apps/overview/meta/MetaLink.js

@@ -67,8 +67,7 @@ export default class MetaLink extends React.Component {
           className="link-with-icon"
           href={link.url}
           target="_blank"
-          onClick={!isClickable(link) && this.handleClick}
-        >
+          onClick={!isClickable(link) && this.handleClick}>
           {this.renderLinkIcon(link)}
            
           {link.name}

server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js

@@ -94,8 +94,7 @@ class MetaQualityProfiles extends React.Component {
           key={profile.key}
           className="overview-deprecated-rules"
           title={tooltip}
-          data-toggle="tooltip"
-        >
+          data-toggle="tooltip">
           {inner}
         </li>
       );

server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js

@@ -107,12 +107,8 @@ export default class MetaTags extends React.PureComponent {
           <button
             className="button-link"
             onClick={this.handleClick}
-            ref={tagsList => this.tagsList = tagsList}
-          >
-            <TagsList
-              tags={tags.length ? tags : [translate('no_tags')]}
-              allowUpdate={true}
-            />
+            ref={tagsList => this.tagsList = tagsList}>
+            <TagsList tags={tags.length ? tags : [translate('no_tags')]} allowUpdate={true} />
           </button>
           {popupOpen &&
             <div ref={tagsSelector => this.tagsSelector = tagsSelector}>

server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js

@@ -125,8 +125,7 @@ export default class QualityGateCondition extends React.Component {
           component={component.key}
           metric={condition.measure.metric.key}
           period={condition.period}
-          periodDate={periodDate}
-        >
+          periodDate={periodDate}>
           {children}
         </DrilldownLink>;
   }

server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js

@@ -101,8 +101,7 @@ export default class QualityGateConditions extends React.Component {
     return (
       <div
         id="overview-quality-gate-conditions-list"
-        className="overview-quality-gate-conditions-list clearfix"
-      >
+        className="overview-quality-gate-conditions-list clearfix">
         {sortedConditions.map(condition => (
           <QualityGateCondition
             key={condition.measure.metric.key}

server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js

@@ -111,8 +111,7 @@ export default class ActionsCell extends React.Component {
           href="#"
           className="js-set-default"
           data-qualifier={qualifier}
-          onClick={this.setDefault.bind(this, qualifier)}
-        >
+          onClick={this.setDefault.bind(this, qualifier)}>
           {this.renderDropdownIcon(<i className="icon-check" />)}
           {child}
         </a>

server/sonar-web/src/main/js/apps/permission-templates/components/Template.js

@@ -209,8 +209,7 @@ class Template extends React.Component {
           groups={store.groups}
           onSelectPermission={this.handleSelectPermission}
           onToggleUser={this.handleToggleUser}
-          onToggleGroup={this.handleToggleGroup}
-        >
+          onToggleGroup={this.handleToggleGroup}>
 
           <SearchForm
             query={store.query}

server/sonar-web/src/main/js/apps/permission-templates/views/GroupsView.js

@@ -22,8 +22,8 @@ import Template from '../templates/permission-templates-groups.hbs';
 import '../../../components/SelectList';
 
 function getSearchUrl(permission, permissionTemplate) {
-  return window.baseUrl +
-    `/api/permissions/template_groups?ps=100&permission=${permission.key}&templateId=${permissionTemplate.id}`;
+  return `${window.baseUrl}/api/permissions/template_groups?` +
+    `ps=100&permission=${permission.key}&templateId=${permissionTemplate.id}`;
 }
 
 export default Modal.extend({

server/sonar-web/src/main/js/apps/permissions/global/components/AllHoldersList.js

@@ -91,8 +91,7 @@ class AllHoldersList extends React.Component {
         groups={this.props.groups}
         onSelectPermission={this.props.onSelectPermission}
         onToggleUser={this.handleToggleUser.bind(this)}
-        onToggleGroup={this.handleToggleGroup.bind(this)}
-      >
+        onToggleGroup={this.handleToggleGroup.bind(this)}>
 
         <SearchForm
           query={this.props.query}

server/sonar-web/src/main/js/apps/permissions/project/components/AllHoldersList.js

@@ -99,8 +99,7 @@ class AllHoldersList extends React.Component {
         groups={this.props.groups}
         onSelectPermission={this.handleSelectPermission.bind(this)}
         onToggleUser={this.handleToggleUser.bind(this)}
-        onToggleGroup={this.handleToggleGroup.bind(this)}
-      >
+        onToggleGroup={this.handleToggleGroup.bind(this)}>
 
         <SearchForm
           query={this.props.query}

server/sonar-web/src/main/js/apps/permissions/shared/components/GroupHolder.js

@@ -46,8 +46,7 @@ export default class GroupHolder extends React.Component {
       <td
         key={p.key}
         className="text-center text-middle"
-        style={{ backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent' }}
-      >
+        style={{ backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent' }}>
         <button className="button-clean" onClick={this.handleClick.bind(this, p.key)}>
           {this.props.permissions.includes(p.key)
             ? <i className="icon-checkbox icon-checkbox-checked" />

server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.js

@@ -48,15 +48,13 @@ export default class HoldersList extends React.Component {
         className="permission-column text-center"
         style={{
           backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent'
-        }}
-      >
+        }}>
         <div className="permission-column-inner">
           <a
             href="#"
             title={`Filter by "${p.name}" permission`}
             data-toggle="tooltip"
-            onClick={this.handlePermissionClick.bind(this, p.key)}
-          >
+            onClick={this.handlePermissionClick.bind(this, p.key)}>
             {p.name}
           </a>
           <i className="icon-help little-spacer-left" title={p.description} data-toggle="tooltip" />

server/sonar-web/src/main/js/apps/permissions/shared/components/SearchForm.js

@@ -69,8 +69,7 @@ export default class SearchForm extends React.Component {
 
         <form
           className="search-box display-inline-block text-middle big-spacer-left"
-          onSubmit={this.handleSubmit}
-        >
+          onSubmit={this.handleSubmit}>
           <button className="search-box-submit button-clean">
             <i className="icon-search" />
           </button>

server/sonar-web/src/main/js/apps/permissions/shared/components/UserHolder.js

@@ -47,8 +47,7 @@ export default class UserHolder extends React.Component {
       <td
         key={p.key}
         className="text-center text-middle"
-        style={{ backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent' }}
-      >
+        style={{ backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent' }}>
         <button className="button-clean" onClick={this.handleClick.bind(this, p.key)}>
           {this.props.permissions.includes(p.key)
             ? <i className="icon-checkbox icon-checkbox-checked" />

server/sonar-web/src/main/js/apps/project-admin/key/Key.js

@@ -110,8 +110,7 @@ class Key extends React.Component {
                     id="update-key-tab-bulk"
                     className={tab === 'bulk' ? 'selected' : ''}
                     href="#"
-                    onClick={this.handleChangeTab.bind(this, 'bulk')}
-                  >
+                    onClick={this.handleChangeTab.bind(this, 'bulk')}>
                     {translate('update_key.bulk_update')}
                   </a>
                 </li>
@@ -120,8 +119,7 @@ class Key extends React.Component {
                     id="update-key-tab-fine"
                     className={tab === 'fine' ? 'selected' : ''}
                     href="#"
-                    onClick={this.handleChangeTab.bind(this, 'fine')}
-                  >
+                    onClick={this.handleChangeTab.bind(this, 'fine')}>
                     {translate('update_key.fine_grained_key_update')}
                   </a>
                 </li>

server/sonar-web/src/main/js/apps/project-admin/key/UpdateForm.js

@@ -77,8 +77,7 @@ export default class UpdateForm extends React.Component {
           <button
             id="update-key-reset"
             disabled={!hasChanged}
-            onClick={this.handleReset.bind(this)}
-          >
+            onClick={this.handleReset.bind(this)}>
             {translate('reset_verb')}
           </button>
         </div>

server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.js

@@ -99,8 +99,7 @@ export default class AddEventForm extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
 
         <header className="modal-head">
           <h2>{translate(this.props.addEventButtonText)}</h2>

server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.js

@@ -97,8 +97,7 @@ export default class ChangeEventForm extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
 
         <header className="modal-head">
           <h2>{translate(this.props.changeEventButtonText)}</h2>

server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.js

@@ -92,8 +92,7 @@ class RemoveAnalysisForm extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
 
         <header className="modal-head">
           <h2>{translate('project_activity.delete_analysis')}</h2>

server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.js

@@ -84,8 +84,7 @@ export default class RemoveEventForm extends React.Component {
         contentLabel="modal form"
         className="modal"
         overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}
-      >
+        onRequestClose={this.closeForm}>
 
         <header className="modal-head">
           <h2>{translate(this.props.removeEventButtonText)}</h2>

server/sonar-web/src/main/js/apps/projects-admin/header.js

@@ -78,8 +78,10 @@ export default class Header extends React.Component {
         </div>
         <p className="page-description">
           Use this page to delete multiple projects at once, or to provision projects
-          if you would like to configure them before the first analysis. Note that once a project is provisioned, you
-          have access to perform all project configurations on it.
+          {' '}
+          if you would like to configure them before the first analysis. Note that once
+          {' '}
+          a project is provisioned, you have access to perform all project configurations on it.
         </p>
       </header>
     );

server/sonar-web/src/main/js/apps/projects-admin/projects.js

@@ -72,8 +72,7 @@ export default class Projects extends React.Component {
         <td className="nowrap">
           <Link
             to={{ pathname: '/dashboard', query: { id: project.key } }}
-            className="link-with-icon"
-          >
+            className="link-with-icon">
             <QualifierIcon qualifier={project.qualifier} />
             {' '}
             <span>{project.name}</span>

server/sonar-web/src/main/js/apps/projects-admin/search.js

@@ -149,8 +149,7 @@ export default React.createClass({
                 <button
                   onClick={this.deleteProjects}
                   className="button-red"
-                  disabled={!isSomethingSelected}
-                >
+                  disabled={!isSomethingSelected}>
                   Delete
                 </button>
               </td>

server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js

@@ -57,8 +57,7 @@ export default class FavoriteFilter extends React.PureComponent {
             to={pathnameForFavorite}
             className="button"
             activeClassName="button-active"
-            onClick={this.handleSaveFavorite}
-          >
+            onClick={this.handleSaveFavorite}>
             {translate('my_favorites')}
           </Link>
           <IndexLink
@@ -66,8 +65,7 @@ export default class FavoriteFilter extends React.PureComponent {
             to={pathnameForAll}
             className="button"
             activeClassName="button-active"
-            onClick={this.handleSaveAll}
-          >
+            onClick={this.handleSaveAll}>
             {translate('all')}
           </IndexLink>
         </div>

server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js

@@ -45,7 +45,10 @@ export default class LanguagesFilter extends React.PureComponent {
   property = 'languages';
 
   renderOption = (option: string) => (
-    <SearchableFilterOption optionKey={option} option={getLanguageByKey(this.props.languages, option)} />
+    <SearchableFilterOption
+      optionKey={option}
+      option={getLanguageByKey(this.props.languages, option)}
+    />
   );
 
   getSearchOptions(facet: {}, languages: {}) {
@@ -53,7 +56,9 @@ export default class LanguagesFilter extends React.PureComponent {
     if (facet) {
       languageKeys = difference(languageKeys, Object.keys(facet));
     }
-    return languageKeys.slice(0, LIST_SIZE).map(key => ({ label: languages[key].name, value: key }));
+    return languageKeys
+      .slice(0, LIST_SIZE)
+      .map(key => ({ label: languages[key].name, value: key }));
   }
 
   getSortedOptions(facet: {} = {}) {

server/sonar-web/src/main/js/apps/projects/filters/SortingFilter.js

@@ -77,15 +77,13 @@ export default class SortingFilter extends React.PureComponent {
           <Link
             onClick={this.blurLink}
             className={this.getLinkClass('left')}
-            to={this.getLinkPath('left')}
-          >
+            to={this.getLinkPath('left')}>
             {leftText}
           </Link>
           <Link
             onClick={this.blurLink}
             className={this.getLinkClass('right')}
-            to={this.getLinkPath('right')}
-          >
+            to={this.getLinkPath('right')}>
             {rightText}
           </Link>
         </div>

server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js

@@ -73,7 +73,10 @@ export default class TagsFilter extends React.PureComponent {
     if (search !== this.state.search) {
       search = search || '';
       this.setState({ search, isLoading: true });
-      searchProjectTags({ q: search, ps: size(this.props.facet || {}) + LIST_SIZE }).then(result => {
+      searchProjectTags({
+        q: search,
+        ps: size(this.props.facet || {}) + LIST_SIZE
+      }).then(result => {
         this.setState({ isLoading: false, tags: result.tags });
       });
     }

server/sonar-web/src/main/js/apps/projects/filters/__tests__/LanguagesFilter-test.js

@@ -52,7 +52,12 @@ const fakeRouter = { push: () => {} };
 
 it('should render the languages without the ones in the facet', () => {
   const wrapper = shallow(
-    <LanguagesFilter query={{ languages: null }} languages={languages} router={fakeRouter} facet={languagesFacet} />
+    <LanguagesFilter
+      query={{ languages: null }}
+      languages={languages}
+      router={fakeRouter}
+      facet={languagesFacet}
+    />
   );
   expect(wrapper).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/projects/filters/__tests__/TagsFilter-test.js

@@ -26,7 +26,9 @@ const tagsFacet = { lang: 4, sonar: 3, csharp: 1 };
 const fakeRouter = { push: () => {} };
 
 it('should render the tags without the ones in the facet', () => {
-  const wrapper = shallow(<TagsFilter query={{ tags: null }} router={fakeRouter} facet={tagsFacet} />);
+  const wrapper = shallow(
+    <TagsFilter query={{ tags: null }} router={fakeRouter} facet={tagsFacet} />
+  );
   expect(wrapper).toMatchSnapshot();
   wrapper.setState({ tags });
   expect(wrapper).toMatchSnapshot();

server/sonar-web/src/main/js/apps/projects/visualizations/QualityModel.js

@@ -63,10 +63,10 @@ export default class QualityModel extends React.PureComponent {
     color2: number
   ) {
     const fullProjectName = this.props.displayOrganizations && project.organization
-      ? `<div class="little-spacer-bottom">${project.organization.name} / <strong>${project.name}</strong></div>`
-      : `<div class="little-spacer-bottom"><strong>${project.name}</strong></div>`;
+      ? `${project.organization.name} / <strong>${project.name}</strong>`
+      : `<strong>${project.name}</strong>`;
     const inner = [
-      fullProjectName,
+      `<div class="little-spacer-bottom">${fullProjectName}</div>`,
       this.getMetricTooltip({ key: COLOR_METRIC_1, type: COLOR_METRIC_TYPE }, color1),
       this.getMetricTooltip({ key: COLOR_METRIC_2, type: COLOR_METRIC_TYPE }, color2),
       this.getMetricTooltip({ key: Y_METRIC, type: Y_METRIC_TYPE }, y),

server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.js

@@ -53,11 +53,11 @@ export default class SimpleBubbleChart extends React.PureComponent {
 
   getTooltip(project: Project, x: ?number, y: ?number, size: ?number, color?: number) {
     const fullProjectName = this.props.displayOrganizations && project.organization
-      ? `<div class="little-spacer-bottom">${project.organization.name} / <strong>${project.name}</strong></div>`
-      : `<div class="little-spacer-bottom"><strong>${project.name}</strong></div>`;
+      ? `${project.organization.name} / <strong>${project.name}</strong>`
+      : `<strong>${project.name}</strong>`;
 
     const inner = [
-      fullProjectName,
+      `<div class="little-spacer-bottom">${fullProjectName}</div>`,
       this.getMetricTooltip(this.props.xMetric, x),
       this.getMetricTooltip(this.props.yMetric, y),
       this.getMetricTooltip(this.props.sizeMetric, size)
@@ -118,12 +118,13 @@ export default class SimpleBubbleChart extends React.PureComponent {
           {translate('metric', yMetric.key, 'name')}
         </div>
         <div className="measure-details-bubble-chart-axis size">
-          {colorMetric != null && <span className="spacer-right">
-            {translateWithParameters(
-              'component_measures.legend.color_x',
-              translate('metric', colorMetric, 'name')
-            )}
-          </span>}
+          {colorMetric != null &&
+            <span className="spacer-right">
+              {translateWithParameters(
+                'component_measures.legend.color_x',
+                translate('metric', colorMetric, 'name')
+              )}
+            </span>}
           {translateWithParameters(
             'component_measures.legend.size_x',
             translate('metric', sizeMetric.key, 'name')

server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js

@@ -268,14 +268,12 @@ export default class Condition extends Component {
                   <button
                     className="update-condition"
                     disabled={!this.state.changed}
-                    onClick={this.handleUpdateClick.bind(this)}
-                  >
+                    onClick={this.handleUpdateClick.bind(this)}>
                     {translate('update_verb')}
                   </button>
                   <button
                     className="button-red delete-condition"
-                    onClick={this.handleDeleteClick.bind(this)}
-                  >
+                    onClick={this.handleDeleteClick.bind(this)}>
                     {translate('delete')}
                   </button>
                 </div>
@@ -286,8 +284,7 @@ export default class Condition extends Component {
                   <a
                     className="action cancel-add-condition"
                     href="#"
-                    onClick={this.handleCancelClick.bind(this)}
-                  >
+                    onClick={this.handleCancelClick.bind(this)}>
                     {translate('cancel')}
                   </a>
                 </div>}

server/sonar-web/src/main/js/apps/quality-gates/components/List.js

@@ -30,8 +30,7 @@ export default function List({ qualityGates }) {
           to={`/quality_gates/show/${qualityGate.id}`}
           activeClassName="active"
           className="list-group-item"
-          data-id={qualityGate.id}
-        >
+          data-id={qualityGate.id}>
           <table>
             <tbody>
               <tr>

server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileActions.js

@@ -110,8 +110,7 @@ export default class ProfileActions extends React.Component {
         <li>
           <Link
             to={{ pathname: '/profiles/compare', query: { key: profile.key } }}
-            id="quality-profile-compare"
-          >
+            id="quality-profile-compare">
             {translate('compare')}
           </Link>
         </li>
@@ -133,8 +132,7 @@ export default class ProfileActions extends React.Component {
             <a
               id="quality-profile-set-as-default"
               href="#"
-              onClick={this.handleSetDefaultClick.bind(this)}
-            >
+              onClick={this.handleSetDefaultClick.bind(this)}>
               {translate('set_as_default')}
             </a>
           </li>}

server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileLink.js

@@ -32,8 +32,7 @@ export default class ProfileLink extends React.Component {
       <Link
         to={{ pathname: '/profiles/show', query }}
         activeClassName="link-no-underline"
-        {...other}
-      >
+        {...other}>
         {children}
       </Link>
     );

server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/ProfileContainer-test.js

@@ -34,8 +34,7 @@ it('should render ProfileHeader', () => {
       location={{ query: { key: 'profile1' } }}
       profiles={profiles}
       canAdmin={false}
-      updateProfiles={updateProfiles}
-    >
+      updateProfiles={updateProfiles}>
       <div />
     </ProfileContainer>
   );
@@ -53,8 +52,7 @@ it('should render ProfileNotFound', () => {
       location={{ query: { key: 'random' } }}
       profiles={profiles}
       canAdmin={false}
-      updateProfiles={() => true}
-    >
+      updateProfiles={() => true}>
       <div />
     </ProfileContainer>
   );
@@ -69,8 +67,7 @@ it('should render Helmet', () => {
       location={{ query: { key: 'profile1' } }}
       profiles={profiles}
       canAdmin={false}
-      updateProfiles={updateProfiles}
-    >
+      updateProfiles={updateProfiles}>
       <div />
     </ProfileContainer>
   );

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js

@@ -92,8 +92,7 @@ export default class ProfileHeader extends React.Component {
           {' / '}
           <Link
             to={{ pathname: '/profiles/', query: { language: profile.language } }}
-            className="text-muted"
-          >
+            className="text-muted">
             {profile.languageName}
           </Link>
         </div>
@@ -111,8 +110,7 @@ export default class ProfileHeader extends React.Component {
             <li>
               <Link
                 to={{ pathname: '/profiles/changelog', query: { key: profile.key } }}
-                className="button"
-              >
+                className="button">
                 {translate('changelog')}
               </Link>
             </li>

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.js

@@ -112,8 +112,7 @@ export default class ProfileProjects extends React.Component {
           <li key={project.uuid} className="spacer-top js-profile-project" data-key={project.key}>
             <Link
               to={{ pathname: '/dashboard', query: { id: project.key } }}
-              className="link-with-icon"
-            >
+              className="link-with-icon">
               <QualifierIcon qualifier="TRK" />
               {' '}
               <span>{project.name}</span>

server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.js

@@ -65,8 +65,7 @@ export default class EvolutionDeprecated extends React.Component {
                 {', '}
                 <Link
                   to={getDeprecatedActiveRulesUrl({ qprofile: profile.key })}
-                  className="text-muted"
-                >
+                  className="text-muted">
                   {translateWithParameters(
                     'quality_profile.x_rules',
                     profile.activeDeprecatedRuleCount

server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.js

@@ -106,8 +106,7 @@ export default class PageHeader extends React.Component {
                 <a
                   href="#"
                   id="quality-profiles-restore"
-                  onClick={this.handleRestoreClick.bind(this)}
-                >
+                  onClick={this.handleRestoreClick.bind(this)}>
                   {translate('quality_profiles.restore_profile')}
                 </a>
               </li>
@@ -116,8 +115,7 @@ export default class PageHeader extends React.Component {
                 <a
                   href="#"
                   id="quality-profiles-restore-built-in"
-                  onClick={this.handleRestoreBuiltIn.bind(this)}
-                >
+                  onClick={this.handleRestoreBuiltIn.bind(this)}>
                   {translate('quality_profiles.restore_built_in_profiles')}
                 </a>
               </li>

server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListHeader.js

@@ -40,8 +40,7 @@ export default class ProfilesListHeader extends React.Component {
       <a
         className="dropdown-toggle link-no-underline js-language-filter"
         href="#"
-        data-toggle="dropdown"
-      >
+        data-toggle="dropdown">
         {label} <i className="icon-dropdown" />
       </a>
     );
@@ -60,8 +59,7 @@ export default class ProfilesListHeader extends React.Component {
             <IndexLink
               to={{ pathname: '/profiles/', query: { language: language.key } }}
               className="js-language-filter-option"
-              data-language={language.key}
-            >
+              data-language={language.key}>
               {language.name}
             </IndexLink>
           </li>

server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js

@@ -91,8 +91,7 @@ export default class ProfilesListRow extends React.Component {
               to={deprecatedRulesUrl}
               className="badge badge-normal-size badge-danger-light"
               title={translate('quality_profiles.deprecated_rules')}
-              data-toggle="tooltip"
-            >
+              data-toggle="tooltip">
               {profile.activeDeprecatedRuleCount}
             </Link>
           </span>}
@@ -128,8 +127,7 @@ export default class ProfilesListRow extends React.Component {
       <tr
         className="quality-profiles-table-row"
         data-key={this.props.profile.key}
-        data-name={this.props.profile.name}
-      >
+        data-name={this.props.profile.name}>
         <td className="quality-profiles-table-name">
           {this.renderName()}
         </td>

server/sonar-web/src/main/js/apps/sessions/components/LoginForm.js

@@ -51,8 +51,7 @@ export default class LoginForm extends React.Component {
                   <a
                     href={`${window.baseUrl}/sessions/init/${identityProvider.key}`}
                     style={{ backgroundColor: identityProvider.backgroundColor }}
-                    title={`Log in with ${identityProvider.name}`}
-                  >
+                    title={`Log in with ${identityProvider.name}`}>
                     <img
                       alt={identityProvider.name}
                       width="20"

server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.js

@@ -31,7 +31,7 @@ export default class Unauthorized extends React.Component {
     return (
       <div className="text-center">
         <p id="unauthorized">
-          You&apos;re not authorized to access this page. Please contact the administrator.
+          {'You\'re not authorized to access this page. Please contact the administrator.'}
         </p>
 
         {!!message &&

server/sonar-web/src/main/js/apps/settings/components/DefinitionChanges.js

@@ -53,8 +53,7 @@ export default class DefinitionChanges extends React.Component {
 
         <button
           className="js-cancel-changes big-spacer-left button-link"
-          onClick={e => this.handleCancelChange(e)}
-        >
+          onClick={e => this.handleCancelChange(e)}>
           {translate('cancel')}
         </button>
       </div>

server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js

@@ -70,8 +70,7 @@ export default class MultiValueInput extends React.Component {
           <div className="display-inline-block spacer-left">
             <button
               className="js-remove-value button-clean"
-              onClick={e => this.handleDeleteValue(e, index)}
-            >
+              onClick={e => this.handleDeleteValue(e, index)}>
               <i className="icon-delete" />
             </button>
           </div>}

server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js

@@ -72,8 +72,7 @@ export default class PropertySetInput extends React.Component {
           {!isLast &&
             <button
               className="js-remove-value button-link"
-              onClick={e => this.handleDeleteValue(e, index)}
-            >
+              onClick={e => this.handleDeleteValue(e, index)}>
               <i className="icon-delete" />
             </button>}
         </td>
@@ -90,8 +89,7 @@ export default class PropertySetInput extends React.Component {
       <div>
         <table
           className="data zebra-hover no-outer-padding"
-          style={{ width: 'auto', minWidth: 480, marginTop: -12 }}
-        >
+          style={{ width: 'auto', minWidth: 480, marginTop: -12 }}>
           <thead>
             <tr>
               {setting.definition.fields.map(field => (

server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.js

@@ -48,8 +48,7 @@ export default class EncryptionForm extends React.Component {
         <form
           id="encryption-form"
           className="big-spacer-bottom"
-          onSubmit={e => this.handleEncrypt(e)}
-        >
+          onSubmit={e => this.handleEncrypt(e)}>
           <input
             id="encryption-form-value"
             className="input-large"
@@ -76,7 +75,9 @@ export default class EncryptionForm extends React.Component {
 
         <div className="huge-spacer-top bordered-top">
           <div className="big-spacer-top spacer-bottom">
-            Note that the secret key can be changed, but all the encrypted properties will have to be updated.
+            Note that the secret key can be changed, but all the encrypted properties
+            {' '}
+            will have to be updated.
             {' '}
             <a href="https://redirect.sonarsource.com/doc/settings-encryption.html">
               More information

server/sonar-web/src/main/js/apps/settings/encryption/GenerateSecretKeyForm.js

@@ -69,13 +69,18 @@ export default class GenerateSecretKeyForm extends React.Component {
                   has been set or changed.
                 </li>
                 <li className="spacer-bottom">
-                  Copy this file on all the machines that execute code inspection. Define the property
-                  {' '}<code>sonar.secretKeyPath</code> on those machines if the path is not
-                  {' '}<code>~/.sonar/sonar-secret.txt</code>.
+                  Copy this file on all the machines that execute code inspection. Define the
+                  {' '}
+                  property <code>sonar.secretKeyPath</code> on those machines if the path is not
+                  {' '}
+                  <code>~/.sonar/sonar-secret.txt</code>.
                 </li>
                 <li>
-                  For each property that you want to encrypt, generate the encrypted value and replace the original
-                  value wherever it is stored (configuration files, command lines).
+                  For each property that you want to encrypt, generate the encrypted value and
+                  {' '}
+                  replace the original value wherever it is stored
+                  {' '}
+                  (configuration files, command lines).
                 </li>
               </ul>
             </div>

server/sonar-web/src/main/js/apps/system/main.js

@@ -111,8 +111,7 @@ export default React.createClass({
             <button
               id="restart-server-button"
               className="big-spacer-left"
-              onClick={this.handleServerRestart}
-            >
+              onClick={this.handleServerRestart}>
               Restart Server
             </button>
           </div>

server/sonar-web/src/main/js/apps/users/components/UsersSearch.js

@@ -36,7 +36,7 @@ export default class UsersSearch extends React.PureComponent {
   props: Props;
   state: State = {
     query: ''
-  }
+  };
 
   constructor(props: Props) {
     super(props);
@@ -45,7 +45,7 @@ export default class UsersSearch extends React.PureComponent {
 
   handleSearch = (query: string) => {
     this.props.onSearch(query);
-  }
+  };
 
   handleInputChange = ({ target }: { target: HTMLInputElement }) => {
     this.setState({ query: target.value });
@@ -61,22 +61,22 @@ export default class UsersSearch extends React.PureComponent {
       touched: query != null && query.length === 1
     });
     return (
-        <div className={searchBoxClass}>
-          <button className="search-box-submit button-clean">
-            <i className="icon-search" />
-          </button>
-          <input
-            type="search"
-            value={query}
-            className={inputClassName}
-            placeholder={translate('search_verb')}
-            onChange={this.handleInputChange}
-            autoComplete="off"
-          />
-          <span className="note spacer-left text-middle">
-            {translateWithParameters('select2.tooShort', 2)}
-          </span>
-        </div>
+      <div className={searchBoxClass}>
+        <button className="search-box-submit button-clean">
+          <i className="icon-search" />
+        </button>
+        <input
+          type="search"
+          value={query}
+          className={inputClassName}
+          placeholder={translate('search_verb')}
+          onChange={this.handleInputChange}
+          autoComplete="off"
+        />
+        <span className="note spacer-left text-middle">
+          {translateWithParameters('select2.tooShort', 2)}
+        </span>
+      </div>
     );
   }
 }

server/sonar-web/src/main/js/apps/users/components/UsersSelectSearchOption.js

@@ -61,8 +61,7 @@ export default class UsersSelectSearchOption extends React.PureComponent {
         onMouseDown={this.handleMouseDown}
         onMouseEnter={this.handleMouseEnter}
         onMouseMove={this.handleMouseMove}
-        title={user.name}
-      >
+        title={user.name}>
         <div className="little-spacer-bottom little-spacer-top">
           <Avatar hash={user.avatar} email={user.email} size={AVATAR_SIZE} />
           <strong className="spacer-left">{user.login}</strong>