rewrite rules app with react (#2982)

16 files changed, 109 insertions, 149 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetBox.js b/server/sonar-web/src/main/js/components/facet/FacetBox.tsx
index dcc8268b65e..1db88a9a6d2 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetBox.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetBox.tsx
@@ -17,15 +17,21 @@
  * 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 * as React from 'react';
+import * as classNames from 'classnames';
 
-/*::
-type Props = {|
-  children?: React.Element<*>
-|};
-*/
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  property: string;
+}
 
-export default function FacetBox(props /*: Props */) {
-  return <div className="search-navigator-facet-box">{props.children}</div>;
+export default function FacetBox(props: Props) {
+  return (
+    <div
+      className={classNames('search-navigator-facet-box', props.className)}
+      data-property={props.property}>
+      {props.children}
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/facet/FacetFooter.js b/server/sonar-web/src/main/js/components/facet/FacetFooter.js
deleted file mode 100644
index 6e67ec9f302..00000000000
--- a/server/sonar-web/src/main/js/components/facet/FacetFooter.js
+++ /dev/null
@@ -1,47 +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 SearchSelect from '../controls/SearchSelect';
-
-/*::
-type Option = { label: string, value: string };
-*/
-
-/*::
-type Props = {|
-  minimumQueryLength?: number,
-  onSearch: (query: string) => Promise<Array<Option>>,
-  onSelect: (value: string) => void,
-  renderOption?: (option: Object) => React.Element<*>
-|};
-*/
-
-export default class FacetFooter extends React.PureComponent {
-  /*:: props: Props; */
-
-  render() {
-    return (
-      <div className="search-navigator-facet-footer">
-        <SearchSelect autofocus={false} {...this.props} />
-      </div>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/components/facet/FacetFooter.tsx b/server/sonar-web/src/main/js/components/facet/FacetFooter.tsx
new file mode 100644
index 00000000000..2f34ccf9fe0
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/facet/FacetFooter.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+import * as React from 'react';
+import SearchSelect from '../controls/SearchSelect';
+
+type Option = { label: string; value: string };
+
+interface Props {
+  minimumQueryLength?: number;
+  onSearch: (query: string) => Promise<Option[]>;
+  onSelect: (value: string) => void;
+  renderOption?: (option: Object) => JSX.Element;
+}
+
+export default function FacetFooter(props: Props) {
+  return (
+    <div className="search-navigator-facet-footer">
+      <SearchSelect autofocus={false} {...props} />
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.js b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index 8bda5f29d4b..cfe3f068bc4 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -17,32 +17,23 @@
  * 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 * as React from 'react';
 import OpenCloseIcon from '../icons-components/OpenCloseIcon';
 import HelpIcon from '../icons-components/HelpIcon';
 import Tooltip from '../controls/Tooltip';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 
-/*::
-type Props = {|
-  helper?: string,
-  name: string,
-  onClear?: () => void,
-  onClick?: () => void,
-  open: boolean,
-  values?: Array<string>
-|};
-*/
-
-export default class FacetHeader extends React.PureComponent {
-  /*:: props: Props; */
-
-  static defaultProps = {
-    open: true
-  };
+interface Props {
+  helper?: string;
+  name: string;
+  onClear?: () => void;
+  onClick?: () => void;
+  open: boolean;
+  values?: string[];
+}
 
-  handleClearClick = (event /*: Event & { currentTarget: HTMLElement } */) => {
+export default class FacetHeader extends React.PureComponent<Props> {
+  handleClearClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
     if (this.props.onClear) {
@@ -50,7 +41,7 @@ export default class FacetHeader extends React.PureComponent {
     }
   };
 
-  handleClick = (event /*: Event & { currentTarget: HTMLElement } */) => {
+  handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
     if (this.props.onClick) {
diff --git a/server/sonar-web/src/main/js/components/facet/FacetItem.js b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
index e4d97da0cd7..a960cb8af0e 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetItem.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
@@ -17,48 +17,45 @@
  * 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 classNames from 'classnames';
+import * as React from 'react';
+import * as classNames from 'classnames';
 
-/*::
-type Props = {|
-  active: boolean,
-  disabled: boolean,
-  halfWidth: boolean,
-  name: string | React.Element<*>,
-  onClick: string => void,
-  stat?: ?(string | React.Element<*>),
-  value: string
-|};
-*/
-
-export default class FacetItem extends React.PureComponent {
-  /*:: props: Props; */
+export interface Props {
+  active?: boolean;
+  className?: string;
+  disabled?: boolean;
+  halfWidth?: boolean;
+  name: React.ReactNode;
+  onClick: (x: string) => void;
+  stat?: React.ReactNode;
+  value: string;
+}
 
+export default class FacetItem extends React.PureComponent<Props> {
   static defaultProps = {
     disabled: false,
     halfWidth: false
   };
 
-  handleClick = (event /*: Event & { currentTarget: HTMLElement } */) => {
+  handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
+    event.currentTarget.blur();
     this.props.onClick(this.props.value);
   };
 
   render() {
-    const className = classNames('facet', 'search-navigator-facet', {
+    const className = classNames('facet', 'search-navigator-facet', this.props.className, {
       active: this.props.active,
       'search-navigator-facet-half': this.props.halfWidth
     });
 
     return this.props.disabled ? (
-      <span className={className}>
+      <span className={className} data-facet={this.props.value}>
         <span className="facet-name">{this.props.name}</span>
         {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
       </span>
     ) : (
-      <a className={className} href="#" onClick={this.handleClick}>
+      <a className={className} data-facet={this.props.value} href="#" onClick={this.handleClick}>
         <span className="facet-name">{this.props.name}</span>
         {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
       </a>
diff --git a/server/sonar-web/src/main/js/components/facet/FacetItemsList.js b/server/sonar-web/src/main/js/components/facet/FacetItemsList.tsx
index da8d2c8b303..3fa2bf5e86e 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetItemsList.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetItemsList.tsx
@@ -17,15 +17,12 @@
  * 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 * as React from 'react';
 
-/*::
-type Props = {|
-  children?: Array<React.Element<*>>
-|};
-*/
+interface Props {
+  children?: React.ReactNode;
+}
 
-export default function FacetItemsList(props /*: Props */) {
+export default function FacetItemsList(props: Props) {
   return <div className="search-navigator-facet-list">{props.children}</div>;
 }
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetBox-test.js b/server/sonar-web/src/main/js/components/facet/__tests__/FacetBox-test.tsx
index 005ecce2108..3595b342625 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetBox-test.js
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetBox-test.tsx
@@ -17,15 +17,14 @@
  * 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 * as React from 'react';
 import { shallow } from 'enzyme';
 import FacetBox from '../FacetBox';
 
 it('should render', () => {
   expect(
     shallow(
-      <FacetBox>
+      <FacetBox property="foo">
         <div />
       </FacetBox>
     )
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetFooter-test.js b/server/sonar-web/src/main/js/components/facet/__tests__/FacetFooter-test.tsx
index c287824ece9..ce1f6f4f43c 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetFooter-test.js
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetFooter-test.tsx
@@ -17,8 +17,7 @@
  * 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 * as React from 'react';
 import { shallow } from 'enzyme';
 import FacetFooter from '../FacetFooter';
 
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetHeader-test.js b/server/sonar-web/src/main/js/components/facet/__tests__/FacetHeader-test.tsx
index 7249c7cff4f..3a292e5f84b 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetHeader-test.js
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetHeader-test.tsx
@@ -17,11 +17,10 @@
  * 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 * as React from 'react';
 import { shallow } from 'enzyme';
-import { click } from '../../../helpers/testUtils';
 import FacetHeader from '../FacetHeader';
+import { click } from '../../../helpers/testUtils';
 
 it('should render open facet with value', () => {
   expect(
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.js b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
index b3cd9936b4e..e16c5020383 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.js
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
@@ -17,16 +17,10 @@
  * 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 * as React from 'react';
 import { shallow } from 'enzyme';
 import { click } from '../../../helpers/testUtils';
-import FacetItem from '../FacetItem';
-
-const renderFacetItem = (props /*: {} */) =>
-  shallow(
-    <FacetItem active={false} name="foo" onClick={jest.fn()} stat={null} value="bar" {...props} />
-  );
+import FacetItem, { Props } from '../FacetItem';
 
 it('should render active', () => {
   expect(renderFacetItem({ active: true })).toMatchSnapshot();
@@ -48,13 +42,15 @@ it('should render half width', () => {
   expect(renderFacetItem({ halfWidth: true })).toMatchSnapshot();
 });
 
-it('should render effort stat', () => {
-  expect(renderFacetItem({ facetMode: 'effort', stat: '1234' })).toMatchSnapshot();
-});
-
 it('should call onClick', () => {
   const onClick = jest.fn();
   const wrapper = renderFacetItem({ onClick });
-  click(wrapper, { currentTarget: { dataset: { value: 'bar' } } });
+  click(wrapper, { currentTarget: { blur() {}, dataset: { value: 'bar' } } });
   expect(onClick).toHaveBeenCalled();
 });
+
+function renderFacetItem(props?: Partial<Props>) {
+  return shallow(
+    <FacetItem active={false} name="foo" onClick={jest.fn()} stat={null} value="bar" {...props} />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItemsList-test.js b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItemsList-test.tsx
index ad6b3a53540..5bd2034349c 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItemsList-test.js
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItemsList-test.tsx
@@ -17,8 +17,7 @@
  * 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 * as React from 'react';
 import { shallow } from 'enzyme';
 import FacetItemsList from '../FacetItemsList';
 
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetBox-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetBox-test.tsx.snap
index e28d4538d46..317329065b1 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetBox-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetBox-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`should render 1`] = `
 <div
   className="search-navigator-facet-box"
+  data-property="foo"
 >
   <div />
 </div>
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetFooter-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetFooter-test.tsx.snap
index e57d0a002f6..3fab99c21a5 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetFooter-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetFooter-test.tsx.snap
@@ -6,7 +6,6 @@ exports[`should render 1`] = `
 >
   <SearchSelect
     autofocus={false}
-    minimumQueryLength={2}
     onSearch={[MockFunction]}
     onSelect={[MockFunction]}
     resetOnBlur={true}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
index dad6166c959..dad6166c959 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
index 6aff532c59f..c0cf80746aa 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`should render active 1`] = `
 <a
   className="facet search-navigator-facet active"
+  data-facet="bar"
   href="#"
   onClick={[Function]}
 >
@@ -17,6 +18,7 @@ exports[`should render active 1`] = `
 exports[`should render disabled 1`] = `
 <span
   className="facet search-navigator-facet"
+  data-facet="bar"
 >
   <span
     className="facet-name"
@@ -26,28 +28,10 @@ exports[`should render disabled 1`] = `
 </span>
 `;
 
-exports[`should render effort stat 1`] = `
-<a
-  className="facet search-navigator-facet"
-  href="#"
-  onClick={[Function]}
->
-  <span
-    className="facet-name"
-  >
-    foo
-  </span>
-  <span
-    className="facet-stat"
-  >
-    1234
-  </span>
-</a>
-`;
-
 exports[`should render half width 1`] = `
 <a
   className="facet search-navigator-facet search-navigator-facet-half"
+  data-facet="bar"
   href="#"
   onClick={[Function]}
 >
@@ -62,6 +46,7 @@ exports[`should render half width 1`] = `
 exports[`should render inactive 1`] = `
 <a
   className="facet search-navigator-facet"
+  data-facet="bar"
   href="#"
   onClick={[Function]}
 >
@@ -76,6 +61,7 @@ exports[`should render inactive 1`] = `
 exports[`should render stat 1`] = `
 <a
   className="facet search-navigator-facet"
+  data-facet="bar"
   href="#"
   onClick={[Function]}
 >
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItemsList-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItemsList-test.tsx.snap
index 9962cfc364e..9962cfc364e 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItemsList-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItemsList-test.tsx.snap