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] 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;