SONARCLOUD-77 Display correct empty project page

3 files changed, 41 insertions, 26 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index cbb5d82aa9b..7f436bc9535 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -35,7 +35,7 @@ import { get, save } from '../../../helpers/storage';
 import { RawQuery } from '../../../helpers/query';
 import { Project, Facets } from '../types';
 import { fetchProjects, parseSorting, SORTING_SWITCH } from '../utils';
-import { parseUrlQuery, Query } from '../query';
+import { parseUrlQuery, Query, hasFilterParams, hasVisualizationParams } from '../query';
 import { isSonarCloud } from '../../../helpers/system';
 import '../../../components/search-navigator.css';
 import '../styles.css';
@@ -109,9 +109,6 @@ export default class AllProjects extends React.PureComponent<Props, State> {
 
   getSort = () => this.state.query.sort || 'name';
 
-  isFiltered = (query = this.state.query) =>
-    Object.values(query).some(value => value !== undefined);
-
   stopLoading = () => {
     if (this.mounted) {
       this.setState({ loading: false });
@@ -216,8 +213,8 @@ export default class AllProjects extends React.PureComponent<Props, State> {
     const savedOptions = this.getStorageOptions();
     const savedOptionsSet = savedOptions.sort || savedOptions.view || savedOptions.visualization;
 
-    // if there is no filter, but there are saved preferences in the localStorage
-    if (initialMount && !this.isFiltered(query) && savedOptionsSet) {
+    // if there is no visualization parameters (sort, view, visualization), but there are saved preferences in the localStorage
+    if (initialMount && !hasVisualizationParams(query) && savedOptionsSet) {
       this.context.router.replace({ pathname: this.props.location.pathname, query: savedOptions });
     } else {
       this.fetchProjects(query);
@@ -299,7 +296,7 @@ export default class AllProjects extends React.PureComponent<Props, State> {
           <ProjectsList
             cardType={this.getView()}
             isFavorite={this.props.isFavorite}
-            isFiltered={this.isFiltered()}
+            isFiltered={hasFilterParams(this.state.query)}
             organization={this.props.organization}
             projects={this.state.projects}
             query={this.state.query}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
index ee18c10b09b..68876f9ab1d 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
@@ -39,6 +39,7 @@ import TagsFilter from '../filters/TagsFilter';
 import { translate } from '../../../helpers/l10n';
 import { RawQuery } from '../../../helpers/query';
 import { Facets } from '../types';
+import { hasFilterParams } from '../query';
 
 interface Props {
   facets?: Facets;
@@ -53,9 +54,7 @@ interface Props {
 
 export default function PageSidebar(props: Props) {
   const { facets, onQueryChange, query, organization, view, visualization } = props;
-  const isFiltered = Object.keys(query)
-    .filter(key => !['view', 'visualization', 'sort'].includes(key))
-    .some(key => query[key] != null);
+  const isFiltered = hasFilterParams(query);
   const isLeakView = view === 'leak';
   const maxFacetValue = getMaxFacetValue(facets);
   const facetProps = { onQueryChange, maxFacetValue, organization, query };
@@ -72,7 +71,7 @@ export default function PageSidebar(props: Props) {
   return (
     <div>
       {props.showFavoriteFilter && (
-        <FavoriteFilterContainer query={linkQuery} organization={organization} />
+        <FavoriteFilterContainer organization={organization} query={linkQuery} />
       )}
 
       <div className="projects-facets-header clearfix">
@@ -80,81 +79,85 @@ export default function PageSidebar(props: Props) {
 
         <h3>{translate('filters')}</h3>
       </div>
-      <QualityGateFilter {...facetProps} facet={facets && facets.gate} value={query.gate} />
+      <QualityGateFilter {...facetProps} facet={getFacet(facets, 'gate')} value={query.gate} />
       {!isLeakView && (
         <>
           <ReliabilityFilter
             {...facetProps}
-            facet={facets && facets.reliability}
+            facet={getFacet(facets, 'reliability')}
             value={query.reliability}
           />
           <SecurityFilter
             {...facetProps}
-            facet={facets && facets.security}
+            facet={getFacet(facets, 'security')}
             value={query.security}
           />
           <MaintainabilityFilter
             {...facetProps}
-            facet={facets && facets.maintainability}
+            facet={getFacet(facets, 'maintainability')}
             value={query.maintainability}
           />
           <CoverageFilter
             {...facetProps}
-            facet={facets && facets.coverage}
+            facet={getFacet(facets, 'coverage')}
             value={query.coverage}
           />
           <DuplicationsFilter
             {...facetProps}
-            facet={facets && facets.duplications}
+            facet={getFacet(facets, 'duplications')}
             value={query.duplications}
           />
-          <SizeFilter {...facetProps} facet={facets && facets.size} value={query.size} />
+          <SizeFilter {...facetProps} facet={getFacet(facets, 'size')} value={query.size} />
         </>
       )}
       {isLeakView && (
         <>
           <NewReliabilityFilter
             {...facetProps}
-            facet={facets && facets.new_reliability}
+            facet={getFacet(facets, 'new_reliability')}
             value={query.new_reliability}
           />
           <NewSecurityFilter
             {...facetProps}
-            facet={facets && facets.new_security}
+            facet={getFacet(facets, 'new_security')}
             value={query.new_security}
           />
           <NewMaintainabilityFilter
             {...facetProps}
-            facet={facets && facets.new_maintainability}
+            facet={getFacet(facets, 'new_maintainability')}
             value={query.new_maintainability}
           />
           <NewCoverageFilter
             {...facetProps}
-            facet={facets && facets.new_coverage}
+            facet={getFacet(facets, 'new_coverage')}
             value={query.new_coverage}
           />
           <NewDuplicationsFilter
             {...facetProps}
-            facet={facets && facets.new_duplications}
+            facet={getFacet(facets, 'new_duplications')}
             value={query.new_duplications}
           />
           <NewLinesFilter
             {...facetProps}
-            facet={facets && facets.new_lines}
+            facet={getFacet(facets, 'new_lines')}
             value={query.new_lines}
           />
         </>
       )}
       <LanguagesFilterContainer
         {...facetProps}
-        facet={facets && facets.languages}
+        facet={getFacet(facets, 'languages')}
         value={query.languages}
       />
-      <TagsFilter {...facetProps} facet={facets && facets.tags} value={query.tags} />
+      <TagsFilter {...facetProps} facet={getFacet(facets, 'tags')} value={query.tags} />
     </div>
   );
 }
 
+function getFacet(facets: Facets | undefined, name: string) {
+  return facets && facets[name];
+}
+
 function getMaxFacetValue(facets?: Facets) {
   return facets && Math.max(...flatMap(Object.values(facets), facet => Object.values(facet)));
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/query.ts b/server/sonar-web/src/main/js/apps/projects/query.ts
index 54cb473e714..ebe03ae2677 100644
--- a/server/sonar-web/src/main/js/apps/projects/query.ts
+++ b/server/sonar-web/src/main/js/apps/projects/query.ts
@@ -17,6 +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.
  */
+/* eslint-disable camelcase */
 import { VISUALIZATIONS } from './utils';
 import { RawQuery } from '../../helpers/query';
 
@@ -112,6 +113,20 @@ export function convertToFilter(query: Query, isFavorite: boolean): string {
   return conditions.join(' and ');
 }
 
+const visualizationParams = ['sort', 'view', 'visualization'];
+
+export function hasFilterParams(query: Query) {
+  return Object.keys(query)
+    .filter(key => !visualizationParams.includes(key))
+    .some(key => query[key] !== undefined);
+}
+
+export function hasVisualizationParams(query: Query) {
+  return Object.keys(query)
+    .filter(key => visualizationParams.includes(key))
+    .some(key => query[key] !== undefined);
+}
+
 function getAsNumericRating(value: any): number | undefined {
   if (value === '' || value == null || isNaN(value)) {
     return undefined;