Fixes NavLink highlighting

scm-ui-components/packages/ui-components/src/navigation/NavLink.js

@@ -7,7 +7,8 @@ import { Route, Link } from "react-router-dom";
 type Props = {
   to: string,
   label: string,
-  activeOnlyWhenExact?: boolean
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean
 };
 
 class NavLink extends React.Component<Props> {
@@ -15,11 +16,17 @@ class NavLink extends React.Component<Props> {
     activeOnlyWhenExact: true
   };
 
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
   renderLink = (route: any) => {
     const { to, label } = this.props;
     return (
       <li>
-        <Link className={route.match ? "is-active" : ""} to={to}>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
           {label}
         </Link>
       </li>

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -70,6 +70,12 @@ class RepositoryRoot extends React.Component<Props> {
     this.props.deleteRepo(repository, this.deleted);
   };
 
+  matches = (route: any) => {
+    const url = this.matchedUrl();
+    const regex = new RegExp(`${url}/?[a-zA-Z0-9_%]*/changesets?.*`);
+    return route.location.pathname.match(regex);
+  };
+
   render() {
     const { loading, error, repository, t } = this.props;
 
@@ -131,6 +137,7 @@ class RepositoryRoot extends React.Component<Props> {
                   activeOnlyWhenExact={false}
                   to={`${url}/changesets`}
                   label={t("repository-root.history")}
+                  activeWhenMatch={this.matches}
                 />
                 <EditNavLink repository={repository} editUrl={`${url}/edit`} />
               </Section>