SONAR-8878 Split to components and containers

12 files changed, 121 insertions, 84 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
index cf9378ad610..f4f2614ac60 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
@@ -27,7 +27,7 @@ import ReliabilityFilter from '../filters/ReliabilityFilter';
 import SecurityFilter from '../filters/SecurityFilter';
 import MaintainabilityFilter from '../filters/MaintainabilityFilter';
 import LanguageFilter from '../filters/LanguageFilter';
-import SearchFilter from '../filters/SearchFilter';
+import SearchFilterContainer from '../filters/SearchFilterContainer';
 import { translate } from '../../../helpers/l10n';
 
 export default class PageSidebar extends React.PureComponent {
@@ -57,7 +57,7 @@ export default class PageSidebar extends React.PureComponent {
             )}
 
             <h3>{translate('filters')}</h3>
-            <SearchFilter
+            <SearchFilterContainer
                 query={this.props.query.search}
                 isFavorite={this.props.isFavorite}
                 organization={this.props.organization}/>
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
index e6bc17ee881..560af1eba08 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import FilterContainer from './FilterContainer';
+import { FilterContainer } from './containers';
 import SortingFilter from './SortingFilter';
 import CoverageRating from '../../../components/ui/CoverageRating';
 import { getCoverageRatingLabel, getCoverageRatingAverageValue } from '../../../helpers/ratings';
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
index d5faaccd712..ae1acc160ab 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import FilterContainer from './FilterContainer';
+import { FilterContainer } from './containers';
 import SortingFilter from './SortingFilter';
 import DuplicationsRating from '../../../components/ui/DuplicationsRating';
 import {
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
index 6330edaf39b..7d5e6c9ad26 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import FilterContainer from './FilterContainer';
+import { FilterContainer } from './containers';
 import SortingFilter from './SortingFilter';
 import Rating from '../../../components/ui/Rating';
 
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilter.js
index b1f45ee06b0..d7cdb3947c3 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilter.js
@@ -19,9 +19,11 @@
  */
 import React from 'react';
 import sortBy from 'lodash/sortBy';
-import FilterContainer from './FilterContainer';
-import LanguageFilterOption from './LanguageFilterOption';
-import LanguageFilterFooter from './LanguageFilterFooter';
+import {
+  FilterContainer,
+  LanguageFilterFooterContainer,
+  LanguageFilterOptionContainer
+} from './containers';
 
 export default class LanguageFilter extends React.PureComponent {
   static propTypes = {
@@ -33,7 +35,7 @@ export default class LanguageFilter extends React.PureComponent {
   property = 'languages';
 
   renderOption = option => {
-    return <LanguageFilterOption languageKey={option}/>;
+    return <LanguageFilterOptionContainer languageKey={option}/>;
   };
 
   getSortedOptions (facet) {
@@ -41,7 +43,7 @@ export default class LanguageFilter extends React.PureComponent {
   }
 
   renderFooter = () => (
-    <LanguageFilterFooter
+    <LanguageFilterFooterContainer
       property={this.property}
       query={this.props.query}
       isFavorite={this.props.isFavorite}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterFooter.js b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterFooter.js
index 21a09c110c0..12b8058bbea 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterFooter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterFooter.js
@@ -18,20 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 import Select from 'react-select';
 import difference from 'lodash/difference';
 import { getFilterUrl } from './utils';
-import { getProjectsAppFacetByProperty, getLanguages } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 
-class LanguageFilterFooter extends React.Component {
+export default class LanguageFilterFooter extends React.Component {
   static propTypes = {
     property: React.PropTypes.string.isRequired,
     query: React.PropTypes.object.isRequired,
-    isFavorite: React.PropTypes.bool,
-    organization: React.PropTypes.object,
     languages: React.PropTypes.object,
     value: React.PropTypes.any,
     facet: React.PropTypes.object
@@ -64,11 +59,3 @@ class LanguageFilterFooter extends React.Component {
     );
   }
 }
-
-const mapStateToProps = (state, ownProps) => ({
-  languages: getLanguages(state),
-  value: ownProps.query[ownProps.property],
-  facet: getProjectsAppFacetByProperty(state, ownProps.property)
-});
-
-export default connect(mapStateToProps)(withRouter(LanguageFilterFooter));
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterOption.js b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterOption.js
index 002a8f04ff0..ef940b2cf45 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterOption.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/LanguageFilterOption.js
@@ -17,12 +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.
  */
-import { connect } from 'react-redux';
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
-import { getLanguageByKey } from '../../../store/rootReducer';
 
-class LanguageFilterOption extends React.Component {
+export default class LanguageFilterOption extends React.Component {
   static propTypes = {
     languageKey: React.PropTypes.string.isRequired,
     language: React.PropTypes.object
@@ -35,9 +33,3 @@ class LanguageFilterOption extends React.Component {
     );
   }
 }
-
-const mapStateToProps = (state, ownProps) => ({
-  language: getLanguageByKey(state, ownProps.languageKey)
-});
-
-export default connect(mapStateToProps)(LanguageFilterOption);
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
index 62707a38591..abfff98dd47 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import FilterContainer from './FilterContainer';
+import { FilterContainer } from './containers';
 import Level from '../../../components/ui/Level';
 
 export default class QualityGateFilter extends React.PureComponent {
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SearchFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilter.js
index 8fe85b240f0..1bfd44d5e9f 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SearchFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilter.js
@@ -17,58 +17,42 @@
  * 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 { withRouter } from 'react-router';
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
-import { getFilterUrl } from './utils';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
-type Props = {
-  query?: string,
-  router: { push: (string) => void },
-  isFavorite?: boolean,
-  organization?: {}
-};
-
-type State = {
-  userQuery?: string
-};
-
-class SearchFilter extends React.PureComponent {
-  handleSearch: (string) => void;
-  props: Props;
-  state: State;
+export default class SearchFilter extends React.Component {
+  static propTypes = {
+    query: React.PropTypes.object.isRequired,
+    handleSearch: React.PropTypes.func.isRequired
+  }
 
-  constructor (props: Props) {
+  constructor (props) {
     super(props);
-    this.state = { userQuery: props.query };
-    this.handleSearch = debounce(this.handleSearch.bind(this), 250);
+    this.state = {
+      userQuery: props.query.search
+    };
   }
 
-  componentWillReceiveProps (nextProps: Props) {
-    if (this.props.query === this.state.userQuery && nextProps.query !== this.props.query) {
-      this.setState({ userQuery: nextProps.query || '' });
+  componentWillReceiveProps (nextProps) {
+    if (this.props.query.search === this.state.userQuery && nextProps.query.search !== this.props.query.search) {
+      this.setState({
+        userQuery: nextProps.query.search || ''
+      });
     }
   }
 
-  handleSearch (userQuery) {
-    const path = getFilterUrl(this.props, { search: userQuery || null });
-    this.props.router.push(path);
-  }
-
-  handleQueryChange (userQuery) {
-    this.setState({ userQuery });
-    if (!userQuery || userQuery.length >= 2) {
-      this.handleSearch(userQuery);
+  handleQueryChange = ({ target }) => {
+    this.setState({ userQuery: target.value });
+    if (!target.value || target.value.length >= 2) {
+      this.props.handleSearch(target.value);
     }
   }
 
   render () {
     const { userQuery } = this.state;
     const inputClassName = classNames('input-super-large', {
-      touched: userQuery && userQuery.length < 2
+      'touched': userQuery && userQuery.length < 2
     });
 
     return (
@@ -78,7 +62,7 @@ class SearchFilter extends React.PureComponent {
           value={userQuery || ''}
           className={inputClassName}
           placeholder={translate('projects.search')}
-          onChange={event => this.handleQueryChange(event.target.value)}
+          onChange={this.handleQueryChange}
           autoComplete="off"/>
         <span className="note spacer-left">
           {translateWithParameters('select2.tooShort', 2)}
@@ -87,5 +71,3 @@ class SearchFilter extends React.PureComponent {
     );
   }
 }
-
-export default withRouter(SearchFilter);
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/FilterContainer.js b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js
index 5a9655c9bfe..c65d92c2180 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/FilterContainer.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js
@@ -17,17 +17,36 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { connect } from 'react-redux';
+import React from 'react';
 import { withRouter } from 'react-router';
-import Filter from './Filter';
-import { getProjectsAppFacetByProperty, getProjectsAppMaxFacetValue } from '../../../store/rootReducer';
+import debounce from 'lodash/debounce';
+import { getFilterUrl } from './utils';
+import SearchFilter from './SearchFilter';
 
-const mapStateToProps = (state, ownProps) => ({
-  value: ownProps.query[ownProps.property],
-  facet: getProjectsAppFacetByProperty(state, ownProps.property),
-  maxFacetValue: getProjectsAppMaxFacetValue(state),
-  // override query value to avoid re-rendering
-  query: undefined
-});
+class SearchFilterContainer extends React.Component {
+  static propTypes = {
+    query: React.PropTypes.object.isRequired,
+    isFavorite: React.PropTypes.bool,
+    organization: React.PropTypes.object
+  }
 
-export default connect(mapStateToProps)(withRouter(Filter));
+  constructor (props) {
+    super(props);
+    this.handleSearch = debounce(this.handleSearch.bind(this), 250);
+  }
+
+  handleSearch (userQuery) {
+    const path = getFilterUrl(this.props, { search: userQuery || null });
+    this.props.router.push(path);
+  }
+
+  render () {
+    return (
+      <SearchFilter
+        query={this.props.query}
+        handleSearch={this.handleSearch}/>
+    );
+  }
+}
+
+export default withRouter(SearchFilterContainer);
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
index 53e081a4df0..be13a07fd13 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import FilterContainer from './FilterContainer';
+import { FilterContainer } from './containers';
 import SortingFilter from './SortingFilter';
 import SizeRating from '../../../components/ui/SizeRating';
 import { translate } from '../../../helpers/l10n';
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/containers.js b/server/sonar-web/src/main/js/apps/projects/filters/containers.js
new file mode 100644
index 00000000000..d9e76690138
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projects/filters/containers.js
@@ -0,0 +1,55 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 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 { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import Filter from './Filter';
+import LanguageFilterFooter from './LanguageFilterFooter';
+import LanguageFilterOption from './LanguageFilterOption';
+import {
+  getProjectsAppFacetByProperty,
+  getProjectsAppMaxFacetValue,
+  getLanguages,
+  getLanguageByKey
+} from '../../../store/rootReducer';
+
+export const FilterContainer = (function () {
+  const mapStateToProps = (state, ownProps) => ({
+    value: ownProps.query[ownProps.property],
+    facet: getProjectsAppFacetByProperty(state, ownProps.property),
+    maxFacetValue: getProjectsAppMaxFacetValue(state)
+  });
+  return connect(mapStateToProps)(withRouter(Filter));
+})();
+
+export const LanguageFilterFooterContainer = (function () {
+  const mapStateToProps = (state, ownProps) => ({
+    languages: getLanguages(state),
+    value: ownProps.query[ownProps.property],
+    facet: getProjectsAppFacetByProperty(state, ownProps.property)
+  });
+  return connect(mapStateToProps)(withRouter(LanguageFilterFooter));
+})();
+
+export const LanguageFilterOptionContainer = (function () {
+  const mapStateToProps = (state, ownProps) => ({
+    language: getLanguageByKey(state, ownProps.languageKey)
+  });
+  return connect(mapStateToProps)(LanguageFilterOption);
+})();