Add property to make breadcrumb not clickable (#1907)

Make breadcrumb not clickable with new property. This is useful to show the breadcrumb for path that does not exist yet.

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -37,6 +37,7 @@ type Props = {
   repository: Repository;
   branch?: Branch;
   defaultBranch?: Branch;
+  clickable?: boolean;
   revision: string;
   path: string;
   baseUrl: string;
@@ -115,6 +116,27 @@ const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
 `;
 
+const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; current?: boolean }> = ({
+  clickable,
+  text,
+  url,
+  current
+}) => {
+  if (clickable) {
+    return (
+      <Link className="is-ellipsis-overflow" title={text} to={url} aria-current={current ? "page" : undefined}>
+        {text}
+      </Link>
+    );
+  } else {
+    return (
+      <span className="is-ellipsis-overflow has-text-inherit px-3" title={text}>
+        {text}
+      </span>
+    );
+  }
+};
+
 const Breadcrumb: FC<Props> = ({
   repository,
   branch,
@@ -124,7 +146,8 @@ const Breadcrumb: FC<Props> = ({
   baseUrl,
   sources,
   permalink,
-  preButtons
+  preButtons,
+  clickable = true
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -135,6 +158,7 @@ const Breadcrumb: FC<Props> = ({
     if (path) {
       const paths = path.split("/");
       return paths.map((pathFragment, index) => {
+        const decodedPathFragment = decodeURIComponent(pathFragment);
         let currPath = paths
           .slice(0, index + 1)
           .map(encodeURIComponent)
@@ -145,21 +169,17 @@ const Breadcrumb: FC<Props> = ({
         if (paths.length - 1 === index) {
           return (
             <li className="is-active" key={index}>
-              <Link className="is-ellipsis-overflow" to="#" aria-current="page">
-                {decodeURIComponent(pathFragment)}
-              </Link>
+              <BreadcrumbNode clickable={clickable} text={decodedPathFragment} url="#" current={true} />
             </li>
           );
         }
         return (
           <li key={index}>
-            <Link
-              className="is-ellipsis-overflow"
-              title={pathFragment}
-              to={baseUrl + "/" + encodeURIComponent(revision) + "/" + currPath}
-            >
-              {decodeURIComponent(pathFragment)}
-            </Link>
+            <BreadcrumbNode
+              clickable={clickable}
+              text={decodedPathFragment}
+              url={baseUrl + "/" + encodeURIComponent(revision) + "/" + currPath}
+            />
           </li>
         );
       });
@@ -196,9 +216,13 @@ const Breadcrumb: FC<Props> = ({
         {prefixButtons}
         <ul>
           <li>
-            <Link to={homeUrl} aria-label={t("breadcrumb.home")}>
-              <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
-            </Link>
+            {clickable ? (
+              <Link to={homeUrl} aria-label={t("breadcrumb.home")}>
+                <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
+              </Link>
+            ) : (
+              <Icon name="home" color="inherit" className="mr-3" />
+            )}
           </li>
           {pathSection()}
         </ul>