rewrite rules app with react (#2982)

22 files changed, 54 insertions, 120 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.js b/server/sonar-web/src/main/js/apps/issues/components/App.js
index 4b9c092a275..81261fe01bf 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.js
@@ -24,7 +24,6 @@ import key from 'keymaster';
 import { keyBy, without } from 'lodash';
 import PropTypes from 'prop-types';
 import PageActions from './PageActions';
-import FiltersHeader from './FiltersHeader';
 import MyIssuesFilter from './MyIssuesFilter';
 import Sidebar from '../sidebar/Sidebar';
 import IssuesList from './IssuesList';
@@ -59,6 +58,7 @@ import handleRequiredAuthentication from '../../../app/utils/handleRequiredAuthe
 import { isLoggedIn } from '../../../app/types';
 import ListFooter from '../../../components/controls/ListFooter';
 import EmptySearch from '../../../components/common/EmptySearch';
+import FiltersHeader from '../../../components/common/FiltersHeader';
 import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper';
 import { getBranchName, isShortLivingBranch } from '../../../helpers/branches';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
index 6ac8ce8b88f..3d5fc68f37e 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
@@ -295,7 +295,6 @@ export default class BulkChangeModal extends React.PureComponent {
       <SearchSelect
         onSearch={this.handleAssigneeSearch}
         onSelect={this.handleAssigneeSelect}
-        minimumQueryLength={2}
         renderOption={this.renderAssigneeOption}
         resetOnBlur={false}
         value={this.state.assignee}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/FiltersHeader.js b/server/sonar-web/src/main/js/apps/issues/components/FiltersHeader.js
deleted file mode 100644
index c0f0e8b0998..00000000000
--- a/server/sonar-web/src/main/js/apps/issues/components/FiltersHeader.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// @flow
-import React from 'react';
-import { translate } from '../../../helpers/l10n';
-
-/*::
-type Props = {
-  displayReset: boolean,
-  onReset: () => void
-};
-*/
-
-export default class FiltersHeader extends React.PureComponent {
-  /*:: props: Props; */
-
-  handleResetClick = (e /*: Event & { currentTarget: HTMLElement } */) => {
-    e.preventDefault();
-    e.currentTarget.blur();
-    this.props.onReset();
-  };
-
-  render() {
-    return (
-      <div className="issues-filters-header">
-        {this.props.displayReset && (
-          <div className="pull-right">
-            <button className="button-red" onClick={this.handleResetClick}>
-              {translate('clear_all_filters')}
-            </button>
-          </div>
-        )}
-
-        <h3>{translate('filters')}</h3>
-      </div>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesCounter.js b/server/sonar-web/src/main/js/apps/issues/components/IssuesCounter.js
index ea4f6e3a3db..3af7ff5ffcd 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesCounter.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesCounter.js
@@ -19,6 +19,7 @@
  */
 // @flow
 import React from 'react';
+import PageCounter from '../../../components/common/PageCounter';
 import { translate } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 
@@ -30,19 +31,13 @@ type Props = {
 };
 */
 
-const IssuesCounter = (props /*: Props */) => (
-  <span className={props.className}>
-    <strong>
-      {props.current != null && (
-        <span>
-          {formatMeasure(props.current + 1, 'INT')}
-          {' / '}
-        </span>
-      )}
-      {formatMeasure(props.total, 'INT')}
-    </strong>{' '}
-    {translate('issues.issues')}
-  </span>
-);
-
-export default IssuesCounter;
+export default function IssuesCounter(props /*:Props*/) {
+  return (
+    <PageCounter
+      className="spacer-left flash flash-heavy"
+      current={props.current}
+      label={translate('issues.issues')}
+      total={props.total}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesContainer-test.js.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesContainer-test.js.snap
index 0af64820202..2d597c7ccae 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesContainer-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesContainer-test.js.snap
@@ -1,25 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`does not show current 1`] = `
-<span>
-  <strong>
-    987,654,321
-  </strong>
-   
-  issues.issues
-</span>
+<PageCounter
+  className="spacer-left flash flash-heavy"
+  current={null}
+  label="issues.issues"
+  total={987654321}
+/>
 `;
 
 exports[`formats numbers 1`] = `
-<span>
-  <strong>
-    <span>
-      1,235
-       / 
-    </span>
-    987,654,321
-  </strong>
-   
-  issues.issues
-</span>
+<PageCounter
+  className="spacer-left flash flash-heavy"
+  current={1234}
+  label="issues.issues"
+  total={987654321}
+/>
 `;
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.js
index ba1d3703588..f48516ee94f 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.js
@@ -195,7 +195,7 @@ export default class AssigneeFacet extends React.PureComponent {
 
   render() {
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/AuthorFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/AuthorFacet.js
index 1953d6c474b..734a9f23699 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/AuthorFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/AuthorFacet.js
@@ -95,7 +95,7 @@ export default class AuthorFacet extends React.PureComponent {
 
   render() {
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
index afa67153eb8..b3488fdb975 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
@@ -310,7 +310,7 @@ export default class CreationDateFacet extends React.PureComponent {
 
   render() {
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/DirectoryFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/DirectoryFacet.js
index 33151732404..83926732bf2 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/DirectoryFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/DirectoryFacet.js
@@ -111,7 +111,7 @@ export default class DirectoryFacet extends React.PureComponent {
   render() {
     const values = this.props.directories.map(dir => collapsePath(dir));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FacetMode.js b/server/sonar-web/src/main/js/apps/issues/sidebar/FacetMode.js
index 1358a64bfcf..893aaa22aa9 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/FacetMode.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/FacetMode.js
@@ -46,7 +46,7 @@ export default class FacetMode extends React.PureComponent {
     const modes = ['count', 'effort'];
 
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader name={translate('issues.facet.mode')} />
 
         <FacetItemsList>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FileFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/FileFacet.js
index ec8e9d5980c..9d2587536a3 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/FileFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/FileFacet.js
@@ -115,7 +115,7 @@ export default class FileFacet extends React.PureComponent {
   render() {
     const values = this.props.files.map(file => this.getFileName(file));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacet.js
index 369d97e2f4a..b7f8bf39d81 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacet.js
@@ -117,7 +117,7 @@ export default class LanguageFacet extends React.PureComponent {
   render() {
     const values = this.props.languages.map(language => this.getLanguageName(language));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ModuleFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/ModuleFacet.js
index c69d646a2cf..8a9a9a7cc8e 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ModuleFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ModuleFacet.js
@@ -113,7 +113,7 @@ export default class ModuleFacet extends React.PureComponent {
   render() {
     const values = this.props.modules.map(module => this.getModuleName(module));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.js
index f61aba20e70..e93c288fbfe 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.js
@@ -181,7 +181,7 @@ export default class ProjectFacet extends React.PureComponent {
   render() {
     const values = this.props.projects.map(project => this.getProjectName(project));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.js
index 3f996e04fb4..bd59288b278 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.js
@@ -108,7 +108,7 @@ export default class ResolutionFacet extends React.PureComponent {
     const values = this.props.resolutions.map(resolution => this.getFacetItemName(resolution));
 
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.js
index dd92faeaa57..daf05e65b58 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.js
@@ -35,6 +35,7 @@ type Props = {|
   languages: Array<string>,
   onChange: (changes: { [string]: Array<string> }) => void,
   onToggle: (property: string) => void,
+  organization: string | void;
   open: boolean,
   stats?: { [string]: number },
   referencedRules: { [string]: { name: string } },
@@ -68,10 +69,11 @@ export default class RuleFacet extends React.PureComponent {
   };
 
   handleSearch = (query /*: string */) => {
-    const { languages } = this.props;
+    const { languages, organization } = this.props;
     return searchRules({
       f: 'name,langName',
       languages: languages.length ? languages.join() : undefined,
+      organization,
       q: query
     }).then(response =>
       response.rules.map(rule => ({ label: `(${rule.langName}) ${rule.name}`, value: rule.key }))
@@ -129,7 +131,7 @@ export default class RuleFacet extends React.PureComponent {
   render() {
     const values = this.props.rules.map(rule => this.getRuleName(rule));
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.js
index 2353ea8d480..a1ec5af4071 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.js
@@ -92,7 +92,7 @@ export default class SeverityFacet extends React.PureComponent {
     const values = this.props.severities.map(severity => translate('severity', severity));
 
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.js b/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.js
index a512f09364e..af3f2f6a20c 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.js
@@ -127,6 +127,7 @@ export default class Sidebar extends React.PureComponent {
           languages={query.languages}
           onChange={this.props.onFilterChange}
           onToggle={this.props.onFacetToggle}
+          organization={this.props.organization && this.props.organization.key}
           open={!!openFacets.rules}
           stats={facets.rules}
           referencedRules={this.props.referencedRules}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.js
index 4bbb041ab49..d11062c7cc2 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.js
@@ -99,7 +99,7 @@ export default class StatusFacet extends React.PureComponent {
     const values = this.props.statuses.map(status => translate('issue.status', status));
 
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.js
index 51465f5a61b..e02ea9f64cb 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.js
@@ -95,7 +95,7 @@ export default class TypeFacet extends React.PureComponent {
     const values = this.props.types.map(type => translate('issue.type', type));
 
     return (
-      <FacetBox>
+      <FacetBox property={this.property}>
         <FacetHeader
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
index d384037257b..a0afcc2cf9a 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render 1`] = `
-<FacetBox>
+<FacetBox
+  property="assignees"
+>
   <FacetHeader
     name="issues.facet.assignees"
     onClear={[Function]}
@@ -71,7 +73,9 @@ exports[`should render footer select option 1`] = `
 `;
 
 exports[`should render without stats 1`] = `
-<FacetBox>
+<FacetBox
+  property="assignees"
+>
   <FacetHeader
     name="issues.facet.assignees"
     onClear={[Function]}
@@ -83,7 +87,9 @@ exports[`should render without stats 1`] = `
 `;
 
 exports[`should select unassigned 1`] = `
-<FacetBox>
+<FacetBox
+  property="assignees"
+>
   <FacetHeader
     name="issues.facet.assignees"
     onClear={[Function]}
@@ -145,7 +151,9 @@ exports[`should select unassigned 1`] = `
 `;
 
 exports[`should select user 1`] = `
-<FacetBox>
+<FacetBox
+  property="assignees"
+>
   <FacetHeader
     name="issues.facet.assignees"
     onClear={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css
index 61761cb4f37..e6ad09ee7ac 100644
--- a/server/sonar-web/src/main/js/apps/issues/styles.css
+++ b/server/sonar-web/src/main/js/apps/issues/styles.css
@@ -121,12 +121,6 @@
   border: none;
 }
 
-.issues-filters-header {
-  margin-bottom: 12px;
-  padding-bottom: 11px;
-  border-bottom: 1px solid var(--barBorderColor);
-}
-
 .issues-my-issues-filter {
   margin-bottom: 24px;
   text-align: center;
@@ -138,10 +132,6 @@
   text-align: right;
 }
 
-.issues .search-navigator-facet-footer {
-  padding: 0 0 10px 0;
-}
-
 .issues .issue-list {
   /* no math, just a good guess */
   min-width: 640px;