From 2ab2079e075933f9d1094546118cd9d3f42558be Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 30 Mar 2020 15:00:30 +0200
Subject: [PATCH 01/12] prop transformer and binding of react elements

The ExtensionPoint component supports now the transformation of instance props and allows binding of already instantiated react components (Foo vs <Foo />).
---
 .../ui-extensions/src/ExtensionPoint.test.tsx | 42 ++++++++++++++++
 scm-ui/ui-extensions/src/ExtensionPoint.tsx   | 50 ++++++++++++++-----
 2 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx b/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
index 3078c4c4d9..0b39817186 100644
--- a/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
+++ b/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");
+  })
 });
diff --git a/scm-ui/ui-extensions/src/ExtensionPoint.tsx b/scm-ui/ui-extensions/src/ExtensionPoint.tsx
index 0eb75509b1..aad9ca7b09 100644
--- a/scm-ui/ui-extensions/src/ExtensionPoint.tsx
+++ b/scm-ui/ui-extensions/src/ExtensionPoint.tsx
@@ -23,32 +23,44 @@
  */
 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 (
     <>
-      {extensions.map((Component, index) => {
-        return <Component key={index} {...props} />;
-      })}
+      {extensions.map((cmp, index) => createInstance(cmp, props, index))}
     </>
   );
 };
 
-const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
-  const Component = binder.getExtension(name, props);
-  if (!Component) {
+const renderSingleExtension = (binder: Binder, name: string, props: object) => {
+  const cmp = binder.getExtension(name, props);
+  if (!cmp) {
     return null;
   }
-  return <Component {...props} />;
+  return createInstance(cmp, props, undefined);
 };
 
 const renderDefault = (children: ReactNode) => {
@@ -58,17 +70,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;

From 23f4c3cba97446c9dc4519181d6b28e5dacdbec3 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 30 Mar 2020 15:01:51 +0200
Subject: [PATCH 02/12] move router decorator into stories

This makes it possible to define other routes that "/" inside each story.
---
 scm-ui/ui-components/.storybook/config.js                  | 3 ---
 scm-ui/ui-components/src/MarkdownView.stories.tsx          | 2 ++
 scm-ui/ui-components/src/buttons/index.stories.tsx         | 2 ++
 scm-ui/ui-components/src/layout/Footer.stories.tsx         | 2 ++
 scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx | 2 ++
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/scm-ui/ui-components/.storybook/config.js b/scm-ui/ui-components/.storybook/config.js
index bfaea0245c..ae409e6478 100644
--- a/scm-ui/ui-components/.storybook/config.js
+++ b/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);
diff --git a/scm-ui/ui-components/src/MarkdownView.stories.tsx b/scm-ui/ui-components/src/MarkdownView.stories.tsx
index 464efe42cc..6b49d10555 100644
--- a/scm-ui/ui-components/src/MarkdownView.stories.tsx
+++ b/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} />)
diff --git a/scm-ui/ui-components/src/buttons/index.stories.tsx b/scm-ui/ui-components/src/buttons/index.stories.tsx
index 9179cbb8a0..a0588b2dd4 100644
--- a/scm-ui/ui-components/src/buttons/index.stories.tsx
+++ b/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"];
 
@@ -42,6 +43,7 @@ const Spacing = styled.div`
 const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
 
 storiesOf("Buttons|Button", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Colors", () => (
     <div>
       {colors.map(color => (
diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx
index 02738f68c0..cae668ed19 100644
--- a/scm-ui/ui-components/src/layout/Footer.stories.tsx
+++ b/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={{}} />;
   })
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
index 22979c631b..250c4b18c7 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
@@ -32,6 +32,7 @@ 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";
 
@@ -74,6 +75,7 @@ const QuickLink = (
 );
 
 storiesOf("RepositoryEntry", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .addDecorator(storyFn => <Container>{storyFn()}</Container>)
   .add("Default", () => {
     return <RepositoryEntry repository={repository} baseDate={baseDate} />;

From daa272b4fc5578ff14e6ed6dca014e3f15b83e48 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 30 Mar 2020 15:04:00 +0200
Subject: [PATCH 03/12] expand menu if SubNavigation is opened, even if it is
 inside an ExtensionPoint

---
 .../SecondaryNavigation.stories.tsx           | 103 ++++++++++++++++++
 .../src/navigation/SecondaryNavigation.tsx    |  29 ++++-
 .../navigation/SecondaryNavigationItem.tsx    |  42 ++-----
 scm-ui/ui-components/tsconfig.json            |   8 +-
 4 files changed, 144 insertions(+), 38 deletions(-)
 create mode 100644 scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx

diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
new file mode 100644
index 0000000000..f96909a8af
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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";
+
+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 => (
+    <Columns className="columns">
+      <div className="column is-3">{story()}</div>
+    </Columns>
+  ))
+  .add("Default", () =>
+    withRoute("/")(
+      <SecondaryNavigation label="Hitchhiker" collapsed={false} onCollapse={() => {}}>
+        <SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        <SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+      </SecondaryNavigation>
+    )
+  )
+  .add("Collapsed", () =>
+    withRoute("/")(
+      <SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
+        <SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        <SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+      </SecondaryNavigation>
+    )
+  )
+  .add("Sub Navigation", () =>
+    withRoute("/")(
+      <SecondaryNavigation label="Hitchhiker" collapsed={false} onCollapse={() => {}}>
+        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        {starships}
+      </SecondaryNavigation>
+    )
+  )
+  .add("Sub Navigation Collapsed", () =>
+    withRoute("/hitchhiker/starships/heart-of-gold")(
+      <SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
+        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+        {starships}
+      </SecondaryNavigation>
+    )
+  )
+  .add("Collapsed EP Sub", () => {
+    const binder = new Binder("menu");
+    binder.bind("subnav.sample", starships);
+    return withRoute("/hitchhiker/starships/titanic")(
+      <BinderContext.Provider value={binder}>
+        <SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
+          <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+          <ExtensionPoint name="subnav.sample" renderAll={true} />
+        </SecondaryNavigation>
+      </BinderContext.Provider>
+    );
+  });
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index fd8e1dd3eb..b2465630a6 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -26,6 +26,7 @@ import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { matchPath, useLocation } from "react-router-dom";
 import { isMenuCollapsed, MenuContext } from "./MenuContext";
+import { ExtensionPoint, Binder, useBinder } from "@scm-manager/ui-extensions";
 
 type Props = {
   label: string;
@@ -62,9 +63,10 @@ const MenuLabel = styled.p<CollapsedProps>`
 
 const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
   const location = useLocation();
