add home icon to breadcrumb

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

@@ -1,10 +1,12 @@
 //@flow
 import React from "react";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
-import type {Branch, Repository} from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
 import injectSheet from "react-jss";
-import {binder, ExtensionPoint} from "@scm-manager/ui-extensions";
 import classNames from "classnames";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { Branch, Repository } from "@scm-manager/ui-types";
+import Icon from "./Icon";
 
 type Props = {
   repository: Repository,
@@ -14,7 +16,10 @@ type Props = {
   revision: string,
   path: string,
   baseUrl: string,
-  classes: any
+
+  // Context props
+  classes: any,
+  t: string => string
 };
 
 const styles = {
@@ -45,7 +50,7 @@ class Breadcrumb extends React.Component<Props> {
         if (paths.length - 1 === index) {
           return (
             <li className="is-active" key={index}>
-              <Link to={"#"} aria-current="page">
+              <Link to="#" aria-current="page">
                 {path}
               </Link>
             </li>
@@ -59,19 +64,20 @@ class Breadcrumb extends React.Component<Props> {
       });
       return map;
     }
-    return <li />;
+    return null;
   }
 
   render() {
     const {
-      classes,
       baseUrl,
       branch,
       defaultBranch,
       branches,
       revision,
       path,
-      repository
+      repository,
+      classes,
+      t
     } = this.props;
 
     return (
@@ -84,7 +90,18 @@ class Breadcrumb extends React.Component<Props> {
             )}
             aria-label="breadcrumbs"
           >
-            <ul>{this.renderPath()}</ul>
+            <ul>
+              <li>
+                <Link to={baseUrl + "/" + revision + "/"}>
+                  <Icon
+                    title={t("breadcrumb.home")}
+                    name="home"
+                    color="inherit"
+                  />
+                </Link>
+              </li>
+              {this.renderPath()}
+            </ul>
           </nav>
           {binder.hasExtension("repos.sources.actionbar") && (
             <div className={classes.buttonGroup}>
@@ -112,4 +129,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-export default injectSheet(styles)(Breadcrumb);
+export default translate("commons")(injectSheet(styles)(Breadcrumb));

scm-ui/public/locales/de/commons.json

@@ -23,6 +23,9 @@
       "subtitle": "Ein unbekannter Fehler ist aufgetreten."
     }
   },
+  "breadcrumb": {
+    "home": "Hauptseite"
+  },
   "errorNotification": {
     "prefix": "Fehler",
     "loginLink": "Erneute Anmeldung",

scm-ui/public/locales/en/commons.json

@@ -24,6 +24,9 @@
       "subtitle": "Unknown error occurred"
     }
   },
+  "breadcrumb": {
+    "home": "Main page"
+  },
   "errorNotification": {
     "prefix": "Error",
     "loginLink": "You can login here again.",

scm-ui/public/locales/es/commons.json

@@ -24,6 +24,9 @@
       "subtitle": "Ha ocurrido un error desconocido"
     }
   },
+  "breadcrumb": {
+    "home": "Página principal"
+  },
   "errorNotification": {
     "prefix": "Error",
     "loginLink": "Aquí puede iniciar la sesión de nuevo.",