Merged in feature/source_breadcrumb (pull request #276)

feature/source_breadcrumb

scm-ui-components/packages/ui-components/src/Breadcrumb.js

@@ -0,0 +1,61 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+
+type Props = {
+  revision: string,
+  path: string,
+  baseUrl: string,
+  classes: any
+};
+
+const styles = {
+  noMargin: {
+    margin: "0"
+  }
+};
+
+class Breadcrumb extends React.Component<Props> {
+  renderPath() {
+    const { revision, path, baseUrl } = this.props;
+
+    if (path) {
+      const paths = path.split("/");
+      const map = paths.map((path, index) => {
+        const currPath = paths.slice(0, index + 1).join("/");
+        if (paths.length - 1 === index) {
+          return (
+            <li className="is-active" key={index}>
+              <Link to={"#"} aria-current="page">
+                {path}
+              </Link>
+            </li>
+          );
+        }
+        return (
+          <li key={index}>
+            <Link to={baseUrl + "/" + revision + "/" + currPath}>{path}</Link>
+          </li>
+        );
+      });
+      return map;
+    }
+    return <li />;
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <>
+        <nav className="breadcrumb sources-breadcrumb" aria-label="breadcrumbs">
+          <ul>{this.renderPath()}</ul>
+        </nav>
+        <hr className={classes.noMargin} />
+      </>
+    );
+  }
+}
+
+export default injectSheet(styles)(Breadcrumb);

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

@@ -27,6 +27,7 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
+export { default as Breadcrumb } from "./Breadcrumb";
 export { default as MarkdownView } from "./MarkdownView";
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";
 export { default as ErrorBoundary } from "./ErrorBoundary";

scm-ui/src/repos/sources/containers/Sources.js

@@ -4,8 +4,12 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import type { Branch, Repository } from "@scm-manager/ui-types";
 import FileTree from "../components/FileTree";
-import { ErrorNotification, Loading } from "@scm-manager/ui-components";
-import BranchSelector from "../../../../../scm-ui-components/packages/ui-components/src/BranchSelector";
+import {
+  ErrorNotification,
+  Loading,
+  BranchSelector,
+  Breadcrumb
+} from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import {
   fetchBranches,
@@ -95,6 +99,7 @@ class Sources extends React.Component<Props> {
       return (
         <div className="panel">
           {this.renderBranchSelector()}
+          <Breadcrumb revision={revision} path={path} baseUrl={baseUrl} />
           <FileTree
             repository={repository}
             revision={revision}

scm-ui/styles/scm.scss

@@ -339,6 +339,16 @@ form .field:not(.is-grouped) {
   }
 }
 
+// sources breadcrumb
+.sources-breadcrumb {
+  margin: 1rem 1.25rem !important;
+
+  li:last-child:after {
+    color: #b5b5b5;
+    content: "\0002f";
+  }
+}
+
 // pagination
 .pagination-next,
 .pagination-link,