implemented Breadcrumb ui-component

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

@@ -0,0 +1,44 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+
+type Props = {
+  path: string,
+  baseUrl: string
+};
+
+class Breadcrumb extends React.Component<Props> {
+  render() {
+    const { path, baseUrl } = this.props;
+
+    if (path) {
+      const paths = path.split("/");
+
+      return (
+        <nav className="breadcrumb" aria-label="breadcrumbs">
+          <ul>
+            {paths.map((path, index) => {
+              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 + "/" + path}>{path}</Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      );
+    }
+    return null;
+  }
+}
+
+export default 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,7 @@ 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 +94,7 @@ class Sources extends React.Component<Props> {
       return (
         <div className="panel">
           {this.renderBranchSelector()}
+          <Breadcrumb path={path} baseUrl={baseUrl} />
           <FileTree
             repository={repository}
             revision={revision}