SONAR-12089 Add active class for Issues page in global navigation

2 files changed, 6 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
index 20872eb4347..1c8b5f11448 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { Link } from 'react-router';
 import { translate } from '../../../../helpers/l10n';
-import { getQualityGatesUrl, getBaseUrl } from '../../../../helpers/urls';
+import { getQualityGatesUrl } from '../../../../helpers/urls';
 import { isMySet } from '../../../../apps/issues/utils';
 import Dropdown from '../../../../components/controls/Dropdown';
 import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
@@ -35,10 +35,6 @@ interface Props {
 }
 
 export default class GlobalNavMenu extends React.PureComponent<Props> {
-  activeLink(url: string) {
-    return window.location.pathname.indexOf(getBaseUrl() + url) === 0 ? 'active' : undefined;
-  }
-
   renderProjects() {
     if (isSonarCloud() && !isLoggedIn(this.props.currentUser)) {
       return null;
@@ -50,7 +46,7 @@ export default class GlobalNavMenu extends React.PureComponent<Props> {
 
     return (
       <li>
-        <Link activeClassName={classNames({ active })} to="/projects">
+        <Link className={classNames({ active })} to="/projects">
           {isSonarCloud() ? translate('my_projects') : translate('projects.page')}
         </Link>
       </li>
@@ -72,7 +68,7 @@ export default class GlobalNavMenu extends React.PureComponent<Props> {
       return null;
     }
 
-    const active = this.props.location.pathname === 'issues';
+    const active = this.props.location.pathname.startsWith('/issues');
 
     if (isSonarCloud()) {
       return (
@@ -102,7 +98,7 @@ export default class GlobalNavMenu extends React.PureComponent<Props> {
   renderRulesLink() {
     return (
       <li>
-        <Link className={this.activeLink('/coding_rules')} to="/coding_rules">
+        <Link activeClassName="active" to="/coding_rules">
           {translate('coding_rules.page')}
         </Link>
       </li>
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
index 74846968a23..e59e925873f 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`should show administration menu if the user has the rights 1`] = `
 >
   <li>
     <Link
-      activeClassName=""
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to="/projects"
@@ -33,6 +33,7 @@ exports[`should show administration menu if the user has the rights 1`] = `
   </li>
   <li>
     <Link
+      activeClassName="active"
       onlyActiveOnIndex={false}
       style={Object {}}
       to="/coding_rules"