Merge remote-tracking branch 'origin/develop' into feature/core_doku

CHANGELOG.md

@@ -5,11 +5,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Changed
+- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
+
+### Fixed
+- Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
+
+
+## 2.0.0-rc6 - 2020-03-26
 ### Added
 - Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))
 - Libc based restart strategy for posix operating systems ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
 - Simple restart strategy with System.exit ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
 - Notification if restart is not supported on the underlying platform ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
+- Extension point before title in repository cards ([#1080](https://github.com/scm-manager/scm-manager/pull/1080))
+- Extension point after title on repository detail page ([#1080](https://github.com/scm-manager/scm-manager/pull/1080))
 
 ### Changed
 - Update resteasy to version 4.5.2.Final

Jenkinsfile

@@ -48,7 +48,7 @@ node('docker') {
           sh "git -c user.name='CES Marvin' -c user.email='cesmarvin@cloudogu.com' commit -m 'release version ${releaseVersion}'"
 
           // we need to fetch all branches, so we can checkout master and develop later
-          sh "git config 'remote.origin.fetch +refs/heads/*:refs/remotes/origin/*'"
+          sh "git config 'remote.origin.fetch' '+refs/heads/*:refs/remotes/origin/*'"
           sh "git fetch --all"
 
           // merge release branch into master

docs/v2/release-process.md

@@ -7,7 +7,7 @@ To release a new version of SCM-Manager v2 you have to do the following steps (r
 Make sure you have no changes you want to keep!
 
 ```
-git fetch && git checkout default && git reset --hard origin/default
+git fetch && git checkout develop && git reset --hard origin/develop
 ```
 
 ## Modify Changelog
@@ -114,3 +114,7 @@ Edit `package.json`: `version` has to be set to the new development version.
 git commit -am "Prepare for next development iteration"
 git push origin develop
 ```
+## Attention: Creating new plugins
+If you are creating a new plugin which doesn't exist in the SCM-Manager Plugin-Center yet, your plugin will not be shown after the release. First you have to create a `index.md` in the Plugin-Center Repository. 
+
+Example: https://github.com/scm-manager/plugin-center/blob/master/src/plugins/scm-teamscale-plugin/index.md

pom.xml

@@ -494,7 +494,7 @@
         <plugin>
           <groupId>sonia.scm.maven</groupId>
           <artifactId>smp-maven-plugin</artifactId>
-          <version>1.0.0-rc4</version>
+          <version>1.0.0-rc5</version>
         </plugin>
 
         <plugin>
@@ -912,7 +912,7 @@
     <jaxrs.version>2.1.1</jaxrs.version>
     <resteasy.version>4.5.2.Final</resteasy.version>
     <jersey-client.version>1.19.4</jersey-client.version>
-    <jackson.version>2.10.2</jackson.version>
+    <jackson.version>2.10.3</jackson.version>
     <guice.version>4.2.2</guice.version>
     <jaxb.version>2.3.1</jaxb.version>
     <hibernate-validator.version>6.1.2.Final</hibernate-validator.version>
@@ -944,7 +944,7 @@
     <project.test.javaLevel>8</project.test.javaLevel>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <netbeans.hint.license>SCM-MIT</netbeans.hint.license>
-    <jdk.classifier />
+    <jdk.classifier/>
     <org.mapstruct.version>1.3.1.Final</org.mapstruct.version>
 
     <!-- Sonar exclusions -->

scm-annotation-processor/pom.xml

@@ -78,7 +78,7 @@
     <dependency>
       <groupId>org.kohsuke.metainf-services</groupId>
       <artifactId>metainf-services</artifactId>
-      <version>1.7</version>
+      <version>1.8</version>
     </dependency>
     
   </dependencies>

scm-core/src/main/java/sonia/scm/web/api/RepositoryToHalMapper.java

@@ -0,0 +1,45 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+package sonia.scm.web.api;
+
+import de.otto.edison.hal.HalRepresentation;
+import sonia.scm.repository.Repository;
+
+/**
+ * Maps a repository to a hal representation.
+ * This is especially useful if a plugin would deliver a repository to the frontend.
+ *
+ * @since 2.0.0
+ */
+public interface RepositoryToHalMapper {
+
+  /**
+   * Returns the hal representation of the repository.
+   *
+   * @param repository repository to map
+   * @return hal representation
+   */
+  HalRepresentation map(Repository repository);
+}

scm-core/src/main/java/sonia/scm/web/filter/PermissionFilter.java

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-    
+
 package sonia.scm.web.filter;
 
 import org.apache.shiro.SecurityUtils;
@@ -35,7 +35,7 @@ import sonia.scm.repository.Repository;
 import sonia.scm.repository.RepositoryPermissions;
 import sonia.scm.repository.spi.ScmProviderHttpServlet;
 import sonia.scm.repository.spi.ScmProviderHttpServletDecorator;
-import sonia.scm.security.Role;
+import sonia.scm.security.Authentications;
 import sonia.scm.security.ScmSecurityException;
 import sonia.scm.util.HttpUtil;
 
@@ -177,7 +177,7 @@ public abstract class PermissionFilter extends ScmProviderHttpServletDecorator
     HttpServletResponse response, Subject subject)
     throws IOException
   {
-    if (subject.hasRole(Role.USER))
+    if (!Authentications.isAuthenticatedSubjectAnonymous())
     {
       sendNotEnoughPrivilegesError(request, response);
     }

scm-core/src/test/java/sonia/scm/web/filter/PermissionFilterTest.java

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-    
+
 package sonia.scm.web.filter;
 
 import com.github.sdorra.shiro.ShiroRule;
@@ -82,6 +82,17 @@ public class PermissionFilterTest {
 
     permissionFilter.service(request, response, REPOSITORY);
 
+    verify(response).sendError(eq(403));
+    verify(delegateServlet, never()).service(request, response, REPOSITORY);
+  }
+
+  @Test
+  @SubjectAware(username = "_anonymous", password = "secret")
+  public void shouldBlockForAnonymousOnWriteRequestWithAuthenticationRequest() throws IOException, ServletException {
+    writeRequest = true;
+
+    permissionFilter.service(request, response, REPOSITORY);
+
     verify(response).sendError(eq(401), anyString());
     verify(delegateServlet, never()).service(request, response, REPOSITORY);
   }

scm-core/src/test/resources/sonia/scm/shiro.ini

@@ -4,6 +4,7 @@ admin = secret, admin
 writer = secret, repo_write
 reader = secret, repo_read
 unpriv = secret
+_anonymous = secret
 
 [roles]
 admin = *

scm-ui/tsconfig/tsconfig.json

@@ -59,6 +59,10 @@
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "lib": [
+      "dom",
+      "es2019"
+    ]
   }
 }

scm-ui/ui-components/.storybook/config.js

@@ -70,7 +70,4 @@ addDecorator(
   })
 );
 
-const RoutingDecorator = (story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
-addDecorator(RoutingDecorator);
-
 configure(require.context("../src", true, /\.stories\.tsx?$/), module);

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

@@ -27,7 +27,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 type Props = {
-  title: string;
+  title: ReactNode;
   description?: string;
   avatar: ReactNode;
   contentRight?: ReactNode;
@@ -99,9 +99,7 @@ export default class CardColumn extends React.Component<Props> {
           <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
             <div className="is-flex">
               <ContentLeft className="content">
-                <p className="shorten-text is-marginless">
+                <p className="shorten-text is-marginless">{title}</p>
-                  <strong>{title}</strong>
-                </p>
                 <p className="shorten-text">{description}</p>
               </ContentLeft>
               <ContentRight>{contentRight}</ContentRight>

scm-ui/ui-components/src/DateFromNow.test.ts

@@ -25,7 +25,6 @@
 import { chooseLocale, supportedLocales } from "./DateFromNow";
 
 describe("test choose locale", () => {
-
   it("should choose de", () => {
     const locale = chooseLocale("de_DE", ["de", "en"]);
     expect(locale).toBe(supportedLocales.de);
@@ -45,5 +44,4 @@ describe("test choose locale", () => {
     const locale = chooseLocale("af", ["af", "be"]);
     expect(locale).toBe(supportedLocales.en);
   });
-
 });

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

@@ -32,12 +32,14 @@ import MarkdownXmlCodeBlock from "./__resources__/markdown-xml-codeblock.md";
 import MarkdownInlineXml from "./__resources__/markdown-inline-xml.md";
 import Title from "./layout/Title";
 import { Subtitle } from "./layout";
+import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
 `;
 
 storiesOf("MarkdownView", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .addDecorator(story => <Spacing>{story()}</Spacing>)
   .add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
   .add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)

scm-ui/ui-components/src/__resources__/repository.ts

@@ -0,0 +1,67 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export default {
+  contact: "heart-of-gold@hitchhiher.com",
+  creationDate: "2020-03-23T08:26:01.164Z",
+  description: "The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive",
+  healthCheckFailures: [],
+  lastModified: "2020-03-23T08:26:01.876Z",
+  namespace: "hitchhiher",
+  name: "heartOfGold",
+  type: "git",
+  _links: {
+    self: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
+    delete: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
+    update: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
+    permissions: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/permissions/" },
+    protocol: [
+      { href: "ssh://scmadmin@localhost:4567/repo/scmadmin/Git", name: "ssh" },
+      { href: "http://localhost:8081/scm/repo/scmadmin/Git", name: "http" }
+    ],
+    tags: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/tags/" },
+    branches: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/branches/" },
+    incomingChangesets: {
+      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/changesets",
+      templated: true
+    },
+    incomingDiff: {
+      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/diff",
+      templated: true
+    },
+    incomingDiffParsed: {
+      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/diff/parsed",
+      templated: true
+    },
+    changesets: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/changesets/" },
+    sources: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/sources/" },
+    authorMappingConfig: {
+      href: "http://localhost:8081/scm/api/v2/authormapping/configuration/scmadmin/Git"
+    },
+    unfavorize: { href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/Git" },
+    favorites: [
+      { href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/Git", name: "unfavorize" },
+      { href: "http://localhost:8081/scm/api/v2/favorize/scmadmin/Git", name: "favorize" }
+    ]
+  }
+};

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

@@ -34188,6 +34188,684 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
 </div>
 `;
 
+exports[`Storyshots Navigation|Secondary Default 1`] = `
+<div
+  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
+>
+  <div
+    className="column is-3"
+  >
+    <aside
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
+    >
+      <div>
+        <p
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
+          onClick={[Function]}
+        >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
+            color="info"
+          >
+            <i
+              className="fas fa-caret-right"
+            />
+          </i>
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+          onClick={[Function]}
+        >
+          <li>
+            <a
+              className=""
+              href="/42"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+              Puzzle 42
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/heart-of-gold"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-star fa-fw"
+              />
+               
+              Heart Of Gold
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
+<div
+  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
+>
+  <div
+    className="column is-3"
+  >
+    <aside
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
+    >
+      <div>
+        <p
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
+          onClick={[Function]}
+        >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
+            color="info"
+          >
+            <i
+              className="fas fa-caret-right"
+            />
+          </i>
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+          onClick={[Function]}
+        >
+          <li>
+            <a
+              className=""
+              href="/42"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+              Puzzle 42
+            </a>
+          </li>
+          <li>
+            <a
+              className="is-active"
+              href="/hitchhiker/starships"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-cog fa-fw"
+              />
+               
+              Starships
+            </a>
+            <ul
+              className="sub-menu"
+            >
+              <li>
+                <a
+                  className=""
+                  href="/hitchhiker/starships/heart-of-gold"
+                  onClick={[Function]}
+                >
+                  <i
+                    className="fas fa-star fa-fw"
+                  />
+                   
+                  Heart Of Gold
+                </a>
+              </li>
+              <li>
+                <a
+                  className="is-active"
+                  href="/hitchhiker/starships/titanic"
+                  onClick={[Function]}
+                >
+                  Titanic
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
+<div
+  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
+>
+  <div
+    className="column is-3"
+  >
+    <aside
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
+    >
+      <div>
+        <p
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
+          onClick={[Function]}
+        >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
+            color="info"
+          >
+            <i
+              className="fas fa-caret-right"
+            />
+          </i>
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+          onClick={[Function]}
+        >
+          <li>
+            <a
+              className=""
+              href="/42"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+              Puzzle 42
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/hitchhiker/starships"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-cog fa-fw"
+              />
+               
+              Starships
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
+<div
+  className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
+>
+  <a
+    className="overlay-column"
+    href="/repo/hitchhiher/heartOfGold"
+    onClick={[Function]}
+  />
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <figure
+      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
+    >
+      <p
+        className="image is-64x64"
+      >
+        <img
+          alt="Logo"
+          src="test-file-stub"
+        />
+      </p>
+    </figure>
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+             
+            <strong>
+              heartOfGold
+            </strong>
+          </p>
+          <p
+            className="shorten-text"
+          >
+            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
+          </p>
+        </div>
+        <div
+          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
+        />
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="level-left is-hidden-mobile"
+        >
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/branches"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code-branch has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/changesets/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-exchange-alt has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/sources/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/settings/general"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-cog has-text-inherit fa-lg"
+            />
+          </a>
+        </div>
+        <div
+          className="level-right is-mobile is-marginless"
+        >
+          <small
+            className="level-item"
+          >
+            <time
+              className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
+              title="2020-03-23 09:26:01"
+            >
+              3 days ago
+            </time>
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
+<div
+  className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
+>
+  <a
+    className="overlay-column"
+    href="/repo/hitchhiher/heartOfGold"
+    onClick={[Function]}
+  />
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <figure
+      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
+    >
+      <p
+        className="image is-64x64"
+      >
+        <img
+          alt="Logo"
+          src="/images/blib.jpg"
+        />
+      </p>
+    </figure>
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+            <i
+              className="fas fa-star"
+            />
+             
+            <strong>
+              heartOfGold
+            </strong>
+          </p>
+          <p
+            className="shorten-text"
+          >
+            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
+          </p>
+        </div>
+        <div
+          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
+        />
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="level-left is-hidden-mobile"
+        >
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/branches"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code-branch has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/changesets/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-exchange-alt has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/sources/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/settings/general"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-cog has-text-inherit fa-lg"
+            />
+          </a>
+        </div>
+        <div
+          className="level-right is-mobile is-marginless"
+        >
+          <small
+            className="level-item"
+          >
+            <time
+              className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
+              title="2020-03-23 09:26:01"
+            >
+              3 days ago
+            </time>
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Storyshots RepositoryEntry Default 1`] = `
+<div
+  className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
+>
+  <a
+    className="overlay-column"
+    href="/repo/hitchhiher/heartOfGold"
+    onClick={[Function]}
+  />
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <figure
+      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
+    >
+      <p
+        className="image is-64x64"
+      >
+        <img
+          alt="Logo"
+          src="/images/blib.jpg"
+        />
+      </p>
+    </figure>
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+             
+            <strong>
+              heartOfGold
+            </strong>
+          </p>
+          <p
+            className="shorten-text"
+          >
+            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
+          </p>
+        </div>
+        <div
+          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
+        />
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="level-left is-hidden-mobile"
+        >
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/branches"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code-branch has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/changesets/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-exchange-alt has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/sources/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/settings/general"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-cog has-text-inherit fa-lg"
+            />
+          </a>
+        </div>
+        <div
+          className="level-right is-mobile is-marginless"
+        >
+          <small
+            className="level-item"
+          >
+            <time
+              className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
+              title="2020-03-23 09:26:01"
+            >
+              3 days ago
+            </time>
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
+<div
+  className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
+>
+  <a
+    className="overlay-column"
+    href="/repo/hitchhiher/heartOfGold"
+    onClick={[Function]}
+  />
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <figure
+      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
+    >
+      <p
+        className="image is-64x64"
+      >
+        <img
+          alt="Logo"
+          src="/images/blib.jpg"
+        />
+      </p>
+    </figure>
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+             
+            <strong>
+              heartOfGold
+            </strong>
+          </p>
+          <p
+            className="shorten-text"
+          >
+            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
+          </p>
+        </div>
+        <div
+          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
+        />
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="level-left is-hidden-mobile"
+        >
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/branches"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code-branch has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/changesets/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-exchange-alt has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/code/sources/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-code has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="level-item"
+          >
+            <i
+              className="fas fa-fas fa-code-branch fa-rotate-180 fa-fw has-text-inherit fa-lg"
+            />
+          </a>
+          <a
+            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
+            href="/repo/hitchhiher/heartOfGold/settings/general"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-cog has-text-inherit fa-lg"
+            />
+          </a>
+        </div>
+        <div
+          className="level-right is-mobile is-marginless"
+        >
+          <small
+            className="level-item"
+          >
+            <time
+              className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
+              title="2020-03-23 09:26:01"
+            >
+              3 days ago
+            </time>
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
 exports[`Storyshots SyntaxHighlighter Go 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 eofOgh"

scm-ui/ui-components/src/buttons/index.stories.tsx

@@ -32,6 +32,7 @@ import DownloadButton from "./DownloadButton";
 import EditButton from "./EditButton";
 import SubmitButton from "./SubmitButton";
 import { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
 
 const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
 
@@ -40,8 +41,10 @@ const Spacing = styled.div`
 `;
 
 const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
+const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
 
 storiesOf("Buttons|Button", module)
+  .addDecorator(RoutingDecorator)
   .add("Colors", () => (
     <div>
       {colors.map(color => (
@@ -70,6 +73,7 @@ storiesOf("Buttons|Button", module)
 
 const buttonStory = (name: string, storyFn: () => ReactElement) => {
   return storiesOf("Buttons|" + name, module)
+    .addDecorator(RoutingDecorator)
     .addDecorator(SpacingDecorator)
     .add("Default", storyFn);
 };

scm-ui/ui-components/src/forms/Checkbox.stories.tsx

@@ -42,4 +42,3 @@ storiesOf("Forms|Checkbox", module)
       <Checkbox label="Checked but disabled" checked={true} disabled={true} />
     </Spacing>
   ));
-

scm-ui/ui-components/src/forms/Checkbox.tsx

@@ -54,7 +54,7 @@ export default class Checkbox extends React.Component<Props> {
     if (title) {
       return <LabelWithHelpIcon label={title} helpText={helpText} />;
     }
-  }
+  };
 
   render() {
     const { label, checked, disabled } = this.props;
@@ -68,13 +68,7 @@ export default class Checkbox extends React.Component<Props> {
             but bulma does.
             // @ts-ignore */}
           <label className="checkbox" disabled={disabled}>
-            <input
+            <input type="checkbox" checked={checked} onChange={this.onCheckboxChange} disabled={disabled} /> {label}
-              type="checkbox"
-              checked={checked}
-              onChange={this.onCheckboxChange}
-              disabled={disabled}
-            />{" "}
-            {label}
             {this.renderHelp()}
           </label>
         </div>

scm-ui/ui-components/src/forms/Radio.tsx

@@ -25,7 +25,6 @@ import React, { ChangeEvent } from "react";
 import { Help } from "../index";
 import styled from "styled-components";
 
-
 const StyledRadio = styled.label`
   margin-right: 0.5em;
 `;

scm-ui/ui-components/src/forms/Textarea.stories.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Textarea from "./Textarea";

scm-ui/ui-components/src/layout/Footer.stories.tsx

@@ -33,6 +33,7 @@ import hitchhiker from "../__resources__/hitchhiker.png";
 import marvin from "../__resources__/marvin.jpg";
 import NavLink from "../navigation/NavLink";
 import ExternalLink from "../navigation/ExternalLink";
+import { MemoryRouter } from "react-router-dom";
 
 const trillian: Me = {
   name: "trillian",
@@ -64,6 +65,7 @@ const withBinder = (binder: Binder) => {
 };
 
 storiesOf("Layout|Footer", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => {
     return <Footer me={trillian} version="2.0.0" links={{}} />;
   })

scm-ui/ui-components/src/layout/Page.tsx

@@ -33,6 +33,7 @@ import ErrorBoundary from "../ErrorBoundary";
 
 type Props = {
   title?: string;
+  afterTitle?: ReactNode;
   subtitle?: string;
   loading?: boolean;
   error?: Error;
@@ -50,6 +51,15 @@ const PageActionContainer = styled.div`
   }
 `;
 
+const MarginLeft = styled.div`
+  margin-left: 0.5rem;
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
 export default class Page extends React.Component<Props> {
   componentDidUpdate() {
     const { title } = this.props;
@@ -80,7 +90,7 @@ export default class Page extends React.Component<Props> {
   }
 
   renderPageHeader() {
-    const { error, title, subtitle, children } = this.props;
+    const { error, title, afterTitle, subtitle, children } = this.props;
 
     let pageActions = null;
     let pageActionsExists = false;
@@ -104,7 +114,9 @@ export default class Page extends React.Component<Props> {
       <>
         <div className="columns">
           <div className="column">
-            <Title title={title} />
+            <FlexContainer>
+              <Title title={title} /> {afterTitle && <MarginLeft>{afterTitle}</MarginLeft>}
+            </FlexContainer>
             <Subtitle subtitle={subtitle} />
           </div>
           {pageActions}

scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx

@@ -21,13 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
-
+import useMenuContext from "../navigation/MenuContext";
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
 
 const PrimaryColumn = styled.div<{ collapsed: boolean }>`
   /* This is the counterpart to the specific column in SecondaryNavigationColumn. */
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-export default class PrimaryContentColumn extends React.Component<Props> {
+const PrimaryContentColumn: FC = ({ children }) => {
-  static defaultProps = {
+  const context = useMenuContext();
-    collapsed: false
+  return (
-  };
+    <PrimaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </PrimaryColumn>
+  );
+};
 
-  render() {
+export default PrimaryContentColumn;
-    const { children, collapsed } = this.props;
-
-    return (
-      <PrimaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </PrimaryColumn>
-    );
-  }
-}

scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx

@@ -21,13 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
-
+import useMenuContext from "../navigation/MenuContext";
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
 
 const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   /* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size. 
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-export default class SecondaryNavigationColumn extends React.Component<Props> {
+const SecondaryNavigationColumn: FC = ({ children }) => {
-  static defaultProps = {
+  const context = useMenuContext();
-    collapsed: false
+  return (
-  };
+    <SecondaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </SecondaryColumn>
+  );
+};
 
-  render() {
+export default SecondaryNavigationColumn;
-    const { children, collapsed } = this.props;
-
-    return (
-      <SecondaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </SecondaryColumn>
-    );
-  }
-}

scm-ui/ui-components/src/layout/Title.tsx

@@ -40,7 +40,7 @@ const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle,
         document.title = title;
       }
     }
-  },[title, preventRefreshingPageTitle, customPageTitle]);
+  }, [title, preventRefreshingPageTitle, customPageTitle]);
 
   if (title) {
     return <h1 className={classNames("title", className)}>{title}</h1>;

scm-ui/ui-components/src/layout/index.ts

@@ -34,4 +34,3 @@ export { default as Title } from "./Title";
 export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
 export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
 export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";
-

scm-ui/ui-components/src/modals/ConfirmAlert.tsx

@@ -62,7 +62,11 @@ class ConfirmAlert extends React.Component<Props> {
       <div className="field is-grouped">
         {buttons.map((button, i) => (
           <p className="control">
-            <a className={classNames("button", "is-info", button.className)} key={i} onClick={() => this.handleClickButton(button)}>
+            <a
+              className={classNames("button", "is-info", button.className)}
+              key={i}
+              onClick={() => this.handleClickButton(button)}
+            >
               {button.label}
             </a>
           </p>

scm-ui/ui-components/src/navigation/ExternalLink.tsx

@@ -30,6 +30,8 @@ type Props = {
   label: string;
 };
 
+// TODO is it used in the menu? should it use MenuContext for collapse state?
+
 const ExternalLink: FC<Props> = ({ to, icon, label }) => {
   let showIcon;
   if (icon) {

scm-ui/ui-components/src/navigation/MenuContext.tsx

@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useContext, useState } from "react";
+
+export type MenuContext = {
+  isCollapsed: () => boolean;
+  setCollapsed: (collapsed: boolean) => void;
+};
+
+export const MenuContext = React.createContext<MenuContext>({
+  isCollapsed() {
+    return false;
+  },
+  setCollapsed() {}
+});
+
+export const StateMenuContextProvider: FC = ({ children }) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const context = {
+    isCollapsed() {
+      return collapsed;
+    },
+    setCollapsed
+  };
+
+  return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
+};
+
+const useMenuContext = () => {
+  return useContext<MenuContext>(MenuContext);
+};
+
+export default useMenuContext;

scm-ui/ui-components/src/navigation/NavAction.tsx

@@ -29,6 +29,8 @@ type Props = {
   action: () => void;
 };
 
+// TODO is it used in the menu? should it use MenuContext for collapse state?
+
 class NavAction extends React.Component<Props> {
   render() {
     const { label, icon, action } = this.props;

scm-ui/ui-components/src/navigation/NavLink.tsx

@@ -23,60 +23,47 @@
  */
 import * as React from "react";
 import classNames from "classnames";
-import { Link, Route } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
+import { RoutingProps } from "./RoutingProps";
+import { FC } from "react";
+import useMenuContext from "./MenuContext";
 
-// TODO mostly copy of PrimaryNavigationLink
+type Props = RoutingProps & {
-
-type Props = {
-  to: string;
-  icon?: string;
   label: string;
-  activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: any) => boolean;
-  collapsed?: boolean;
   title?: string;
+  icon?: string;
 };
 
-class NavLink extends React.Component<Props> {
+const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) => {
-  static defaultProps = {
+  const match = useRouteMatch({
-    activeOnlyWhenExact: true
+    path: to,
-  };
+    exact: activeOnlyWhenExact
+  });
 
-  isActive(route: any) {
+  const context = useMenuContext();
-    const { activeWhenMatch } = this.props;
+  const collapsed = context.isCollapsed();
-    return route.match || (activeWhenMatch && activeWhenMatch(route));
-  }
 
-  renderLink = (route: any) => {
+  let showIcon = null;
-    const { to, icon, label, collapsed, title } = this.props;
+  if (icon) {
-
+    showIcon = (
-    let showIcon = null;
+      <>
-    if (icon) {
+        <i className={classNames(icon, "fa-fw")} />{" "}
-      showIcon = (
+      </>
-        <>
-          <i className={classNames(icon, "fa-fw")} />{" "}
-        </>
-      );
-    }
-
-    return (
-      <li title={collapsed ? title : undefined}>
-        <Link
-          className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
-          to={to}
-        >
-          {showIcon}
-          {collapsed ? null : label}
-        </Link>
-      </li>
     );
-  };
-
-  render() {
-    const { to, activeOnlyWhenExact } = this.props;
-
-    return <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />;
   }
-}
+
+  return (
+    <li title={collapsed ? title : undefined}>
+      <Link className={classNames(!!match ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
+        {showIcon}
+        {collapsed ? null : label}
+      </Link>
+    </li>
+  );
+};
+
+NavLink.defaultProps = {
+  activeOnlyWhenExact: true
+};
 
 export default NavLink;

scm-ui/ui-components/src/navigation/Navigation.tsx

@@ -27,6 +27,8 @@ type Props = {
   children?: ReactNode;
 };
 
+// TODO it is used?
+
 class Navigation extends React.Component<Props> {
   render() {
     return <aside className="menu">{this.props.children}</aside>;

scm-ui/ui-components/src/navigation/RoutingProps.ts

@@ -22,18 +22,8 @@
  * SOFTWARE.
  */
 
-import React from "react";
+export type RoutingProps = {
-
+  to: string;
-const MENU_COLLAPSED = "secondary-menu-collapsed";
+  activeOnlyWhenExact?: boolean;
-
+  activeWhenMatch?: (route: any) => boolean;
-export const MenuContext = React.createContext({
+};
-  menuCollapsed: isMenuCollapsed(),
-  setMenuCollapsed: (collapsed: boolean) => {}
-});
-
-export function isMenuCollapsed() {
-  return localStorage.getItem(MENU_COLLAPSED) === "true";
-}
-export function storeMenuCollapsed(status: boolean) {
-  localStorage.setItem(MENU_COLLAPSED, String(status));
-}

scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx

@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { storiesOf } from "@storybook/react";
+import React, { ReactElement } from "react";
+import SecondaryNavigation from "./SecondaryNavigation";
+import SecondaryNavigationItem from "./SecondaryNavigationItem";
+import styled from "styled-components";
+import SubNavigation from "./SubNavigation";
+import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
+import { MemoryRouter } from "react-router-dom";
+import { StateMenuContextProvider } from "./MenuContext";
+
+const Columns = styled.div`
+  margin: 2rem;
+`;
+
+const starships = (
+  <SubNavigation to="/hitchhiker/starships" label="Starships">
+    <SecondaryNavigationItem
+      to="/hitchhiker/starships/heart-of-gold"
+      icon="fas fa-star"
+      label="Heart Of Gold"
+      title="Heart Of Gold"
+    />
+    <SecondaryNavigationItem to="/hitchhiker/starships/titanic" label="Titanic" title="Starship Titanic" />
+  </SubNavigation>
+);
+
+const withRoute = (route: string) => {
+  return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
+};
+
+storiesOf("Navigation|Secondary", module)
+  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
+  .addDecorator(story => (
+    <Columns className="columns">
+      <div className="column is-3">{story()}</div>
+    </Columns>
+  ))
+  .add("Default", () =>
+    withRoute("/")(
+      <SecondaryNavigation label="Hitchhiker">
+        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        <SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+      </SecondaryNavigation>
+    )
+  )
+  .add("Sub Navigation", () =>
+    withRoute("/")(
+      <SecondaryNavigation label="Hitchhiker">
+        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        {starships}
+      </SecondaryNavigation>
+    )
+  )
+  .add("Extension Point", () => {
+    const binder = new Binder("menu");
+    binder.bind("subnav.sample", starships);
+    return withRoute("/hitchhiker/starships/titanic")(
+      <BinderContext.Provider value={binder}>
+        <SecondaryNavigation label="Hitchhiker">
+          <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+          <ExtensionPoint name="subnav.sample" renderAll={true} />
+        </SecondaryNavigation>
+      </BinderContext.Provider>
+    );
+  });

scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx

@@ -21,17 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
+
+import React, { FC } from "react";
 import styled from "styled-components";
-import SubNavigation from "./SubNavigation";
+import useMenuContext from "./MenuContext";
-import { matchPath, useLocation } from "react-router-dom";
-import { isMenuCollapsed, MenuContext } from "./MenuContext";
 
 type Props = {
   label: string;
-  children: ReactElement[];
-  collapsed: boolean;
-  onCollapse?: (newStatus: boolean) => void;
 };
 
 type CollapsedProps = {
@@ -60,73 +56,37 @@ const MenuLabel = styled.p<CollapsedProps>`
   cursor: pointer;
 `;
 
-const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+const SecondaryNavigation: FC<Props> = ({ label, children }) => {
-  const location = useLocation();
+  const menuContext = useMenuContext();
-  const menuContext = useContext(MenuContext);
+  const isCollapsed = menuContext.isCollapsed();
 
-  const subNavActive = isSubNavigationActive(children, location.pathname);
+  const toggleCollapseState = () => {
-  const isCollapsed = collapsed && !subNavActive;
+    menuContext.setCollapsed(!isCollapsed);
+  };
 
-  useEffect(() => {
+  const uncollapseMenu = () => {
-    if (isMenuCollapsed()) {
+    if (isCollapsed) {
-      menuContext.setMenuCollapsed(!subNavActive);
+      menuContext.setCollapsed(false);
     }
-  }, [subNavActive]);
+  };
 
-  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
-    React.cloneElement(child, { collapsed: isCollapsed })
-  );
   const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
   return (
     <SectionContainer className="menu">
       <div>
-        <MenuLabel
+        <MenuLabel className="menu-label" collapsed={isCollapsed} onClick={toggleCollapseState}>
-          className="menu-label"
+          <Icon color="info" className="is-medium" collapsed={isCollapsed}>
-          collapsed={isCollapsed}
+            {arrowIcon}
-          onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
+          </Icon>
-        >
-          {onCollapse && !subNavActive && (
-            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
-              {arrowIcon}
-            </Icon>
-          )}
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list">{childrenWithProps}</ul>
+        <ul className="menu-list" onClick={uncollapseMenu}>
+          {children}
+        </ul>
       </div>
     </SectionContainer>
   );
 };
 
-const createParentPath = (to: string) => {
-  const parents = to.split("/");
-  parents.splice(-1, 1);
-  return parents.join("/");
-};
-
-const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
-  const childArray = React.Children.toArray(children);
-  const match = childArray
-    .filter(child => {
-      // what about extension points?
-      // @ts-ignore
-      return child.type.name === SubNavigation.name;
-    })
-    .map(child => {
-      // @ts-ignore
-      return child.props;
-    })
-    .find(props => {
-      const path = createParentPath(props.to);
-      const matches = matchPath(url, {
-        path,
-        exact: props.activeOnlyWhenExact as boolean
-      });
-      return matches != null;
-    });
-
-  return match != null;
-};
-
 export default SecondaryNavigation;

scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx

@@ -21,48 +21,23 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactElement, ReactNode } from "react";
+import React, { FC } from "react";
-import { MenuContext } from "./MenuContext";
 import SubNavigation from "./SubNavigation";
 import NavLink from "./NavLink";
+import { RoutingProps } from "./RoutingProps";
 
-type Props = {
+type Props = RoutingProps & {
-  to: string;
-  icon: string;
   label: string;
-  title: string;
+  title?: string;
-  activeWhenMatch?: (route: any) => boolean;
+  icon?: string;
-  activeOnlyWhenExact?: boolean;
-  children?: ReactElement[];
 };
 
-export default class SecondaryNavigationItem extends React.Component<Props> {
+const SecondaryNavigationItem: FC<Props> = ({ children, ...props }) => {
-  render() {
+  if (children) {
-    const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
+    return <SubNavigation {...props}>{children}</SubNavigation>;
-    if (children) {
+  } else {
-      return (
+    return <NavLink {...props} />;
-        <MenuContext.Consumer>
-          {({ menuCollapsed }) => (
-            <SubNavigation
-              to={to}
-              icon={icon}
-              label={label}
-              title={title}
-              activeWhenMatch={activeWhenMatch}
-              activeOnlyWhenExact={activeOnlyWhenExact}
-              collapsed={menuCollapsed}
-            >
-              {children}
-            </SubNavigation>
-          )}
-        </MenuContext.Consumer>
-      );
-    } else {
-      return (
-        <MenuContext.Consumer>
-          {({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
-        </MenuContext.Consumer>
-      );
-    }
   }
-}
+};
+
+export default SecondaryNavigationItem;

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -21,22 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, ReactElement, useContext, useEffect } from "react";
+import React, { FC, useContext } from "react";
 import { Link, useRouteMatch } from "react-router-dom";
 import classNames from "classnames";
+import useMenuContext, { MenuContext } from "./MenuContext";
+import { RoutingProps } from "./RoutingProps";
 
-type Props = {
+type Props = RoutingProps & {
-  to: string;
-  icon?: string;
   label: string;
-  activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: any) => boolean;
-  children?: ReactElement[];
-  collapsed?: boolean;
   title?: string;
+  icon?: string;
 };
 
-const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
+const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, title, label, children }) => {
   const parents = to.split("/");
   parents.splice(-1, 1);
   const parent = parents.join("/");
@@ -46,6 +43,9 @@ const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, ti
     exact: activeOnlyWhenExact
   });
 
+  const context = useMenuContext();
+  const collapsed = context.isCollapsed();
+
   let defaultIcon = "fas fa-cog";
   if (icon) {
     defaultIcon = icon;

scm-ui/ui-components/src/navigation/index.ts

@@ -31,5 +31,5 @@ export { default as SubNavigation } from "./SubNavigation";
 export { default as PrimaryNavigation } from "./PrimaryNavigation";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
 export { default as SecondaryNavigation } from "./SecondaryNavigation";
-export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
+export { MenuContext, StateMenuContextProvider } from "./MenuContext";
 export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -34,7 +34,6 @@ import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
 import { MenuContext } from "@scm-manager/ui-components";
-import { storeMenuCollapsed } from "../navigation";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -132,7 +131,6 @@ class DiffFile extends React.Component<Props, State> {
       }),
       () => callback()
     );
-    storeMenuCollapsed(true);
   };
 
   setCollapse = (collapsed: boolean) => {
@@ -289,11 +287,17 @@ class DiffFile extends React.Component<Props, State> {
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
             <MenuContext.Consumer>
-              {({ setMenuCollapsed }) => (
+              {({ setCollapsed }) => (
                 <DiffButton
                   icon={sideBySide ? "align-left" : "columns"}
                   tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
+                  onClick={() =>
+                    this.toggleSideBySide(() => {
+                      if (this.state.sideBySide) {
+                        setCollapsed(true);
+                      }
+                    })
+                  }
                 />
               )}
             </MenuContext.Consumer>

scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx

@@ -0,0 +1,97 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { storiesOf } from "@storybook/react";
+import React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+import repository from "../__resources__/repository";
+// @ts-ignore ignore unknown png
+import Git from "../__resources__/git-logo.png";
+import RepositoryEntry from "./RepositoryEntry";
+import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+import { Repository } from "@scm-manager/ui-types";
+import Image from "../Image";
+import Icon from "../Icon";
+import { MemoryRouter } from "react-router-dom";
+
+const baseDate = "2020-03-26T12:13:42+02:00";
+
+const Spacing = styled.div`
+  margin: 2rem;
+`;
+
+const Container: FC = ({ children }) => <Spacing className="box box-link-shadow">{children}</Spacing>;
+
+const bindAvatar = (binder: Binder, avatar: string) => {
+  binder.bind("repos.repository-avatar", () => {
+    return <Image src={avatar} alt="Logo" />;
+  });
+};
+
+const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
+  binder.bind("repository.card.beforeTitle", () => {
+    return extension;
+  });
+};
+
+const bindQuickLink = (binder: Binder, extension: ReactNode) => {
+  binder.bind("repository.card.quickLink", () => {
+    return extension;
+  });
+};
+
+const withBinder = (binder: Binder, repository: Repository) => {
+  return (
+    <BinderContext.Provider value={binder}>
+      <RepositoryEntry repository={repository} baseDate={baseDate} />
+    </BinderContext.Provider>
+  );
+};
+
+const QuickLink = (
+  <a className="level-item">
+    <Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw" color="inherit" />
+  </a>
+);
+
+storiesOf("RepositoryEntry", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
+  .add("Default", () => {
+    return <RepositoryEntry repository={repository} baseDate={baseDate} />;
+  })
+  .add("Avatar EP", () => {
+    const binder = new Binder("avatar");
+    bindAvatar(binder, Git);
+    return withBinder(binder, repository);
+  })
+  .add("Before Title EP", () => {
+    const binder = new Binder("title");
+    bindBeforeTitle(binder, <i className="fas fa-star" />);
+    return withBinder(binder, repository);
+  })
+  .add("Quick Link EP", () => {
+    const binder = new Binder("title");
+    bindQuickLink(binder, QuickLink);
+    return withBinder(binder, repository);
+  });

scm-ui/ui-components/src/repos/RepositoryEntry.tsx

@@ -28,8 +28,13 @@ import RepositoryEntryLink from "./RepositoryEntryLink";
 import RepositoryAvatar from "./RepositoryAvatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
+type DateProp = Date | string;
+
 type Props = {
   repository: Repository;
+  // @VisibleForTesting
+  // the baseDate is only to avoid failing snapshot tests
+  baseDate?: DateProp;
 };
 
 class RepositoryEntry extends React.Component<Props> {
@@ -77,23 +82,33 @@ class RepositoryEntry extends React.Component<Props> {
     );
   };
 
-  createFooterRight = (repository: Repository) => {
+  createFooterRight = (repository: Repository, baseDate?: DateProp) => {
     return (
       <small className="level-item">
-        <DateFromNow date={repository.creationDate} />
+        <DateFromNow baseDate={baseDate} date={repository.creationDate} />
       </small>
     );
   };
 
-  render() {
+  createTitle = () => {
     const { repository } = this.props;
+    return (
+      <>
+        <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} /> <strong>{repository.name}</strong>
+      </>
+    );
+  };
+
+  render() {
+    const { repository, baseDate } = this.props;
     const repositoryLink = this.createLink(repository);
     const footerLeft = this.createFooterLeft(repository, repositoryLink);
-    const footerRight = this.createFooterRight(repository);
+    const footerRight = this.createFooterRight(repository, baseDate);
+    const title = this.createTitle();
     return (
       <CardColumn
         avatar={<RepositoryAvatar repository={repository} />}
-        title={repository.name}
+        title={title}
         description={repository.description}
         link={repositoryLink}
         footerLeft={footerLeft}

scm-ui/ui-components/src/repos/index.ts

@@ -46,6 +46,9 @@ export { default as DiffFile } from "./DiffFile";
 export { default as DiffButton } from "./DiffButton";
 export { default as LoadingDiff } from "./LoadingDiff";
 export { DefaultCollapsed, DefaultCollapsedFunction } from "./defaultCollapsed";
+export { default as RepositoryAvatar } from "./RepositoryAvatar";
+export { default as RepositoryEntry } from "./RepositoryEntry";
+export { default as RepositoryEntryLink } from "./RepositoryEntryLink";
 
 export {
   File,

scm-ui/ui-extensions/src/ExtensionPoint.test.tsx

@@ -168,4 +168,46 @@ describe("ExtensionPoint test", () => {
     const text = rendered.text();
     expect(text).toBe("");
   });
+
+  it("should render an instance", () => {
+    const Label = () => {
+      return <label>Extension One</label>;
+    };
+
+    mockedBinder.hasExtension.mockReturnValue(true);
+    mockedBinder.getExtension.mockReturnValue(<Label />);
+
+    const rendered = mount(<ExtensionPoint name="something.special" />);
+    expect(rendered.text()).toBe("Extension One");
+  });
+
+  it("should render an instance with props", () => {
+    const Label = ({ name }: { name: string }) => {
+      return <label>Extension {name}</label>;
+    };
+
+    mockedBinder.hasExtension.mockReturnValue(true);
+    mockedBinder.getExtension.mockReturnValue(<Label name="One" />);
+
+    const rendered = mount(<ExtensionPoint name="something.special" props={{ name: "Two" }} />);
+    expect(rendered.text()).toBe("Extension Two");
+  });
+
+  it("should transform extension, before render", () => {
+    const label = ({ name = "One" }: { name: string }) => {
+      return <label>Extension {name}</label>;
+    };
+    mockedBinder.hasExtension.mockReturnValue(true);
+    mockedBinder.getExtension.mockReturnValue(label);
+
+    const transformer = (props: object) => {
+      return {
+        ...props,
+        name: "Two"
+      };
+    };
+
+    const rendered = mount(<ExtensionPoint name="something.special" propTransformer={transformer} />);
+    expect(rendered.text()).toBe("Extension Two");
+  });
 });

scm-ui/ui-extensions/src/ExtensionPoint.tsx

@@ -23,32 +23,40 @@
  */
 import * as React from "react";
 import { Binder } from "./binder";
-import { FC, ReactNode } from "react";
+import { Component, FC, ReactNode } from "react";
 import useBinder from "./useBinder";
 
+type PropTransformer = (props: object) => object;
+
 type Props = {
   name: string;
   renderAll?: boolean;
   props?: object;
+  propTransformer?: PropTransformer;
 };
 
-const renderAllExtensions = (binder: Binder, name: string, props?: object) => {
+const createInstance = (Component: any, props: object, key?: number) => {
+  const instanceProps = {
+    ...props,
+    key
+  };
+  if (React.isValidElement(Component)) {
+    return React.cloneElement(Component, instanceProps);
+  }
+  return <Component {...instanceProps} />;
+};
+
+const renderAllExtensions = (binder: Binder, name: string, props: object) => {
   const extensions = binder.getExtensions(name, props);
-  return (
+  return <>{extensions.map((cmp, index) => createInstance(cmp, props, index))}</>;
-    <>
-      {extensions.map((Component, index) => {
-        return <Component key={index} {...props} />;
-      })}
-    </>
-  );
 };
 
-const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
+const renderSingleExtension = (binder: Binder, name: string, props: object) => {
-  const Component = binder.getExtension(name, props);
+  const cmp = binder.getExtension(name, props);
-  if (!Component) {
+  if (!cmp) {
     return null;
   }
-  return <Component {...props} />;
+  return createInstance(cmp, props, undefined);
 };
 
 const renderDefault = (children: ReactNode) => {
@@ -58,17 +66,29 @@ const renderDefault = (children: ReactNode) => {
   return null;
 };
 
+const createRenderProps = (propTransformer?: PropTransformer, props?: object) => {
+  const transform = (props: object) => {
+    if (!propTransformer) {
+      return props;
+    }
+    return propTransformer(props);
+  };
+
+  return transform(props || {});
+};
+
 /**
  * ExtensionPoint renders components which are bound to an extension point.
  */
-const ExtensionPoint: FC<Props> = ({ name, renderAll, props, children }) => {
+const ExtensionPoint: FC<Props> = ({ name, propTransformer, props, renderAll, children }) => {
   const binder = useBinder();
-  if (!binder.hasExtension(name, props)) {
+  const renderProps = createRenderProps(propTransformer, props);
+  if (!binder.hasExtension(name, renderProps)) {
     return renderDefault(children);
   } else if (renderAll) {
-    return renderAllExtensions(binder, name, props);
+    return renderAllExtensions(binder, name, renderProps);
   }
-  return renderSingleExtension(binder, name, props);
+  return renderSingleExtension(binder, name, renderProps);
 };
 
 export default ExtensionPoint;

scm-ui/ui-plugins/bin/ui-plugins.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /*
  * MIT License
  *
@@ -21,7 +22,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-#!/usr/bin/env node
+
 /* eslint-disable no-console */
 const { spawnSync } = require("child_process");
 

scm-ui/ui-scripts/package.json

@@ -10,14 +10,14 @@
     "ui-scripts": "./bin/ui-scripts.js"
   },
   "dependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.1.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
     "file-loader": "^4.2.0",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "mustache": "^3.1.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "react-refresh": "^0.7.2",
+    "react-refresh": "^0.8.0",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.0",
     "script-loader": "^0.7.2",

scm-ui/ui-styles/src/scm.scss

@@ -433,6 +433,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/regular";
 @import "~@fortawesome/fontawesome-free/scss/brands";
 
 @import "~react-diff-view/style/index";

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -35,10 +35,7 @@ import {
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation,
+  SubNavigation
-  isMenuCollapsed,
-  MenuContext,
-  storeMenuCollapsed
 } from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
 import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import { StateMenuContextProvider } from "@scm-manager/ui-components/src/navigation/MenuContext";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
     installedPluginsLink: string;
   };
 
-type State = {
+class Admin extends React.Component<Props> {
-  menuCollapsed: boolean;
-};
-
-class Admin extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
-  onCollapseAdminMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       if (url.includes("role")) {
@@ -94,7 +76,6 @@ class Admin extends React.Component<Props, State> {
 
   render() {
     const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
-    const { menuCollapsed } = this.state;
 
     const url = this.matchedUrl();
     const extensionProps = {
@@ -103,12 +84,10 @@ class Admin extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
+      <StateMenuContextProvider>
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
         <Page>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Switch>
                 <Redirect exact from={url} to={`${url}/info`} />
                 <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -147,12 +126,8 @@ class Admin extends React.Component<Props, State> {
                 <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
               </Switch>
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
+            <SecondaryNavigationColumn>
-              <SecondaryNavigation
+              <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
-                label={t("admin.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
@@ -195,7 +170,7 @@ class Admin extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -181,7 +181,7 @@ class PluginEntry extends React.Component<Props, State> {
         <CardColumn
           action={this.isInstallable() ? () => this.toggleModal("showInstallModal") : null}
           avatar={avatar}
-          title={plugin.displayName ? plugin.displayName : plugin.name}
+          title={plugin.displayName ? <strong>{plugin.displayName}</strong> : <strong>{plugin.name}</strong>}
           description={plugin.description}
           contentRight={plugin.pending || plugin.markedForUninstall ? this.createPendingSpinner() : actionbar}
           footerRight={footerRight}

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx

@@ -278,9 +278,7 @@ class PluginModal extends React.Component<Props, State> {
           </div>
         </div>
         <div className="media">
-          <div className="media-content">
+          <div className="media-content">{this.createRestartSectionContent()}</div>
-            {this.createRestartSectionContent()}
-          </div>
         </div>
         {this.renderNotifications()}
       </>

scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx

@@ -27,7 +27,6 @@ import { PendingPlugins } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import PendingPluginsQueue from "./PendingPluginsQueue";
 
-
 type ModalBodyProps = {
   pendingPlugins: PendingPlugins;
 };

scm-ui/ui-webapp/src/containers/Profile.tsx

@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
     match: any;
   };
 
-type State = {
+class Profile extends React.Component<Props> {
-  menuCollapsed: boolean;
-};
-
-class Profile extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
-  onCollapseProfileMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -85,7 +67,6 @@ class Profile extends React.Component<Props, State> {
     const url = this.matchedUrl();
 
     const { me, t } = this.props;
-    const { menuCollapsed } = this.state;
 
     if (!me) {
       return (
@@ -106,22 +87,16 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
+      <StateMenuContextProvider>
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
         <Page title={me.displayName}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Route path={url} exact render={() => <ProfileInfo me={me} />} />
               <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
               <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
+            <SecondaryNavigationColumn>
-              <SecondaryNavigation
+              <SecondaryNavigation label={t("profile.navigationLabel")}>
-                label={t("profile.navigationLabel")}
-                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -140,7 +115,7 @@ class Profile extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }

scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx

@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
   Loading,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
@@ -46,7 +45,6 @@ import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
 import EditGroup from "./EditGroup";
 import SetPermissions from "../../permissions/components/SetPermissions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
     fetchGroupByName: (p1: string, p2: string) => void;
   };
 
-type State = {
+class SingleGroup extends React.Component<Props> {
-  menuCollapsed: boolean;
-};
-
-class SingleGroup extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
   componentDidMount() {
     this.props.fetchGroupByName(this.props.groupLink, this.props.name);
   }
 
-  onCollapseGroupMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -94,7 +76,6 @@ class SingleGroup extends React.Component<Props, State> {
 
   render() {
     const { t, loading, error, group } = this.props;
-    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
@@ -112,12 +93,10 @@ class SingleGroup extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
+      <StateMenuContextProvider>
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
         <Page title={group.name}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Route path={url} exact component={() => <Details group={group} />} />
               <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
               <Route
@@ -127,12 +106,8 @@ class SingleGroup extends React.Component<Props, State> {
               />
               <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
+            <SecondaryNavigationColumn>
-              <SecondaryNavigation
+              <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
-                label={t("singleGroup.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -153,7 +128,7 @@ class SingleGroup extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }

scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx

@@ -25,6 +25,7 @@ import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { DateFromNow, MailLink } from "@scm-manager/ui-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = WithTranslation & {
   repository: Repository;

scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx

@@ -22,9 +22,8 @@
  * SOFTWARE.
  */
 import React from "react";
-import { CardColumnGroup } from "@scm-manager/ui-components";
+import { CardColumnGroup, RepositoryEntry } from "@scm-manager/ui-components";
 import { RepositoryGroup } from "@scm-manager/ui-types";
-import RepositoryEntry from "./RepositoryEntry";
 
 type Props = {
   group: RepositoryGroup;

scm-ui/ui-webapp/src/repos/containers/Create.tsx

@@ -54,7 +54,12 @@ type Props = WithTranslation & {
   // dispatch functions
   fetchNamespaceStrategiesIfNeeded: () => void;
   fetchRepositoryTypesIfNeeded: () => void;
-  createRepo: (link: string, repository: Repository, initRepository: boolean, callback: (repo: Repository) => void) => void;
+  createRepo: (
+    link: string,
+    repository: Repository,
+    initRepository: boolean,
+    callback: (repo: Repository) => void
+  ) => void;
   resetForm: () => void;
 
   // context props

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -37,9 +37,7 @@ import {
   SecondaryNavigationColumn,
   SecondaryNavigation,
   SubNavigation,
-  MenuContext,
+  StateMenuContextProvider
-  storeMenuCollapsed,
-  isMenuCollapsed
 } from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
     fetchRepoByName: (link: string, namespace: string, name: string) => void;
   };
 
-type State = {
+class RepositoryRoot extends React.Component<Props> {
-  menuCollapsed: boolean;
-};
-
-class RepositoryRoot extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
     fetchRepoByName(repoLink, namespace, name);
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component<Props, State> {
     return `${url}/changesets`;
   };
 
-  onCollapseRepositoryMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
   render() {
     const { loading, error, indexLinks, repository, t } = this.props;
-    const { menuCollapsed } = this.state;
 
     if (error) {
       return (
@@ -166,15 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
     }
 
     return (
-      <MenuContext.Provider
+      <StateMenuContextProvider>
-        value={{
+        <Page
-          menuCollapsed,
+          title={repository.namespace + "/" + repository.name}
-          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+          afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
-        }}
+        >
-      >
-        <Page title={repository.namespace + "/" + repository.name}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Switch>
                 <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
@@ -224,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                 <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
               </Switch>
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
+            <SecondaryNavigationColumn>
-              <SecondaryNavigation
+              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
-                label={t("repositoryRoot.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
                   to={`${url}/info`}
@@ -271,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }

scm-ui/ui-webapp/src/repos/sources/modules/sources.ts

@@ -176,7 +176,7 @@ export default function reducer(
         pending: false
       }
     };
-  } else if (action.itemId && (action.type === FETCH_UPDATES_SUCCESS)) {
+  } else if (action.itemId && action.type === FETCH_UPDATES_SUCCESS) {
     return {
       ...state,
       [action.itemId + action.payload.hunk]: {

scm-ui/ui-webapp/src/users/containers/SingleUser.tsx

@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
   Loading,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
@@ -38,7 +36,7 @@ import {
   SecondaryNavigationColumn,
   SecondaryNavigation,
   SubNavigation,
-  storeMenuCollapsed
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
     fetchUserByName: (p1: string, p2: string) => void;
   };
 
-type State = {
+class SingleUser extends React.Component<Props> {
-  menuCollapsed: boolean;
-};
-
-class SingleUser extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
   componentDidMount() {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
@@ -85,17 +71,12 @@ class SingleUser extends React.Component<Props, State> {
     return url;
   };
 
-  onCollapseUserMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
   matchedUrl = () => {
     return this.stripEndingSlash(this.props.match.url);
   };
 
   render() {
     const { t, loading, error, user } = this.props;
-    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
@@ -113,12 +94,10 @@ class SingleUser extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
+      <StateMenuContextProvider>
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
         <Page title={user.displayName}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Route path={url} exact component={() => <Details user={user} />} />
               <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
               <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -128,12 +107,8 @@ class SingleUser extends React.Component<Props, State> {
               />
               <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
+            <SecondaryNavigationColumn>
-              <SecondaryNavigation
+              <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
-                label={t("singleUser.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -154,7 +129,7 @@ class SingleUser extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }

scm-webapp/pom.xml

@@ -204,7 +204,7 @@
     <dependency>
       <groupId>javax.xml.bind</groupId>
       <artifactId>jaxb-api</artifactId>
-      <version>2.3.0</version>
+      <version>2.3.1</version>
     </dependency>
 
     <dependency>

scm-webapp/src/main/java/sonia/scm/api/v2/resources/MapperModule.java

@@ -27,6 +27,7 @@ package sonia.scm.api.v2.resources;
 import com.google.inject.AbstractModule;
 import com.google.inject.servlet.ServletScopes;
 import org.mapstruct.factory.Mappers;
+import sonia.scm.web.api.RepositoryToHalMapper;
 
 public class MapperModule extends AbstractModule {
   @Override
@@ -70,6 +71,8 @@ public class MapperModule extends AbstractModule {
     bind(ScmViolationExceptionToErrorDtoMapper.class).to(Mappers.getMapper(ScmViolationExceptionToErrorDtoMapper.class).getClass());
     bind(ExceptionWithContextToErrorDtoMapper.class).to(Mappers.getMapper(ExceptionWithContextToErrorDtoMapper.class).getClass());
 
+    bind(RepositoryToHalMapper.class).to(Mappers.getMapper(RepositoryToRepositoryDtoMapper.class).getClass());
+
     // no mapstruct required
     bind(MeDtoFactory.class);
     bind(UIPluginDtoMapper.class);

scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java

@@ -38,6 +38,7 @@ import sonia.scm.repository.api.Command;
 import sonia.scm.repository.api.RepositoryService;
 import sonia.scm.repository.api.RepositoryServiceFactory;
 import sonia.scm.repository.api.ScmProtocol;
+import sonia.scm.web.api.RepositoryToHalMapper;
 
 import java.util.List;
 
@@ -49,7 +50,7 @@ import static java.util.stream.Collectors.toList;
 // Mapstruct does not support parameterized (i.e. non-default) constructors. Thus, we need to use field injection.
 @SuppressWarnings("squid:S3306")
 @Mapper
-public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Repository, RepositoryDto> {
+public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Repository, RepositoryDto> implements RepositoryToHalMapper {
 
   @Inject
   private ResourceLinks resourceLinks;
@@ -58,6 +59,9 @@ public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Reposit
 
   abstract HealthCheckFailureDto toDto(HealthCheckFailure failure);
 
+  @Override
+  public abstract RepositoryDto map(Repository modelObject);
+
   @ObjectFactory
   RepositoryDto createDto(Repository repository) {
     Links.Builder linksBuilder = linkingTo().self(resourceLinks.repository().self(repository.getNamespace(), repository.getName()));

yarn.lock

@@ -10020,6 +10020,16 @@ mini-css-extract-plugin@^0.8.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-css-extract-plugin@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
+  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
+  dependencies:
+    loader-utils "^1.1.0"
+    normalize-url "1.9.1"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -12247,10 +12257,10 @@ react-redux@^5.0.7:
     react-is "^16.6.0"
     react-lifecycles-compat "^3.0.0"
 
-react-refresh@^0.7.2:
+react-refresh@^0.8.0:
-  version "0.7.2"
+  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.7.2.tgz#f30978d21eb8cac6e2f2fde056a7d04f6844dd50"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.1.tgz#5500506ad6fc891fdd057d0bf3581f9310abc6a2"
-  integrity sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q==
+  integrity sha512-xZIKi49RtLUUSAZ4a4ut2xr+zr4+glOD5v0L413B55MPvlg4EQ6Ctx8PD4CmjlPGoAWmSCTmmkY59TErizNsow==
 
 react-router-dom@^5.1.2:
   version "5.1.2"