Merged in feature/improved-navi (pull request #152)

Feature/improved navi

scm-ui-components/packages/ui-components/src/config/ConfigurationBinder.js

@@ -72,6 +72,33 @@ class ConfigurationBinder {
     binder.bind("repository.route", RepoRoute, repoPredicate);
   }
 
+  bindRepositorySetting(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
+
+    // create predicate based on the link name of the current repository route
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const repoPredicate = (props: Object) => {
+      return props.repository && props.repository._links && props.repository._links[linkName];
+    };
+
+    // create NavigationLink with translated label
+    const RepoNavLink = translate(this.i18nNamespace)(({t, url}) => {
+      return this.navLink(url + "/settings" + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind("repository.subnavigation", RepoNavLink, repoPredicate);
+
+
+    // route for global configuration, passes the current repository to component
+    const RepoRoute = ({url, repository, ...additionalProps}) => {
+      const link = repository._links[linkName].href;
+      return this.route(url + "/settings" + to, <RepositoryComponent repository={repository} link={link} {...additionalProps}/>);
+    };
+
+    // bind config route to extension point
+    binder.bind("repository.route", RepoRoute, repoPredicate);
+  }
+
 }
 
 export default new ConfigurationBinder();

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

@@ -28,7 +28,7 @@ class NavLink extends React.Component<Props> {
 
     let showIcon = null;
     if (icon) {
-      showIcon = (<><i className={icon}></i>{" "}</>);
+      showIcon = (<><i className={icon} />{" "}</>);
     }
 
     return (

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

@@ -0,0 +1,65 @@
+//@flow
+import * as React from "react";
+import { Link, Route } from "react-router-dom";
+
+type Props = {
+  to: string,
+  icon?: string,
+  label: string,
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean,
+  children?: React.Node
+};
+
+class SubNavigation extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: false
+  };
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
+  renderLink = (route: any) => {
+    const { to, icon, label } = this.props;
+
+    let defaultIcon = "fas fa-cog";
+    if (icon) {
+      defaultIcon = icon;
+    }
+
+    let children = null;
+    if (this.isActive(route)) {
+      children = <ul className="sub-menu">{this.props.children}</ul>;
+    }
+
+    return (
+      <li>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          <i className={defaultIcon} /> {label}
+        </Link>
+        {children}
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+
+    // removes last part of url
+    let parents = to.split("/");
+    parents.splice(-1, 1);
+    let parent = parents.join("/");
+
+    return (
+      <Route
+        path={parent}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+      />
+    );
+  }
+}
+
+export default SubNavigation;

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

@@ -3,6 +3,7 @@
 export { default as NavAction } from "./NavAction.js";
 export { default as NavLink } from "./NavLink.js";
 export { default as Navigation } from "./Navigation.js";
+export { default as SubNavigation } from "./SubNavigation.js";
 export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
 export { default as Section } from "./Section.js";

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js

@@ -25,7 +25,7 @@ class ChangesetDiff extends React.Component<Props> {
   render() {
     const { changeset, t } = this.props;
     if (!this.isDiffSupported(changeset)) {
-      return <Notification type="danger">{t("changesets.diff.not-supported")}</Notification>;
+      return <Notification type="danger">{t("changesets.changeset.diffNotSupported")}</Notification>;
     } else {
       const url = this.createUrl(changeset);
       return <LoadingDiff url={url} />;