+  const binder = useBinder();
   const menuContext = useContext(MenuContext);
 
-  const subNavActive = isSubNavigationActive(children, location.pathname);
+  const subNavActive = isSubNavigationActive(binder, children, location.pathname);
   const isCollapsed = collapsed && !subNavActive;
 
   useEffect(() => {
@@ -74,7 +76,16 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse
   }, [subNavActive]);
 
   const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
-    React.cloneElement(child, { collapsed: isCollapsed })
+    React.cloneElement(child, {
+      collapsed: isCollapsed,
+      propTransformer: (props: object) => {
+        const np = {
+          ...props,
+          collapsed: isCollapsed
+        };
+        return np;
+      }
+    })
   );
   const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
@@ -105,16 +116,22 @@ const createParentPath = (to: string) => {
   return parents.join("/");
 };
 
-const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
+const isSubNavigationActive = (binder: Binder, children: ReactNode, url: string): boolean => {
   const childArray = React.Children.toArray(children);
   const match = childArray
-    .filter(child => {
-      // what about extension points?
+    .filter(React.isValidElement)
+    .flatMap(child => {
       // @ts-ignore
+      if (child.type.name === ExtensionPoint.name) {
+        // @ts-ignore
+        return binder.getExtensions(child.props.name, child.props.props);
+      }
+      return [child];
+    })
+    .filter(child => {
       return child.type.name === SubNavigation.name;
     })
     .map(child => {
-      // @ts-ignore
       return child.props;
     })
     .find(props => {
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
index e35acdb386..6f846e426c 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
@@ -21,48 +21,28 @@
  * 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, ReactElement, ReactNode } from "react";
 import { MenuContext } from "./MenuContext";
 import SubNavigation from "./SubNavigation";
 import NavLink from "./NavLink";
 
 type Props = {
   to: string;
-  icon: string;
+  icon?: string;
   label: string;
   title: string;
+  collapsed?: boolean;
   activeWhenMatch?: (route: any) => boolean;
   activeOnlyWhenExact?: boolean;
   children?: ReactElement[];
 };
 
-export default class SecondaryNavigationItem extends React.Component<Props> {
-  render() {
-    const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
-    if (children) {
-      return (
-        <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>
-      );
-    }
+const SecondaryNavigationItem: FC<Props> = ({ children, ...props }) => {
+  if (children) {
+    return <SubNavigation {...props}>{children}</SubNavigation>;
+  } else {
+    return <NavLink {...props} />;
   }
-}
+};
+
+export default SecondaryNavigationItem;
diff --git a/scm-ui/ui-components/tsconfig.json b/scm-ui/ui-components/tsconfig.json
index 7e3ee63a2d..450dc158b8 100644
--- a/scm-ui/ui-components/tsconfig.json
+++ b/scm-ui/ui-components/tsconfig.json
@@ -1,3 +1,9 @@
 {
-  "extends": "@scm-manager/tsconfig"
+  "extends": "@scm-manager/tsconfig",
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "dom"
+    ]
+  }
 }

From 3bd8534fd75a01fd7f7e6a6c4405926dba386381 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 30 Mar 2020 15:08:38 +0200
Subject: [PATCH 04/12] fix broken button stories

---
 .../src/__snapshots__/storyshots.test.ts.snap | 341 ++++++++++++++++++
 .../src/buttons/index.stories.tsx             |   4 +-
 2 files changed, 344 insertions(+), 1 deletion(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 77aec20677..7078431b33 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -34188,6 +34188,347 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
 </div>
 `;
 
+exports[`Storyshots Navigation|Secondary Collapsed 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 ktrCnD menu-label"
+          onClick={[Function]}
+        >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 cqWEjA is-medium"
+            color="info"
+          >
+            <i
+              className="fas fa-caret-down"
+            />
+          </i>
+          
+        </p>
+        <ul
+          className="menu-list"
+        >
+          <li
+            title="Puzzle 42"
+          >
+            <a
+              className="is-active has-text-centered"
+              href="/"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+            </a>
+          </li>
+          <li
+            title="Heart Of Gold"
+          >
+            <a
+              className="has-text-centered"
+              href="/some"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-star fa-fw"
+              />
+               
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Navigation|Secondary Collapsed EP Sub 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"
+        >
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+        >
+          <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 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"
+        >
+          <li>
+            <a
+              className="is-active"
+              href="/"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+              Puzzle 42
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/some"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-star fa-fw"
+              />
+               
+              Heart Of Gold
+            </a>
+          </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"
+        >
+          <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 Navigation|Secondary Sub Navigation Collapsed 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"
+        >
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+        >
+          <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="is-active"
+                  href="/hitchhiker/starships/heart-of-gold"
+                  onClick={[Function]}
+                >
+                  <i
+                    className="fas fa-star fa-fw"
+                  />
+                   
+                  Heart Of Gold
+                </a>
+              </li>
+              <li>
+                <a
+                  className=""
+                  href="/hitchhiker/starships/titanic"
+                  onClick={[Function]}
+                >
+                  Titanic
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
 exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
 <div
   className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
diff --git a/scm-ui/ui-components/src/buttons/index.stories.tsx b/scm-ui/ui-components/src/buttons/index.stories.tsx
index a0588b2dd4..4ce67b030e 100644
--- a/scm-ui/ui-components/src/buttons/index.stories.tsx
+++ b/scm-ui/ui-components/src/buttons/index.stories.tsx
@@ -41,9 +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(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(RoutingDecorator)
   .add("Colors", () => (
     <div>
       {colors.map(color => (
@@ -72,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);
 };

From ca39a5b453669124b13397e85f3b2b8f8a1d03ee Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 08:24:41 +0200
Subject: [PATCH 05/12] enable es2019 lib for all typescript modules

---
 scm-ui/tsconfig/tsconfig.json      | 6 +++++-
 scm-ui/ui-components/tsconfig.json | 8 +-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/scm-ui/tsconfig/tsconfig.json b/scm-ui/tsconfig/tsconfig.json
index a2450080eb..1c3acc4351 100644
--- a/scm-ui/tsconfig/tsconfig.json
+++ b/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"
+    ]
   }
 }
diff --git a/scm-ui/ui-components/tsconfig.json b/scm-ui/ui-components/tsconfig.json
index 450dc158b8..7e3ee63a2d 100644
--- a/scm-ui/ui-components/tsconfig.json
+++ b/scm-ui/ui-components/tsconfig.json
@@ -1,9 +1,3 @@
 {
-  "extends": "@scm-manager/tsconfig",
-  "compilerOptions": {
-    "lib": [
-      "es2019",
-      "dom"
-    ]
-  }
+  "extends": "@scm-manager/tsconfig"
 }

From 2821005d8cb8c92341b5f8171339d9bee28d95a9 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 08:26:01 +0200
Subject: [PATCH 06/12] handling collapse state in a more simple and
 consistence way

---
 .../src/navigation/ExternalLink.tsx           |  2 +
 .../src/navigation/MenuContext.tsx            | 73 +++++++++++++++
 .../src/navigation/NavAction.tsx              |  2 +
 .../ui-components/src/navigation/NavLink.tsx  | 76 ++++++---------
 .../src/navigation/Navigation.tsx             |  2 +
 .../{MenuContext.ts => RoutingProps.ts}       | 18 +---
 .../SecondaryNavigation.stories.tsx           | 30 ++----
 .../src/navigation/SecondaryNavigation.tsx    | 93 +++++++++----------
 .../navigation/SecondaryNavigationItem.tsx    | 15 +--
 .../src/navigation/SubNavigation.tsx          | 18 ++--
 scm-ui/ui-components/src/navigation/index.ts  |  2 +-
 11 files changed, 178 insertions(+), 153 deletions(-)
 create mode 100644 scm-ui/ui-components/src/navigation/MenuContext.tsx
 rename scm-ui/ui-components/src/navigation/{MenuContext.ts => RoutingProps.ts} (73%)

diff --git a/scm-ui/ui-components/src/navigation/ExternalLink.tsx b/scm-ui/ui-components/src/navigation/ExternalLink.tsx
index a87b118ee3..1565f6fa79 100644
--- a/scm-ui/ui-components/src/navigation/ExternalLink.tsx
+++ b/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) {
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
new file mode 100644
index 0000000000..01b28866d5
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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";
+
+const MENU_COLLAPSED = "secondary-menu-collapsed";
+
+export type MenuContext = {
+  isCollapsed: () => boolean;
+  setCollapsed: (collapsed: boolean) => void;
+};
+
+export const LocalStorageMenuContextProvider: FC = ({children}) => {
+  const [state, setState] = useState(localStorage.getItem(MENU_COLLAPSED) === "true");
+  const context = {
+    isCollapsed() {
+      return state;
+    },
+    setCollapsed(collapsed: boolean) {
+      localStorage.setItem(MENU_COLLAPSED, String(collapsed));
+      setState(collapsed);
+    }
+  };
+
+  return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
+};
+
+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;
diff --git a/scm-ui/ui-components/src/navigation/NavAction.tsx b/scm-ui/ui-components/src/navigation/NavAction.tsx
index dd350d1c71..394b30d961 100644
--- a/scm-ui/ui-components/src/navigation/NavAction.tsx
+++ b/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;
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index 7a527e5ab5..132590e7f6 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -23,60 +23,44 @@
  */
 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 { useContext } from "react";
+import useMenuContext, { MenuContext } from "./MenuContext";
 
-// TODO mostly copy of PrimaryNavigationLink
-
-type Props = {
-  to: string;
-  icon?: string;
+type Props = RoutingProps & {
   label: string;
-  activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: any) => boolean;
-  collapsed?: boolean;
   title?: string;
+  icon?: string;
 };
 
-class NavLink extends React.Component<Props> {
-  static defaultProps = {
-    activeOnlyWhenExact: true
-  };
+const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) => {
+  const match = useRouteMatch({
+    path: to,
+    exact: activeOnlyWhenExact
+  });
 
-  isActive(route: any) {
-    const { activeWhenMatch } = this.props;
-    return route.match || (activeWhenMatch && activeWhenMatch(route));
-  }
+  const context = useMenuContext();
+  const collapsed = context.isCollapsed();
 
-  renderLink = (route: any) => {
-    const { to, icon, label, collapsed, title } = this.props;
-
-    let showIcon = null;
-    if (icon) {
-      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>
+  let showIcon = null;
+  if (icon) {
+    showIcon = (
+      <>
+        <i className={classNames(icon, "fa-fw")} />{" "}
+      </>
     );
-  };
-
-  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>
+  );
+};
 
 export default NavLink;
diff --git a/scm-ui/ui-components/src/navigation/Navigation.tsx b/scm-ui/ui-components/src/navigation/Navigation.tsx
index dc848b4d24..0ccd94e7f7 100644
--- a/scm-ui/ui-components/src/navigation/Navigation.tsx
+++ b/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>;
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.ts b/scm-ui/ui-components/src/navigation/RoutingProps.ts
similarity index 73%
rename from scm-ui/ui-components/src/navigation/MenuContext.ts
rename to scm-ui/ui-components/src/navigation/RoutingProps.ts
index e2760da025..e34f62b97c 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.ts
+++ b/scm-ui/ui-components/src/navigation/RoutingProps.ts
@@ -22,18 +22,8 @@
  * SOFTWARE.
  */
 
-import React from "react";
-
-const MENU_COLLAPSED = "secondary-menu-collapsed";
-
-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));
+export type RoutingProps = {
+  to: string;
+  activeOnlyWhenExact?: boolean;
+  activeWhenMatch?: (route: any) => boolean;
 }
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
index f96909a8af..73531dcb18 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
@@ -30,6 +30,7 @@ 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;
@@ -52,6 +53,7 @@ const withRoute = (route: string) => {
 };
 
 storiesOf("Navigation|Secondary", module)
+  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
   .addDecorator(story => (
     <Columns className="columns">
       <div className="column is-3">{story()}</div>
@@ -59,42 +61,26 @@ storiesOf("Navigation|Secondary", module)
   ))
   .add("Default", () =>
     withRoute("/")(
-      <SecondaryNavigation label="Hitchhiker" collapsed={false} onCollapse={() => {}}>
-        <SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        <SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
-      </SecondaryNavigation>
-    )
-  )
-  .add("Collapsed", () =>
-    withRoute("/")(
-      <SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
-        <SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        <SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+      <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" collapsed={false} onCollapse={() => {}}>
+      <SecondaryNavigation label="Hitchhiker">
         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
         {starships}
       </SecondaryNavigation>
     )
   )
-  .add("Sub Navigation Collapsed", () =>
-    withRoute("/hitchhiker/starships/heart-of-gold")(
-      <SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
-        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        {starships}
-      </SecondaryNavigation>
-    )
-  )
-  .add("Collapsed EP Sub", () => {
+  .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" collapsed={true} onCollapse={() => {}}>
+        <SecondaryNavigation label="Hitchhiker">
           <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
           <ExtensionPoint name="subnav.sample" renderAll={true} />
         </SecondaryNavigation>
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index b2465630a6..efb925c679 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -21,18 +21,17 @@
  * 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, ReactElement, ReactNode} from "react";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { matchPath, useLocation } from "react-router-dom";
-import { isMenuCollapsed, MenuContext } from "./MenuContext";
+import useMenuContext from "./MenuContext";
 import { ExtensionPoint, Binder, useBinder } from "@scm-manager/ui-extensions";
+import { RoutingProps } from "./RoutingProps";
 
 type Props = {
   label: string;
-  children: ReactElement[];
-  collapsed: boolean;
-  onCollapse?: (newStatus: boolean) => void;
 };
 
 type CollapsedProps = {
@@ -61,32 +60,14 @@ 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 binder = useBinder();
-  const menuContext = useContext(MenuContext);
+  const menuContext = useMenuContext();
 
   const subNavActive = isSubNavigationActive(binder, children, location.pathname);
-  const isCollapsed = collapsed && !subNavActive;
+  const isCollapsed = menuContext.isCollapsed();
 
-  useEffect(() => {
-    if (isMenuCollapsed()) {
-      menuContext.setMenuCollapsed(!subNavActive);
-    }
-  }, [subNavActive]);
-
-  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
-    React.cloneElement(child, {
-      collapsed: isCollapsed,
-      propTransformer: (props: object) => {
-        const np = {
-          ...props,
-          collapsed: isCollapsed
-        };
-        return np;
-      }
-    })
-  );
   const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
   return (
@@ -95,16 +76,16 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse
         <MenuLabel
           className="menu-label"
           collapsed={isCollapsed}
-          onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
+          onClick={!subNavActive ? () => menuContext.setCollapsed(!isCollapsed) : undefined}
         >
-          {onCollapse && !subNavActive && (
+          {!subNavActive && (
             <Icon color="info" className="is-medium" collapsed={isCollapsed}>
               {arrowIcon}
             </Icon>
           )}
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list">{childrenWithProps}</ul>
+        <ul className="menu-list">{children}</ul>
       </div>
     </SectionContainer>
   );
@@ -116,32 +97,42 @@ const createParentPath = (to: string) => {
   return parents.join("/");
 };
 
+const expandExtensionPoints = (binder: Binder, child: ReactElement): Array<ReactElement> => {
+  // @ts-ignore
+  if (child.type.name === ExtensionPoint.name) {
+    // @ts-ignore
+    return binder.getExtensions(child.props.name, child.props.props);
+  }
+  return [child];
+};
+
+const mapToProps = (child: ReactElement<RoutingProps>) => {
+  return child.props;
+};
+
+const isSubNavigation = (child: ReactElement) => {
+  // @ts-ignore
+  return child.type.name === SubNavigation.name;
+};
+
+const isActive = (url: string, props: RoutingProps) => {
+  const path = createParentPath(props.to);
+  const matches = matchPath(url, {
+    path,
+    exact: props.activeOnlyWhenExact
+  });
+  return matches != null;
+};
+
 const isSubNavigationActive = (binder: Binder, children: ReactNode, url: string): boolean => {
   const childArray = React.Children.toArray(children);
+
   const match = childArray
     .filter(React.isValidElement)
-    .flatMap(child => {
-      // @ts-ignore
-      if (child.type.name === ExtensionPoint.name) {
-        // @ts-ignore
-        return binder.getExtensions(child.props.name, child.props.props);
-      }
-      return [child];
-    })
-    .filter(child => {
-      return child.type.name === SubNavigation.name;
-    })
-    .map(child => {
-      return child.props;
-    })
-    .find(props => {
-      const path = createParentPath(props.to);
-      const matches = matchPath(url, {
-        path,
-        exact: props.activeOnlyWhenExact as boolean
-      });
-      return matches != null;
-    });
+    .flatMap(child => expandExtensionPoints(binder, child))
+    .filter(isSubNavigation)
+    .map(mapToProps)
+    .find(props => isActive(url, props));
 
   return match != null;
 };
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
index 6f846e426c..33924c4a29 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
@@ -21,20 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, ReactElement, ReactNode } from "react";
-import { MenuContext } from "./MenuContext";
+import React, {FC} from "react";
 import SubNavigation from "./SubNavigation";
 import NavLink from "./NavLink";
+import {RoutingProps} from "./RoutingProps";
 
-type Props = {
-  to: string;
-  icon?: string;
+type Props = RoutingProps & {
   label: string;
-  title: string;
-  collapsed?: boolean;
-  activeWhenMatch?: (route: any) => boolean;
-  activeOnlyWhenExact?: boolean;
-  children?: ReactElement[];
+  title?: string;
+  icon?: string;
 };
 
 const SecondaryNavigationItem: FC<Props> = ({ children, ...props }) => {
diff --git a/scm-ui/ui-components/src/navigation/SubNavigation.tsx b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
index 165f10588b..2955527d78 100644
--- a/scm-ui/ui-components/src/navigation/SubNavigation.tsx
+++ b/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 = {
-  to: string;
-  icon?: string;
+type Props = RoutingProps & {
   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;
diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts
index b7326f6810..942beb0080 100644
--- a/scm-ui/ui-components/src/navigation/index.ts
+++ b/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, LocalStorageMenuContextProvider } from "./MenuContext";
 export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

From 13633fb57e1b6f8506bc564589d63f846b1738c1 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 11:00:07 +0200
Subject: [PATCH 07/12] un collapse menu on each interaction with it

---
 .../src/__snapshots__/storyshots.test.ts.snap | 269 +++++-------------
 .../src/layout/PrimaryContentColumn.tsx       |  31 +-
 .../src/layout/SecondaryNavigationColumn.tsx  |  31 +-
 .../src/navigation/SecondaryNavigation.tsx    |  25 +-
 scm-ui/ui-components/src/navigation/index.ts  |   2 +-
 scm-ui/ui-components/src/repos/DiffFile.tsx   |  10 +-
 .../ui-webapp/src/admin/containers/Admin.tsx  |  41 +--
 scm-ui/ui-webapp/src/containers/Profile.tsx   |  41 +--
 .../src/groups/containers/SingleGroup.tsx     |  41 +--
 .../src/repos/containers/RepositoryRoot.tsx   |  42 +--
 .../src/users/containers/SingleUser.tsx       |  39 +--
 11 files changed, 154 insertions(+), 418 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 7078431b33..f76f64d754 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -34188,70 +34188,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
 </div>
 `;
 
-exports[`Storyshots Navigation|Secondary Collapsed 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 ktrCnD menu-label"
-          onClick={[Function]}
-        >
-          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 cqWEjA is-medium"
-            color="info"
-          >
-            <i
-              className="fas fa-caret-down"
-            />
-          </i>
-          
-        </p>
-        <ul
-          className="menu-list"
-        >
-          <li
-            title="Puzzle 42"
-          >
-            <a
-              className="is-active has-text-centered"
-              href="/"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-puzzle-piece fa-fw"
-              />
-               
-            </a>
-          </li>
-          <li
-            title="Heart Of Gold"
-          >
-            <a
-              className="has-text-centered"
-              href="/some"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-star fa-fw"
-              />
-               
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
+exports[`Storyshots Navigation|Secondary Default 1`] = `
 <div
   className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
 >
@@ -34264,11 +34201,75 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
       <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]}
         >
           Hitchhiker
         </p>
         <ul
           className="menu-list"
+          onClick={[Function]}
         >
           <li>
             <a
@@ -34329,67 +34330,6 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 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"
-        >
-          <li>
-            <a
-              className="is-active"
-              href="/"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-puzzle-piece fa-fw"
-              />
-               
-              Puzzle 42
-            </a>
-          </li>
-          <li>
-            <a
-              className=""
-              href="/some"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-star fa-fw"
-              />
-               
-              Heart Of Gold
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
 <div
   className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
@@ -34417,6 +34357,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
         </p>
         <ul
           className="menu-list"
+          onClick={[Function]}
         >
           <li>
             <a
@@ -34451,84 +34392,6 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
 </div>
 `;
 
-exports[`Storyshots Navigation|Secondary Sub Navigation Collapsed 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"
-        >
-          Hitchhiker
-        </p>
-        <ul
-          className="menu-list"
-        >
-          <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="is-active"
-                  href="/hitchhiker/starships/heart-of-gold"
-                  onClick={[Function]}
-                >
-                  <i
-                    className="fas fa-star fa-fw"
-                  />
-                   
-                  Heart Of Gold
-                </a>
-              </li>
-              <li>
-                <a
-                  className=""
-                  href="/hitchhiker/starships/titanic"
-                  onClick={[Function]}
-                >
-                  Titanic
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
 exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
 <div
   className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 76427dc4e0..73ddadd0a4 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/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";
-
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
+import useMenuContext from "../navigation/MenuContext";
 
 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> {
-  static defaultProps = {
-    collapsed: false
-  };
+const PrimaryContentColumn: FC = ({ children }) => {
+  const context = useMenuContext();
+  return (
+    <PrimaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </PrimaryColumn>
+  );
+};
 
-  render() {
-    const { children, collapsed } = this.props;
-
-    return (
-      <PrimaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </PrimaryColumn>
-    );
-  }
-}
+export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
index aae722bbe3..a974c8d438 100644
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/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";
-
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
+import useMenuContext from "../navigation/MenuContext";
 
 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> {
-  static defaultProps = {
-    collapsed: false
-  };
+const SecondaryNavigationColumn: FC = ({ children }) => {
+  const context = useMenuContext();
+  return (
+    <SecondaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </SecondaryColumn>
+  );
+};
 
-  render() {
-    const { children, collapsed } = this.props;
-
-    return (
-      <SecondaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </SecondaryColumn>
-    );
-  }
-}
+export default SecondaryNavigationColumn;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index efb925c679..61e0860a18 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { FC, ReactElement, ReactNode} from "react";
+import React, {FC, ReactElement, ReactNode, useEffect, useMemo} from "react";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { matchPath, useLocation } from "react-router-dom";
@@ -64,10 +64,27 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
   const location = useLocation();
   const binder = useBinder();
   const menuContext = useMenuContext();
-
   const subNavActive = isSubNavigationActive(binder, children, location.pathname);
   const isCollapsed = menuContext.isCollapsed();
 
+  useEffect(() => {
+    if (isCollapsed && subNavActive) {
+      menuContext.setCollapsed(false);
+    }
+  }, [subNavActive, isCollapsed]);
+
+  const toggleCollapseState = () => {
+    if (!subNavActive) {
+      menuContext.setCollapsed(!isCollapsed);
+    }
+  };
+
+  const uncollapseMenu = () => {
+    if (isCollapsed) {
+      menuContext.setCollapsed(false);
+    }
+  };
+
   const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
   return (
@@ -76,7 +93,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
         <MenuLabel
           className="menu-label"
           collapsed={isCollapsed}
-          onClick={!subNavActive ? () => menuContext.setCollapsed(!isCollapsed) : undefined}
+          onClick={toggleCollapseState}
         >
           {!subNavActive && (
             <Icon color="info" className="is-medium" collapsed={isCollapsed}>
@@ -85,7 +102,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
           )}
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list">{children}</ul>
+        <ul className="menu-list" onClick={uncollapseMenu}>{children}</ul>
       </div>
     </SectionContainer>
   );
diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts
index 942beb0080..4dcce4321b 100644
--- a/scm-ui/ui-components/src/navigation/index.ts
+++ b/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, LocalStorageMenuContextProvider } from "./MenuContext";
+export { MenuContext, StateMenuContextProvider } from "./MenuContext";
 export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 5d6381a971..981423fabe 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/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,15 @@ 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>
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index 6840808214..ebfaaa1325 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -35,10 +35,7 @@ import {
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation,
-  isMenuCollapsed,
-  MenuContext,
-  storeMenuCollapsed
+  SubNavigation
 } 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 = {
-  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));
-  };
-
+class Admin extends React.Component<Props> {
   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
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <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}>
-              <SecondaryNavigation
-                label={t("admin.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
                 <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>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 221e8974c7..8f14bed1e7 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/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 = {
-  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));
-  };
-
+class Profile extends React.Component<Props> {
   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
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <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}>
-              <SecondaryNavigation
-                label={t("profile.navigationLabel")}
-                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("profile.navigationLabel")}>
                 <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>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index c7c658c059..5b5555b80c 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/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 = {
-  menuCollapsed: boolean;
-};
-
-class SingleGroup extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class SingleGroup extends React.Component<Props> {
   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
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <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}>
-              <SecondaryNavigation
-                label={t("singleGroup.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
                 <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>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 9651cd0a0b..38b0570cb5 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -37,9 +37,7 @@ import {
   SecondaryNavigationColumn,
   SecondaryNavigation,
   SubNavigation,
-  MenuContext,
-  storeMenuCollapsed,
-  isMenuCollapsed
+  StateMenuContextProvider
 } 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 = {
-  menuCollapsed: boolean;
-};
-
-class RepositoryRoot extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class RepositoryRoot extends React.Component<Props> {
   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,18 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
     }
 
     return (
-      <MenuContext.Provider
-        value={{
-          menuCollapsed,
-          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
-        }}
-      >
+      <StateMenuContextProvider>
         <Page
           title={repository.namespace + "/" + repository.name}
           afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
         >
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Switch>
                 <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
@@ -227,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                 <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
               </Switch>
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("repositoryRoot.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
                   to={`${url}/info`}
@@ -274,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 5050b3ea05..ff2c57f0e6 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/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 = {
-  menuCollapsed: boolean;
-};
-
-class SingleUser extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class SingleUser extends React.Component<Props> {
   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
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <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}>
-              <SecondaryNavigation
-                label={t("singleUser.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
                 <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>
     );
   }
 }

From 5889e834c2cf06a5827447963040dc664342475a Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 11:15:01 +0200
Subject: [PATCH 08/12] allow collapse on sub navigations too

---
 .../src/__snapshots__/storyshots.test.ts.snap |  8 ++
 .../src/navigation/MenuContext.tsx            | 17 ----
 .../src/navigation/SecondaryNavigation.tsx    | 85 +++----------------
 3 files changed, 18 insertions(+), 92 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index f76f64d754..0417014428 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -34265,6 +34265,14 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
           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
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
index 01b28866d5..be412097b1 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.tsx
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -24,28 +24,11 @@
 
 import React, { FC, useContext, useState } from "react";
 
-const MENU_COLLAPSED = "secondary-menu-collapsed";
-
 export type MenuContext = {
   isCollapsed: () => boolean;
   setCollapsed: (collapsed: boolean) => void;
 };
 
-export const LocalStorageMenuContextProvider: FC = ({children}) => {
-  const [state, setState] = useState(localStorage.getItem(MENU_COLLAPSED) === "true");
-  const context = {
-    isCollapsed() {
-      return state;
-    },
-    setCollapsed(collapsed: boolean) {
-      localStorage.setItem(MENU_COLLAPSED, String(collapsed));
-      setState(collapsed);
-    }
-  };
-
-  return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
-};
-
 export const MenuContext = React.createContext<MenuContext>({
   isCollapsed() {
     return false;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index 61e0860a18..59e3593ef2 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -22,13 +22,9 @@
  * SOFTWARE.
  */
 
-import React, {FC, ReactElement, ReactNode, useEffect, useMemo} from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
-import SubNavigation from "./SubNavigation";
-import { matchPath, useLocation } from "react-router-dom";
 import useMenuContext from "./MenuContext";
-import { ExtensionPoint, Binder, useBinder } from "@scm-manager/ui-extensions";
-import { RoutingProps } from "./RoutingProps";
 
 type Props = {
   label: string;
@@ -60,23 +56,12 @@ const MenuLabel = styled.p<CollapsedProps>`
   cursor: pointer;
 `;
 
-const SecondaryNavigation: FC<Props> = ({ label, children}) => {
-  const location = useLocation();
-  const binder = useBinder();
+const SecondaryNavigation: FC<Props> = ({ label, children }) => {
   const menuContext = useMenuContext();
-  const subNavActive = isSubNavigationActive(binder, children, location.pathname);
   const isCollapsed = menuContext.isCollapsed();
 
-  useEffect(() => {
-    if (isCollapsed && subNavActive) {
-      menuContext.setCollapsed(false);
-    }
-  }, [subNavActive, isCollapsed]);
-
   const toggleCollapseState = () => {
-    if (!subNavActive) {
-      menuContext.setCollapsed(!isCollapsed);
-    }
+    menuContext.setCollapsed(!isCollapsed);
   };
 
   const uncollapseMenu = () => {
@@ -90,68 +75,18 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
   return (
     <SectionContainer className="menu">
       <div>
-        <MenuLabel
-          className="menu-label"
-          collapsed={isCollapsed}
-          onClick={toggleCollapseState}
-        >
-          {!subNavActive && (
-            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
-              {arrowIcon}
-            </Icon>
-          )}
+        <MenuLabel className="menu-label" collapsed={isCollapsed} onClick={toggleCollapseState}>
+          <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+            {arrowIcon}
+          </Icon>
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list" onClick={uncollapseMenu}>{children}</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 expandExtensionPoints = (binder: Binder, child: ReactElement): Array<ReactElement> => {
-  // @ts-ignore
-  if (child.type.name === ExtensionPoint.name) {
-    // @ts-ignore
-    return binder.getExtensions(child.props.name, child.props.props);
-  }
-  return [child];
-};
-
-const mapToProps = (child: ReactElement<RoutingProps>) => {
-  return child.props;
-};
-
-const isSubNavigation = (child: ReactElement) => {
-  // @ts-ignore
-  return child.type.name === SubNavigation.name;
-};
-
-const isActive = (url: string, props: RoutingProps) => {
-  const path = createParentPath(props.to);
-  const matches = matchPath(url, {
-    path,
-    exact: props.activeOnlyWhenExact
-  });
-  return matches != null;
-};
-
-const isSubNavigationActive = (binder: Binder, children: ReactNode, url: string): boolean => {
-  const childArray = React.Children.toArray(children);
-
-  const match = childArray
-    .filter(React.isValidElement)
-    .flatMap(child => expandExtensionPoints(binder, child))
-    .filter(isSubNavigation)
-    .map(mapToProps)
-    .find(props => isActive(url, props));
-
-  return match != null;
-};
-
 export default SecondaryNavigation;

From 5015c4d1332c2260be06f0df1865fbde3953227d Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 12:02:30 +0200
Subject: [PATCH 09/12] fixed missing default value for activeOnlyWhenExact on
 NavLink

---
 scm-ui/ui-components/src/navigation/NavLink.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index 132590e7f6..d9cb3c4e7e 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -26,8 +26,7 @@ import classNames from "classnames";
 import { Link, useRouteMatch } from "react-router-dom";
 import { RoutingProps } from "./RoutingProps";
 import { FC } from "react";
-import { useContext } from "react";
-import useMenuContext, { MenuContext } from "./MenuContext";
+import useMenuContext from "./MenuContext";
 
 type Props = RoutingProps & {
   label: string;
@@ -63,4 +62,8 @@ const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) =>
   );
 };
 
+NavLink.defaultProps = {
+  activeOnlyWhenExact: true
+};
+
 export default NavLink;

From 9e9f1bef318e2aa0fd08e51c1099b9e65dbe5901 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 14:01:14 +0200
Subject: [PATCH 10/12] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6ce1222f5..2c4620fc87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 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)
+
 ## 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))

From fd94746a988a0f8d8d685adccbcb377989c69962 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Tue, 31 Mar 2020 17:11:16 +0200
Subject: [PATCH 11/12] reformat components with prettier

---
 scm-ui/ui-components/src/CardColumn.tsx        |  4 +---
 scm-ui/ui-components/src/DateFromNow.test.ts   |  2 --
 .../ui-components/src/MarkdownView.stories.tsx |  2 +-
 .../src/forms/Checkbox.stories.tsx             |  1 -
 scm-ui/ui-components/src/forms/Checkbox.tsx    | 10 ++--------
 scm-ui/ui-components/src/forms/Radio.tsx       |  1 -
 .../src/forms/Textarea.stories.tsx             |  2 +-
 .../src/layout/Footer.stories.tsx              |  2 +-
 scm-ui/ui-components/src/layout/Page.tsx       |  2 +-
 scm-ui/ui-components/src/layout/Title.tsx      |  2 +-
 scm-ui/ui-components/src/layout/index.ts       |  1 -
 .../ui-components/src/modals/ConfirmAlert.tsx  |  6 +++++-
 .../src/navigation/MenuContext.tsx             |  2 +-
 .../src/navigation/RoutingProps.ts             |  2 +-
 .../src/navigation/SecondaryNavigationItem.tsx |  4 ++--
 .../src/navigation/SubNavigation.tsx           |  6 +++---
 scm-ui/ui-components/src/repos/DiffFile.tsx    | 12 +++++++-----
 .../src/repos/RepositoryEntry.stories.tsx      |  2 +-
 .../ui-extensions/src/ExtensionPoint.test.tsx  | 10 +++++-----
 scm-ui/ui-extensions/src/ExtensionPoint.tsx    |  8 ++------
 yarn.lock                                      | 18 ++++++++++++++----
 21 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/scm-ui/ui-components/src/CardColumn.tsx b/scm-ui/ui-components/src/CardColumn.tsx
index 0ff63e31dd..42c1512690 100644
--- a/scm-ui/ui-components/src/CardColumn.tsx
+++ b/scm-ui/ui-components/src/CardColumn.tsx
@@ -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">
-                  {title}
-                </p>
+                <p className="shorten-text is-marginless">{title}</p>
                 <p className="shorten-text">{description}</p>
               </ContentLeft>
               <ContentRight>{contentRight}</ContentRight>
diff --git a/scm-ui/ui-components/src/DateFromNow.test.ts b/scm-ui/ui-components/src/DateFromNow.test.ts
index 8571864639..19acc08fda 100644
--- a/scm-ui/ui-components/src/DateFromNow.test.ts
+++ b/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);
   });
-
 });
diff --git a/scm-ui/ui-components/src/MarkdownView.stories.tsx b/scm-ui/ui-components/src/MarkdownView.stories.tsx
index 6b49d10555..e43f9afd75 100644
--- a/scm-ui/ui-components/src/MarkdownView.stories.tsx
+++ b/scm-ui/ui-components/src/MarkdownView.stories.tsx
@@ -32,7 +32,7 @@ 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";
+import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
index 32112d97a1..9f714e5af0 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
+++ b/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>
   ));
-
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 00f6285423..70888cf483 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/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
-              type="checkbox"
-              checked={checked}
-              onChange={this.onCheckboxChange}
-              disabled={disabled}
-            />{" "}
-            {label}
+            <input type="checkbox" checked={checked} onChange={this.onCheckboxChange} disabled={disabled} /> {label}
             {this.renderHelp()}
           </label>
         </div>
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index d05e40a19a..fe6a35f4a6 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/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;
 `;
diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
index 2698195519..bcb638cbaa 100644
--- a/scm-ui/ui-components/src/forms/Textarea.stories.tsx
+++ b/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";
diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx
index cae668ed19..c25b618a87 100644
--- a/scm-ui/ui-components/src/layout/Footer.stories.tsx
+++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx
@@ -33,7 +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";
+import { MemoryRouter } from "react-router-dom";
 
 const trillian: Me = {
   name: "trillian",
diff --git a/scm-ui/ui-components/src/layout/Page.tsx b/scm-ui/ui-components/src/layout/Page.tsx
index 5d14d1af46..0f4b4e7b4f 100644
--- a/scm-ui/ui-components/src/layout/Page.tsx
+++ b/scm-ui/ui-components/src/layout/Page.tsx
@@ -52,7 +52,7 @@ const PageActionContainer = styled.div`
 `;
 
 const MarginLeft = styled.div`
-margin-left: 0.5rem;
+  margin-left: 0.5rem;
 `;
 
 const FlexContainer = styled.div`
diff --git a/scm-ui/ui-components/src/layout/Title.tsx b/scm-ui/ui-components/src/layout/Title.tsx
index cd040be936..0e1024ea06 100644
--- a/scm-ui/ui-components/src/layout/Title.tsx
+++ b/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>;
diff --git a/scm-ui/ui-components/src/layout/index.ts b/scm-ui/ui-components/src/layout/index.ts
index 2c9f7fba72..f1876d4ae1 100644
--- a/scm-ui/ui-components/src/layout/index.ts
+++ b/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";
-
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
index b20f971cc2..e8671a77cb 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
+++ b/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>
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
index be412097b1..f02e5ab8d2 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.tsx
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -36,7 +36,7 @@ export const MenuContext = React.createContext<MenuContext>({
   setCollapsed() {}
 });
 
-export const StateMenuContextProvider: FC = ({children}) => {
+export const StateMenuContextProvider: FC = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
 
   const context = {
diff --git a/scm-ui/ui-components/src/navigation/RoutingProps.ts b/scm-ui/ui-components/src/navigation/RoutingProps.ts
index e34f62b97c..20f9d8d900 100644
--- a/scm-ui/ui-components/src/navigation/RoutingProps.ts
+++ b/scm-ui/ui-components/src/navigation/RoutingProps.ts
@@ -26,4 +26,4 @@ export type RoutingProps = {
   to: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
-}
+};
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
index 33924c4a29..698eafe34a 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {FC} from "react";
+import React, { FC } from "react";
 import SubNavigation from "./SubNavigation";
 import NavLink from "./NavLink";
-import {RoutingProps} from "./RoutingProps";
+import { RoutingProps } from "./RoutingProps";
 
 type Props = RoutingProps & {
   label: string;
diff --git a/scm-ui/ui-components/src/navigation/SubNavigation.tsx b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
index 2955527d78..56a6c438d3 100644
--- a/scm-ui/ui-components/src/navigation/SubNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useContext} 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";
+import useMenuContext, { MenuContext } from "./MenuContext";
+import { RoutingProps } from "./RoutingProps";
 
 type Props = RoutingProps & {
   label: string;
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 981423fabe..4b042f0c4d 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -291,11 +291,13 @@ class DiffFile extends React.Component<Props, State> {
                 <DiffButton
                   icon={sideBySide ? "align-left" : "columns"}
                   tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  onClick={() => this.toggleSideBySide(() => {
-                    if (this.state.sideBySide) {
-                      setCollapsed(true);
-                    }
-                  })}
+                  onClick={() =>
+                    this.toggleSideBySide(() => {
+                      if (this.state.sideBySide) {
+                        setCollapsed(true);
+                      }
+                    })
+                  }
                 />
               )}
             </MenuContext.Consumer>
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
index 250c4b18c7..4954d765ed 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
@@ -32,7 +32,7 @@ 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";
+import { MemoryRouter } from "react-router-dom";
 
 const baseDate = "2020-03-26T12:13:42+02:00";
 
diff --git a/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx b/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
index 0b39817186..0f627374bb 100644
--- a/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
+++ b/scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
@@ -182,19 +182,19 @@ describe("ExtensionPoint test", () => {
   });
 
   it("should render an instance with props", () => {
-    const Label = ({name}: {name: string}) => {
+    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"}} />);
+    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}) => {
+    const label = ({ name = "One" }: { name: string }) => {
       return <label>Extension {name}</label>;
     };
     mockedBinder.hasExtension.mockReturnValue(true);
@@ -204,10 +204,10 @@ describe("ExtensionPoint test", () => {
       return {
         ...props,
         name: "Two"
-      }
+      };
     };
 
     const rendered = mount(<ExtensionPoint name="something.special" propTransformer={transformer} />);
     expect(rendered.text()).toBe("Extension Two");
-  })
+  });
 });
diff --git a/scm-ui/ui-extensions/src/ExtensionPoint.tsx b/scm-ui/ui-extensions/src/ExtensionPoint.tsx
index aad9ca7b09..f6a1dde719 100644
--- a/scm-ui/ui-extensions/src/ExtensionPoint.tsx
+++ b/scm-ui/ui-extensions/src/ExtensionPoint.tsx
@@ -23,7 +23,7 @@
  */
 import * as React from "react";
 import { Binder } from "./binder";
-import {Component, FC, ReactNode} from "react";
+import { Component, FC, ReactNode } from "react";
 import useBinder from "./useBinder";
 
 type PropTransformer = (props: object) => object;
@@ -48,11 +48,7 @@ const createInstance = (Component: any, props: object, key?: number) => {
 
 const renderAllExtensions = (binder: Binder, name: string, props: object) => {
   const extensions = binder.getExtensions(name, props);
-  return (
-    <>
-      {extensions.map((cmp, index) => createInstance(cmp, props, index))}
-    </>
-  );
+  return <>{extensions.map((cmp, index) => createInstance(cmp, props, index))}</>;
 };
 
 const renderSingleExtension = (binder: Binder, name: string, props: object) => {
diff --git a/yarn.lock b/yarn.lock
index 7ebd28adce..1f60f6bbed 100644
--- a/yarn.lock
+++ b/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:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.7.2.tgz#f30978d21eb8cac6e2f2fde056a7d04f6844dd50"
-  integrity sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q==
+react-refresh@^0.8.0:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.1.tgz#5500506ad6fc891fdd057d0bf3581f9310abc6a2"
+  integrity sha512-xZIKi49RtLUUSAZ4a4ut2xr+zr4+glOD5v0L413B55MPvlg4EQ6Ctx8PD4CmjlPGoAWmSCTmmkY59TErizNsow==
 
 react-router-dom@^5.1.2:
   version "5.1.2"

From 6c6d6c127242e4cb27c03ee963838f2f221d159b Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Tue, 31 Mar 2020 17:15:09 +0200
Subject: [PATCH 12/12] reformat components with prettier

---
 scm-ui/ui-webapp/src/admin/containers/Admin.tsx            | 2 +-
 .../ui-webapp/src/admin/plugins/components/PluginModal.tsx | 4 +---
 .../src/admin/plugins/components/ShowPendingModal.tsx      | 1 -
 scm-ui/ui-webapp/src/repos/containers/Create.tsx           | 7 ++++++-
 scm-ui/ui-webapp/src/repos/sources/modules/sources.ts      | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index ebfaaa1325..089cb959fb 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -44,7 +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";
+import { StateMenuContextProvider } from "@scm-manager/ui-components/src/navigation/MenuContext";
 
 type Props = RouteComponentProps &
   WithTranslation & {
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
index 1074588e59..05ddf1f848 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
+++ b/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">
-            {this.createRestartSectionContent()}
-          </div>
+          <div className="media-content">{this.createRestartSectionContent()}</div>
         </div>
         {this.renderNotifications()}
       </>
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
index d28b51f927..c9ee5462d4 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
+++ b/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;
 };
diff --git a/scm-ui/ui-webapp/src/repos/containers/Create.tsx b/scm-ui/ui-webapp/src/repos/containers/Create.tsx
index 1c8ff8a824..0ef6121afc 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Create.tsx
+++ b/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
diff --git a/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts b/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
index a7ffac791a..b69cadd017 100644
--- a/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
+++ b/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]: {