SONAR-15702 Disable menu if some project in application is inaccessible

3 files changed, 577 insertions, 374 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
index 4130d4b855a..080edc8b4b4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
@@ -18,6 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
+import { LocationDescriptorObject } from 'history';
+import { omit } from 'lodash';
 import * as React from 'react';
 import { Link, LinkProps } from 'react-router';
 import Dropdown from '../../../../components/controls/Dropdown';
@@ -27,7 +29,7 @@ import BulletListIcon from '../../../../components/icons/BulletListIcon';
 import DropdownIcon from '../../../../components/icons/DropdownIcon';
 import NavBarTabs from '../../../../components/ui/NavBarTabs';
 import { getBranchLikeQuery, isPullRequest } from '../../../../helpers/branch-like';
-import { hasMessage, translate } from '../../../../helpers/l10n';
+import { hasMessage, translate, translateWithParameters } from '../../../../helpers/l10n';
 import { getPortfolioUrl, getProjectQueryUrl } from '../../../../helpers/urls';
 import { BranchLike, BranchParameters } from '../../../../types/branch-like';
 import { ComponentQualifier, isPortfolioLike } from '../../../../types/component';
@@ -62,22 +64,6 @@ interface Props {
 
 type Query = BranchParameters & { id: string };
 
-function MenuLink({
-  hasAnalysis,
-  label,
-  ...props
-}: LinkProps & { hasAnalysis: boolean; label: React.ReactNode }) {
-  return hasAnalysis ? (
-    <Link {...props}>{label}</Link>
-  ) : (
-    <Tooltip overlay={translate('layout.must_be_configured')}>
-      <a aria-disabled="true" className="disabled-link">
-        {label}
-      </a>
-    </Tooltip>
-  );
-}
-
 export class Menu extends React.PureComponent<Props> {
   hasAnalysis = () => {
     const { branchLikes = [], component, isInProgress, isPending } = this.props;
@@ -102,6 +88,14 @@ export class Menu extends React.PureComponent<Props> {
     return this.props.component.qualifier === ComponentQualifier.Application;
   };
 
+  isAllChildProjectAccessible = () => {
+    return Boolean(this.props.component.canBrowseAllChildProjects);
+  };
+
+  isApplicationChildInaccessble = () => {
+    return this.isApplication() && !this.isAllChildProjectAccessible();
+  };
+
   getConfiguration = () => {
     return this.props.component.configuration || {};
   };
@@ -110,103 +104,121 @@ export class Menu extends React.PureComponent<Props> {
     return { id: this.props.component.key, ...getBranchLikeQuery(this.props.branchLike) };
   };
 
-  renderDashboardLink = ({ id, ...branchLike }: Query, isPortfolio: boolean) => {
+  renderLinkWhenInaccessibleChild(label: React.ReactNode) {
+    return (
+      <li>
+        <Tooltip
+          overlay={translateWithParameters(
+            'layout.all_project_must_be_accessible',
+            translate('qualifier', this.props.component.qualifier)
+          )}>
+          <a aria-disabled="true" className="disabled-link">
+            {label}
+          </a>
+        </Tooltip>
+      </li>
+    );
+  }
+
+  renderMenuLink = ({
+    label,
+    to,
+    ...props
+  }: Omit<LinkProps, 'to'> & {
+    label: React.ReactNode;
+    to: LocationDescriptorObject;
+  }) => {
+    const hasAnalysis = this.hasAnalysis();
+    const isApplicationChildInaccessble = this.isApplicationChildInaccessble();
+    const query = this.getQuery();
+    if (isApplicationChildInaccessble) {
+      return this.renderLinkWhenInaccessibleChild(label);
+    }
+    return (
+      <li>
+        {hasAnalysis ? (
+          <Link to={{ ...to, query: { ...query, ...to.query } }} {...omit(props, ['to'])}>
+            {label}
+          </Link>
+        ) : (
+          <Tooltip overlay={translate('layout.must_be_configured')}>
+            <a aria-disabled="true" className="disabled-link">
+              {label}
+            </a>
+          </Tooltip>
+        )}
+      </li>
+    );
+  };
+
+  renderDashboardLink = () => {
+    const { id, ...branchLike } = this.getQuery();
+    const isApplicationChildInaccessble = this.isApplicationChildInaccessble();
+    if (isApplicationChildInaccessble) {
+      return this.renderLinkWhenInaccessibleChild(translate('overview.page'));
+    }
     return (
       <li>
         <Link
           activeClassName="active"
-          to={isPortfolio ? getPortfolioUrl(id) : getProjectQueryUrl(id, branchLike)}>
+          to={this.isPortfolio() ? getPortfolioUrl(id) : getProjectQueryUrl(id, branchLike)}>
           {translate('overview.page')}
         </Link>
       </li>
     );
   };
 
-  renderCodeLink = (
-    hasAnalysis: boolean,
-    query: Query,
-    isApplication: boolean,
-    isPortfolio: boolean
-  ) => {
+  renderCodeLink = () => {
+    const isPortfolio = this.isPortfolio();
+    const isApplication = this.isApplication();
+    const label =
+      isPortfolio || isApplication ? translate('view_projects.page') : translate('code.page');
     if (this.isDeveloper()) {
       return null;
     }
 
-    return (
-      <li>
-        <MenuLink
-          activeClassName="active"
-          hasAnalysis={hasAnalysis}
-          label={
-            isPortfolio || isApplication ? translate('view_projects.page') : translate('code.page')
-          }
-          to={{ pathname: '/code', query }}
-        />
-      </li>
-    );
+    return this.renderMenuLink({ label, to: { pathname: '/code' } });
   };
 
-  renderActivityLink = (hasAnalysis: boolean, query: Query) => {
+  renderActivityLink = () => {
     const { branchLike } = this.props;
 
     if (isPullRequest(branchLike)) {
       return null;
     }
 
-    return (
-      <li>
-        <MenuLink
-          activeClassName="active"
-          hasAnalysis={hasAnalysis}
-          label={translate('project_activity.page')}
-          to={{ pathname: '/project/activity', query }}
-        />
-      </li>
-    );
+    return this.renderMenuLink({
+      label: translate('project_activity.page'),
+      to: { pathname: '/project/activity' }
+    });
   };
 
-  renderIssuesLink = (hasAnalysis: boolean, query: Query) => {
-    return (
-      <li>
-        <MenuLink
-          activeClassName="active"
-          hasAnalysis={hasAnalysis}
-          label={translate('issues.page')}
-          to={{ pathname: '/project/issues', query: { ...query, resolved: 'false' } }}
-        />
-      </li>
-    );
+  renderIssuesLink = () => {
+    return this.renderMenuLink({
+      label: translate('issues.page'),
+      to: { pathname: '/project/issues', query: { resolved: 'false' } }
+    });
   };
 
-  renderComponentMeasuresLink = (hasAnalysis: boolean, query: Query) => {
-    return (
-      <li>
-        <MenuLink
-          activeClassName="active"
-          hasAnalysis={hasAnalysis}
-          label={translate('layout.measures')}
-          to={{ pathname: '/component_measures', query }}
-        />
-      </li>
-    );
+  renderComponentMeasuresLink = () => {
+    return this.renderMenuLink({
+      label: translate('layout.measures'),
+      to: { pathname: 'component_measures' }
+    });
   };
 
-  renderSecurityHotspotsLink = (hasAnalysis: boolean, query: Query, isPortfolio: boolean) => {
+  renderSecurityHotspotsLink = () => {
+    const isPortfolio = this.isPortfolio();
     return (
-      !isPortfolio && (
-        <li>
-          <MenuLink
-            activeClassName="active"
-            hasAnalysis={hasAnalysis}
-            label={translate('layout.security_hotspots')}
-            to={{ pathname: '/security_hotspots', query }}
-          />
-        </li>
-      )
+      !isPortfolio &&
+      this.renderMenuLink({
+        label: translate('layout.security_hotspots'),
+        to: { pathname: '/security_hotspots' }
+      })
     );
   };
 
-  renderSecurityReports = (hasAnalysis: boolean, query: Query) => {
+  renderSecurityReports = () => {
     const { branchLike, component } = this.props;
     const { extensions = [] } = component;
 
@@ -222,28 +234,18 @@ export class Menu extends React.PureComponent<Props> {
       return null;
     }
 
-    return (
-      <li>
-        <MenuLink
-          activeClassName="active"
-          hasAnalysis={hasAnalysis}
-          label={translate('layout.security_reports')}
-          to={{
-            pathname: '/project/extension/securityreport/securityreport',
-            query
-          }}
-        />
-      </li>
-    );
+    return this.renderMenuLink({
+      label: translate('layout.security_reports'),
+      to: { pathname: '/project/extension/securityreport/securityreport' }
+    });
   };
 
-  renderAdministration = (
-    query: Query,
-    isProject: boolean,
-    isApplication: boolean,
-    isPortfolio: boolean
-  ) => {
+  renderAdministration = () => {
     const { branchLike, component } = this.props;
+    const isProject = this.isProject();
+    const isPortfolio = this.isPortfolio();
+    const isApplication = this.isApplication();
+    const query = this.getQuery();
 
     if (!this.getConfiguration().showSettings || isPullRequest(branchLike)) {
       return null;
@@ -305,11 +307,20 @@ export class Menu extends React.PureComponent<Props> {
     ];
   };
 
-  renderProjectInformationButton = (isProject: boolean, isApplication: boolean) => {
+  renderProjectInformationButton = () => {
+    const isProject = this.isProject();
+    const isApplication = this.isApplication();
+    const label = translate(isProject ? 'project' : 'application', 'info.title');
+    const isApplicationChildInaccessble = this.isApplicationChildInaccessble();
+
     if (isPullRequest(this.props.branchLike)) {
       return null;
     }
 
+    if (isApplicationChildInaccessble) {
+      return this.renderLinkWhenInaccessibleChild(label);
+    }
+
     return (
       (isProject || isApplication) && (
         <li>
@@ -323,7 +334,7 @@ export class Menu extends React.PureComponent<Props> {
             role="button"
             tabIndex={0}>
             <BulletListIcon className="little-spacer-right" />
-            {translate(isProject ? 'project' : 'application', 'info.title')}
+            {label}
           </a>
         </li>
       )
@@ -550,7 +561,8 @@ export class Menu extends React.PureComponent<Props> {
       .map(e => this.renderExtension(e, true, query));
   };
 
-  renderExtensions = (query: Query) => {
+  renderExtensions = () => {
+    const query = this.getQuery();
     const extensions = this.props.component.extensions || [];
     const withoutSecurityExtension = extensions.filter(
       extension => !extension.key.startsWith('securityreport/')
@@ -587,26 +599,21 @@ export class Menu extends React.PureComponent<Props> {
   };
 
   render() {
-    const isProject = this.isProject();
-    const isApplication = this.isApplication();
-    const isPortfolio = this.isPortfolio();
-    const hasAnalysis = this.hasAnalysis();
-    const query = this.getQuery();
     return (
       <div className="display-flex-center display-flex-space-between">
         <NavBarTabs>
-          {this.renderDashboardLink(query, isPortfolio)}
-          {this.renderIssuesLink(hasAnalysis, query)}
-          {this.renderSecurityHotspotsLink(hasAnalysis, query, isPortfolio)}
-          {this.renderSecurityReports(hasAnalysis, query)}
-          {this.renderComponentMeasuresLink(hasAnalysis, query)}
-          {this.renderCodeLink(hasAnalysis, query, isApplication, isPortfolio)}
-          {this.renderActivityLink(hasAnalysis, query)}
-          {this.renderExtensions(query)}
+          {this.renderDashboardLink()}
+          {this.renderIssuesLink()}
+          {this.renderSecurityHotspotsLink()}
+          {this.renderSecurityReports()}
+          {this.renderComponentMeasuresLink()}
+          {this.renderCodeLink()}
+          {this.renderActivityLink()}
+          {this.renderExtensions()}
         </NavBarTabs>
         <NavBarTabs>
-          {this.renderAdministration(query, isProject, isApplication, isPortfolio)}
-          {this.renderProjectInformationButton(isProject, isApplication)}
+          {this.renderAdministration()}
+          {this.renderProjectInformationButton()}
         </NavBarTabs>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Menu-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Menu-test.tsx
index 7591d825abf..26fe69a3388 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Menu-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Menu-test.tsx
@@ -130,7 +130,12 @@ it('should work for all qualifiers', () => {
   expect.assertions(4);
 
   function checkWithQualifier(qualifier: string) {
-    const component = { ...baseComponent, configuration: { showSettings: true }, qualifier };
+    const component = {
+      ...baseComponent,
+      canBrowseAllChildProjects: true,
+      configuration: { showSettings: true },
+      qualifier
+    };
     expect(shallowRender({ component })).toMatchSnapshot();
   }
 });
@@ -146,6 +151,19 @@ it('should disable links if no analysis has been done', () => {
   ).toMatchSnapshot();
 });
 
+it('should disable links if application has inaccessible projects', () => {
+  expect(
+    shallowRender({
+      component: {
+        ...baseComponent,
+        qualifier: ComponentQualifier.Application,
+        canBrowseAllChildProjects: false,
+        configuration: { showSettings: true }
+      }
+    })
+  ).toMatchSnapshot();
+});
+
 function shallowRender(props: Partial<Menu['props']>) {
   return shallow<Menu>(
     <Menu
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Menu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Menu-test.tsx.snap
index 79f7a7b1acc..59c14e2a5b7 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Menu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Menu-test.tsx.snap
@@ -1,5 +1,163 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should disable links if application has inaccessible projects 1`] = `
+<div
+  className="display-flex-center display-flex-space-between"
+>
+  <NavBarTabs>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          overview.page
+        </a>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          issues.page
+        </a>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          layout.security_hotspots
+        </a>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          layout.measures
+        </a>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          view_projects.page
+        </a>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          project_activity.page
+        </a>
+      </Tooltip>
+    </li>
+  </NavBarTabs>
+  <NavBarTabs>
+    <Dropdown
+      data-test="administration"
+      overlay={
+        <ul
+          className="menu"
+        >
+          <li>
+            <Link
+              activeClassName="active"
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to={
+                Object {
+                  "pathname": "/application/console",
+                  "query": Object {
+                    "id": "foo",
+                  },
+                }
+              }
+            >
+              application_console.page
+            </Link>
+          </li>
+          <li>
+            <Link
+              activeClassName="active"
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to={
+                Object {
+                  "pathname": "/project/import_export",
+                  "query": Object {
+                    "id": "foo",
+                  },
+                }
+              }
+            >
+              project_dump.page
+            </Link>
+          </li>
+          <li>
+            <Link
+              activeClassName="active"
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to={
+                Object {
+                  "pathname": "/project/deletion",
+                  "query": Object {
+                    "id": "foo",
+                  },
+                }
+              }
+            >
+              deletion.page
+            </Link>
+          </li>
+        </ul>
+      }
+      tagName="li"
+    >
+      <Component />
+    </Dropdown>
+    <li>
+      <Tooltip
+        overlay="layout.all_project_must_be_accessible.qualifier.APP"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          application.info.title
+        </a>
+      </Tooltip>
+    </li>
+  </NavBarTabs>
+</div>
+`;
+
 exports[`should disable links if no analysis has been done 1`] = `
 <div
   className="display-flex-center display-flex-space-between"
@@ -23,80 +181,64 @@ exports[`should disable links if no analysis has been done 1`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={false}
-        label="issues.page"
-        to={
-          Object {
-            "pathname": "/project/issues",
-            "query": Object {
-              "id": "foo",
-              "resolved": "false",
-            },
-          }
-        }
-      />
+      <Tooltip
+        overlay="layout.must_be_configured"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          issues.page
+        </a>
+      </Tooltip>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={false}
-        label="layout.security_hotspots"
-        to={
-          Object {
-            "pathname": "/security_hotspots",
-            "query": Object {
-              "id": "foo",
-            },
-          }
-        }
-      />
+      <Tooltip
+        overlay="layout.must_be_configured"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          layout.security_hotspots
+        </a>
+      </Tooltip>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={false}
-        label="layout.measures"
-        to={
-          Object {
-            "pathname": "/component_measures",
-            "query": Object {
-              "id": "foo",
-            },
-          }
-        }
-      />
+      <Tooltip
+        overlay="layout.must_be_configured"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          layout.measures
+        </a>
+      </Tooltip>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={false}
-        label="code.page"
-        to={
-          Object {
-            "pathname": "/code",
-            "query": Object {
-              "id": "foo",
-            },
-          }
-        }
-      />
+      <Tooltip
+        overlay="layout.must_be_configured"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          code.page
+        </a>
+      </Tooltip>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={false}
-        label="project_activity.page"
-        to={
-          Object {
-            "pathname": "/project/activity",
-            "query": Object {
-              "id": "foo",
-            },
-          }
-        }
-      />
+      <Tooltip
+        overlay="layout.must_be_configured"
+      >
+        <a
+          aria-disabled="true"
+          className="disabled-link"
+        >
+          project_activity.page
+        </a>
+      </Tooltip>
     </li>
   </NavBarTabs>
   <NavBarTabs>
@@ -176,10 +318,9 @@ exports[`should work for a branch 1`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -190,13 +331,14 @@ exports[`should work for a branch 1`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -206,29 +348,31 @@ exports[`should work for a branch 1`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "branch": "release",
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="code.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -238,13 +382,14 @@ exports[`should work for a branch 1`] = `
             },
           }
         }
-      />
+      >
+        code.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -254,7 +399,9 @@ exports[`should work for a branch 1`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
     <Dropdown
       data-test="extensions"
@@ -450,10 +597,9 @@ exports[`should work for a branch 2`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -464,13 +610,14 @@ exports[`should work for a branch 2`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -480,29 +627,31 @@ exports[`should work for a branch 2`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "branch": "release",
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="code.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -512,13 +661,14 @@ exports[`should work for a branch 2`] = `
             },
           }
         }
-      />
+      >
+        code.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -528,7 +678,9 @@ exports[`should work for a branch 2`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
     <Dropdown
       data-test="extensions"
@@ -603,10 +755,9 @@ exports[`should work for all qualifiers 1`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -616,13 +767,14 @@ exports[`should work for all qualifiers 1`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -631,28 +783,30 @@ exports[`should work for all qualifiers 1`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="code.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -661,13 +815,14 @@ exports[`should work for all qualifiers 1`] = `
             },
           }
         }
-      />
+      >
+        code.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -676,7 +831,9 @@ exports[`should work for all qualifiers 1`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
   </NavBarTabs>
   <NavBarTabs>
@@ -834,10 +991,9 @@ exports[`should work for all qualifiers 2`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -847,28 +1003,30 @@ exports[`should work for all qualifiers 2`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="view_projects.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -877,13 +1035,14 @@ exports[`should work for all qualifiers 2`] = `
             },
           }
         }
-      />
+      >
+        view_projects.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -892,7 +1051,9 @@ exports[`should work for all qualifiers 2`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
   </NavBarTabs>
   <NavBarTabs>
@@ -969,10 +1130,9 @@ exports[`should work for all qualifiers 3`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -982,28 +1142,30 @@ exports[`should work for all qualifiers 3`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="view_projects.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -1012,13 +1174,14 @@ exports[`should work for all qualifiers 3`] = `
             },
           }
         }
-      />
+      >
+        view_projects.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -1027,7 +1190,9 @@ exports[`should work for all qualifiers 3`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
   </NavBarTabs>
   <NavBarTabs>
@@ -1087,10 +1252,9 @@ exports[`should work for all qualifiers 4`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -1100,13 +1264,14 @@ exports[`should work for all qualifiers 4`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -1115,28 +1280,30 @@ exports[`should work for all qualifiers 4`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="view_projects.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -1145,13 +1312,14 @@ exports[`should work for all qualifiers 4`] = `
             },
           }
         }
-      />
+      >
+        view_projects.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="project_activity.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/activity",
@@ -1160,7 +1328,9 @@ exports[`should work for all qualifiers 4`] = `
             },
           }
         }
-      />
+      >
+        project_activity.page
+      </Link>
     </li>
   </NavBarTabs>
   <NavBarTabs>
@@ -1268,10 +1438,9 @@ exports[`should work for pull requests 1`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -1282,13 +1451,14 @@ exports[`should work for pull requests 1`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -1298,29 +1468,31 @@ exports[`should work for pull requests 1`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
               "pullRequest": "1001",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="code.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -1330,7 +1502,9 @@ exports[`should work for pull requests 1`] = `
             },
           }
         }
-      />
+      >
+        code.page
+      </Link>
     </li>
     <Dropdown
       data-test="extensions"
@@ -1392,10 +1566,9 @@ exports[`should work for pull requests 2`] = `
       </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="issues.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/project/issues",
@@ -1406,13 +1579,14 @@ exports[`should work for pull requests 2`] = `
             },
           }
         }
-      />
+      >
+        issues.page
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.security_hotspots"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/security_hotspots",
@@ -1422,29 +1596,31 @@ exports[`should work for pull requests 2`] = `
             },
           }
         }
-      />
+      >
+        layout.security_hotspots
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="layout.measures"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
-            "pathname": "/component_measures",
+            "pathname": "component_measures",
             "query": Object {
               "id": "foo",
               "pullRequest": "1001",
             },
           }
         }
-      />
+      >
+        layout.measures
+      </Link>
     </li>
     <li>
-      <MenuLink
-        activeClassName="active"
-        hasAnalysis={true}
-        label="code.page"
+      <Link
+        onlyActiveOnIndex={false}
+        style={Object {}}
         to={
           Object {
             "pathname": "/code",
@@ -1454,7 +1630,9 @@ exports[`should work for pull requests 2`] = `
             },
           }
         }
-      />
+      >
+        code.page
+      </Link>
     </li>
     <Dropdown
       data-test="extensions"