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>

gradle/changelog/breadcrumb_not_clickable.yaml

@@ -0,0 +1,2 @@
+- type: Changed
+  description: Make "not clickable" mode for breadcrumb ([#1907](https://github.com/scm-manager/scm-manager/pull/1907))

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

@@ -49,8 +49,8 @@ const prefix = (
 );
 
 storiesOf("BreadCrumb", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <Breadcrumb
       repository={repository}
@@ -87,4 +87,17 @@ storiesOf("BreadCrumb", module)
       permalink={"/" + path}
       preButtons={prefix}
     />
+  ))
+  .add("Not clickable", () => (
+    <Breadcrumb
+      repository={repository}
+      defaultBranch={master}
+      branch={master}
+      path={path}
+      baseUrl={baseUrl}
+      sources={sources}
+      revision={"1"}
+      permalink={"/" + path}
+      clickable={false}
+    />
   ));

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">
+              <BreadcrumbNode clickable={clickable} text={decodedPathFragment} url="#" current={true} />
-                {decodeURIComponent(pathFragment)}
-              </Link>
             </li>
           );
         }
         return (
           <li key={index}>
-            <Link
+            <BreadcrumbNode
-              className="is-ellipsis-overflow"
+              clickable={clickable}
-              title={pathFragment}
+              text={decodedPathFragment}
-              to={baseUrl + "/" + encodeURIComponent(revision) + "/" + currPath}
+              url={baseUrl + "/" + encodeURIComponent(revision) + "/" + currPath}
-            >
+            />
-              {decodeURIComponent(pathFragment)}
-            </Link>
           </li>
         );
       });
@@ -196,9 +216,13 @@ const Breadcrumb: FC<Props> = ({
         {prefixButtons}
         <ul>
           <li>
+            {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>

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -132,6 +132,7 @@ exports[`Storyshots BreadCrumb Default 1`] = `
             className="is-ellipsis-overflow"
             href="/"
             onClick={[Function]}
+            title="cloudogu"
           >
             cloudogu
           </a>
@@ -290,6 +291,7 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
             className="is-ellipsis-overflow"
             href="/"
             onClick={[Function]}
+            title="SvnRepositoryServiceResolver.java"
           >
             SvnRepositoryServiceResolver.java
           </a>
@@ -324,6 +326,96 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
 </div>
 `;
 
+exports[`Storyshots BreadCrumb Not clickable 1`] = `
+<div
+  className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 exRctT"
+>
+  <div
+    className="is-flex is-justify-content-flex-end is-align-items-center"
+  >
+    <nav
+      aria-label="breadcrumbs"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+    >
+      <ul>
+        <li>
+          <i
+            className="fas fa-fw fa-home has-text-inherit mr-3"
+            onKeyPress={[Function]}
+          />
+        </li>
+        <li>
+          <span
+            className="is-ellipsis-overflow has-text-inherit px-3"
+            title="src"
+          >
+            src
+          </span>
+        </li>
+        <li>
+          <span
+            className="is-ellipsis-overflow has-text-inherit px-3"
+            title="main"
+          >
+            main
+          </span>
+        </li>
+        <li>
+          <span
+            className="is-ellipsis-overflow has-text-inherit px-3"
+            title="java"
+          >
+            java
+          </span>
+        </li>
+        <li>
+          <span
+            className="is-ellipsis-overflow has-text-inherit px-3"
+            title="com"
+          >
+            com
+          </span>
+        </li>
+        <li
+          className="is-active"
+        >
+          <span
+            className="is-ellipsis-overflow has-text-inherit px-3"
+            title="cloudogu"
+          >
+            cloudogu
+          </span>
+        </li>
+      </ul>
+      <span
+        className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 OWytj ml-1"
+        onKeyDown={[Function]}
+        tabIndex={0}
+      >
+        <span
+          aria-label="breadcrumb.copyPermalink"
+          className="tooltip has-tooltip-right"
+          data-tooltip="breadcrumb.copyPermalink"
+        >
+          <i
+            aria-label="breadcrumb.copyPermalink"
+            className="fas fa-fw fa-link has-text-inherit"
+            onClick={[Function]}
+            onKeyPress={[Function]}
+          />
+        </span>
+      </span>
+    </nav>
+    <div
+      className="Breadcrumb__ActionBar-zvtb4t-3 ffeyDa is-flex is-justify-content-flex-start is-align-self-center my-2"
+    />
+  </div>
+  <hr
+    className="m-0"
+  />
+</div>
+`;
+
 exports[`Storyshots BreadCrumb With prefix button 1`] = `
 <div
   className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 exRctT"
@@ -411,6 +503,7 @@ exports[`Storyshots BreadCrumb With prefix button 1`] = `
             className="is-ellipsis-overflow"
             href="/"
             onClick={[Function]}
+            title="cloudogu"
           >
             cloudogu
           </a>