@scm-manager/ui-components 2.28.0 → 2.28.1-20220005-140541

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.28.0",
+  "version": "2.28.1-20220005-140541",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.28.0",
+    "@scm-manager/ui-tests": "^2.28.1-20220005-140541",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -65,9 +65,9 @@
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.28.0",
-    "@scm-manager/ui-extensions": "^2.28.0",
-    "@scm-manager/ui-types": "^2.28.0",
+    "@scm-manager/ui-api": "^2.28.1-20220005-140541",
+    "@scm-manager/ui-extensions": "^2.28.1-20220005-140541",
+    "@scm-manager/ui-types": "^2.28.1-20220005-140541",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Breadcrumb.stories.tsx

@@ -49,8 +49,8 @@ const prefix = (
 );
 
 storiesOf("BreadCrumb", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .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}
+    />
   ));

package/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>

package/src/SyntaxHighlighter.stories.tsx

@@ -41,6 +41,9 @@ const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntrie
 
 storiesOf("SyntaxHighlighter", module)
   .addDecorator(RoutingDecorator)
+  // Add async parameter, because the tests needs to render async before snapshot is taken so that
+  // code fragments get highlighted properly
+  .addParameters({ storyshots: { async: true } })
   .add("Java", () => (
     <Spacing>
       <SyntaxHighlighter language="java" value={JavaHttpServer} />