From 5ad1c512b2f8f3a07cfd72ca803c66d4c6c31988 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Tue, 23 May 2017 17:00:46 +0200
Subject: [PATCH] SONAR-9245 Hide the facets that are not related to the leak

---
 .../apps/projects/components/AllProjects.js   |   4 +-
 .../projects/components/FavoriteFilter.js     |  14 +-
 .../apps/projects/components/PageSidebar.js   | 141 +++++++-----------
 .../projects/components/PageSidebarOverall.js |  46 ++++++
 .../components/__tests__/PageSidebar-test.js  |  31 +++-
 .../__snapshots__/PageSidebar-test.js.snap    | 125 +++++++++++++++-
 6 files changed, 258 insertions(+), 103 deletions(-)
 create mode 100644 server/sonar-web/src/main/js/apps/projects/components/PageSidebarOverall.js

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
index 2dcc5720562..1c64c117f1f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
@@ -119,9 +119,11 @@ export default class AllProjects extends React.PureComponent {
               <div className="layout-page-side-inner">
                 <div className="layout-page-filters">
                   <PageSidebar
-                    query={query}
                     isFavorite={this.props.isFavorite}
                     organization={this.props.organization}
+                    query={query}
+                    view={view}
+                    visualization={visualization}
                   />
                 </div>
               </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
index 6c6669bd7d2..45ed4b6e8a8 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
@@ -23,7 +23,17 @@ import { IndexLink, Link } from 'react-router';
 import { translate } from '../../../helpers/l10n';
 import { saveAll, saveFavorite } from '../utils';
 
+type Props = {
+  user: {
+    isLoggedIn?: boolean
+  },
+  organization?: { key: string },
+  query: { [string]: string }
+};
+
 export default class FavoriteFilter extends React.PureComponent {
+  props: Props;
+
   handleSaveFavorite = () => {
     if (!this.props.organization) {
       saveFavorite();
@@ -54,7 +64,7 @@ export default class FavoriteFilter extends React.PureComponent {
         <div className="button-group">
           <Link
             id="favorite-projects"
-            to={pathnameForFavorite}
+            to={{ pathname: pathnameForFavorite, query: this.props.query }}
             className="button"
             activeClassName="button-active"
             onClick={this.handleSaveFavorite}>
@@ -62,7 +72,7 @@ export default class FavoriteFilter extends React.PureComponent {
           </Link>
           <IndexLink
             id="all-projects"
-            to={pathnameForAll}
+            to={{ pathname: pathnameForAll, query: this.props.query }}
             className="button"
             activeClassName="button-active"
             onClick={this.handleSaveAll}>
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 d102a9dcef4..b6ebb70b8e6 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
@@ -17,109 +17,68 @@
  * 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 { Link } from 'react-router';
 import FavoriteFilterContainer from './FavoriteFilterContainer';
-import CoverageFilter from '../filters/CoverageFilter';
-import DuplicationsFilter from '../filters/DuplicationsFilter';
-import SizeFilter from '../filters/SizeFilter';
+import LanguagesFilterContainer from '../filters/LanguagesFilterContainer';
+import PageSidebarOverall from './PageSidebarOverall';
 import QualityGateFilter from '../filters/QualityGateFilter';
-import ReliabilityFilter from '../filters/ReliabilityFilter';
-import SecurityFilter from '../filters/SecurityFilter';
-import MaintainabilityFilter from '../filters/MaintainabilityFilter';
-import TagsFilterContainer from '../filters/TagsFilterContainer';
 import SearchFilterContainer from '../filters/SearchFilterContainer';
-import LanguagesFilterContainer from '../filters/LanguagesFilterContainer';
+import TagsFilterContainer from '../filters/TagsFilterContainer';
 import { translate } from '../../../helpers/l10n';
 
-export default class PageSidebar extends React.PureComponent {
-  static propTypes = {
-    query: React.PropTypes.object.isRequired,
-    isFavorite: React.PropTypes.bool.isRequired,
-    organization: React.PropTypes.object
-  };
+type Props = {
+  isFavorite: boolean,
+  organization?: { key: string },
+  query: { [string]: string },
+  view: string,
+  visualization: string
+};
 
-  render() {
-    const { query } = this.props;
+export default function PageSidebar({
+  query,
+  isFavorite,
+  organization,
+  view,
+  visualization
+}: Props) {
+  const isFiltered = Object.keys(query)
+    .filter(key => key !== 'view' && key !== 'visualization')
+    .some(key => query[key] != null);
+  const isLeakView = view === 'leak';
+  const basePathName = organization ? `/organizations/${organization.key}/projects` : '/projects';
+  const pathname = basePathName + (isFavorite ? '/favorite' : '');
 
-    const isFiltered = Object.keys(query)
-      .filter(key => key !== 'view' && key !== 'visualization')
-      .some(key => query[key] != null);
+  let linkQuery: ?{ view: string, visualization?: string };
+  if (view !== 'overall') {
+    linkQuery = { view };
 
-    const basePathName = this.props.organization
-      ? `/organizations/${this.props.organization.key}/projects`
-      : '/projects';
-    const pathname = basePathName + (this.props.isFavorite ? '/favorite' : '');
-    const linkQuery = query.view === 'visualizations'
-      ? { view: query.view, visualization: query.visualization }
-      : undefined;
-
-    return (
-      <div>
-        <FavoriteFilterContainer organization={this.props.organization} />
+    if (view === 'visualizations') {
+      linkQuery.visualization = visualization;
+    }
+  }
 
-        <div className="projects-facets-header clearfix">
-          {isFiltered &&
-            <div className="projects-facets-reset">
-              <Link to={{ pathname, query: linkQuery }} className="button button-red">
-                {translate('clear_all_filters')}
-              </Link>
-            </div>}
+  return (
+    <div>
+      <FavoriteFilterContainer query={linkQuery} organization={organization} />
 
-          <h3>{translate('filters')}</h3>
-          <SearchFilterContainer
-            query={query}
-            isFavorite={this.props.isFavorite}
-            organization={this.props.organization}
-          />
-        </div>
+      <div className="projects-facets-header clearfix">
+        {isFiltered &&
+          <div className="projects-facets-reset">
+            <Link to={{ pathname, query: linkQuery }} className="button button-red">
+              {translate('clear_all_filters')}
+            </Link>
+          </div>}
 
-        <QualityGateFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <ReliabilityFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <SecurityFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <MaintainabilityFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <CoverageFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <DuplicationsFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <SizeFilter
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <LanguagesFilterContainer
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
-        <TagsFilterContainer
-          query={query}
-          isFavorite={this.props.isFavorite}
-          organization={this.props.organization}
-        />
+        <h3>{translate('filters')}</h3>
+        <SearchFilterContainer query={query} isFavorite={isFavorite} organization={organization} />
       </div>
-    );
-  }
+      <QualityGateFilter query={query} isFavorite={isFavorite} organization={organization} />
+      {!isLeakView &&
+        <PageSidebarOverall query={query} isFavorite={isFavorite} organization={organization} />}
+      <LanguagesFilterContainer query={query} isFavorite={isFavorite} organization={organization} />
+      <TagsFilterContainer query={query} isFavorite={isFavorite} organization={organization} />
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebarOverall.js b/server/sonar-web/src/main/js/apps/projects/components/PageSidebarOverall.js
new file mode 100644
index 00000000000..67e782ae469
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebarOverall.js
@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+//@flow
+import React from 'react';
+import CoverageFilter from '../filters/CoverageFilter';
+import DuplicationsFilter from '../filters/DuplicationsFilter';
+import SizeFilter from '../filters/SizeFilter';
+import ReliabilityFilter from '../filters/ReliabilityFilter';
+import SecurityFilter from '../filters/SecurityFilter';
+import MaintainabilityFilter from '../filters/MaintainabilityFilter';
+
+type Props = {
+  isFavorite: boolean,
+  organization?: { key: string },
+  query: { [string]: string }
+};
+
+export default function PageSidebarOverall({ query, isFavorite, organization }: Props) {
+  return (
+    <div>
+      <ReliabilityFilter query={query} isFavorite={isFavorite} organization={organization} />
+      <SecurityFilter query={query} isFavorite={isFavorite} organization={organization} />
+      <MaintainabilityFilter query={query} isFavorite={isFavorite} organization={organization} />
+      <CoverageFilter query={query} isFavorite={isFavorite} organization={organization} />
+      <DuplicationsFilter query={query} isFavorite={isFavorite} organization={organization} />
+      <SizeFilter query={query} isFavorite={isFavorite} organization={organization} />
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.js b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.js
index ff8d2e9a408..fd396c25efe 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.js
@@ -21,13 +21,30 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import PageSidebar from '../PageSidebar';
 
-it('should handle `view` and `visualization`', () => {
-  const query = {
-    view: 'visualizations',
-    visualization: 'bugs'
-  };
-  const sidebar = shallow(<PageSidebar query={query} isFavorite={false} />);
+it('should render correctly', () => {
+  const sidebar = shallow(
+    <PageSidebar query={{ size: '3' }} view="overall" visualization="risk" isFavorite={true} />
+  );
+  expect(sidebar).toMatchSnapshot();
+});
+
+it('should render `leak` view correctly', () => {
+  const sidebar = shallow(
+    <PageSidebar query={{ view: 'leak' }} view="leak" visualization="risk" isFavorite={false} />
+  );
+  expect(sidebar).toMatchSnapshot();
+});
+
+it('reset function should work correctly with view and visualizations', () => {
+  const sidebar = shallow(
+    <PageSidebar
+      query={{ view: 'visualizations', visualization: 'bugs' }}
+      view="visualizations"
+      visualization="bugs"
+      isFavorite={false}
+    />
+  );
   expect(sidebar.find('.projects-facets-reset')).toMatchSnapshot();
-  sidebar.setProps({ query: { ...query, size: '3' } });
+  sidebar.setProps({ query: { size: '3' } });
   expect(sidebar.find('.projects-facets-reset')).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap
index 2c203e41f6f..3bfd6952c23 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should handle \`view\` and \`visualization\` 1`] = `undefined`;
+exports[`reset function should work correctly with view and visualizations 1`] = `undefined`;
 
-exports[`should handle \`view\` and \`visualization\` 2`] = `
+exports[`reset function should work correctly with view and visualizations 2`] = `
 <div
   className="projects-facets-reset"
 >
@@ -24,3 +24,124 @@ exports[`should handle \`view\` and \`visualization\` 2`] = `
   </Link>
 </div>
 `;
+
+exports[`should render \`leak\` view correctly 1`] = `
+<div>
+  <Connect(FavoriteFilter)
+    query={
+      Object {
+        "view": "leak",
+      }
+    }
+  />
+  <div
+    className="projects-facets-header clearfix"
+  >
+    <h3>
+      filters
+    </h3>
+    <withRouter(SearchFilterContainer)
+      isFavorite={false}
+      query={
+        Object {
+          "view": "leak",
+        }
+      }
+    />
+  </div>
+  <QualityGateFilter
+    isFavorite={false}
+    query={
+      Object {
+        "view": "leak",
+      }
+    }
+  />
+  <Connect(withRouter(LanguagesFilter))
+    isFavorite={false}
+    query={
+      Object {
+        "view": "leak",
+      }
+    }
+  />
+  <Connect(withRouter(TagsFilter))
+    isFavorite={false}
+    query={
+      Object {
+        "view": "leak",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`should render correctly 1`] = `
+<div>
+  <Connect(FavoriteFilter) />
+  <div
+    className="projects-facets-header clearfix"
+  >
+    <div
+      className="projects-facets-reset"
+    >
+      <Link
+        className="button button-red"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to={
+          Object {
+            "pathname": "/projects/favorite",
+            "query": undefined,
+          }
+        }
+      >
+        clear_all_filters
+      </Link>
+    </div>
+    <h3>
+      filters
+    </h3>
+    <withRouter(SearchFilterContainer)
+      isFavorite={true}
+      query={
+        Object {
+          "size": "3",
+        }
+      }
+    />
+  </div>
+  <QualityGateFilter
+    isFavorite={true}
+    query={
+      Object {
+        "size": "3",
+      }
+    }
+  />
+  <PageSidebarOverall
+    isFavorite={true}
+    query={
+      Object {
+        "size": "3",
+      }
+    }
+  />
+  <Connect(withRouter(LanguagesFilter))
+    isFavorite={true}
+    query={
+      Object {
+        "size": "3",
+      }
+    }
+  />
+  <Connect(withRouter(TagsFilter))
+    isFavorite={true}
+    query={
+      Object {
+        "size": "3",
+      }
+    }
+  />
+</div>
+`;
-- 
2.39.5