From 9d1ba4d7111e6bd0b2d99b5461a93994cb9e9c71 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Wed, 16 Sep 2020 17:50:28 -0700
Subject: [PATCH] [Enterprise Search] Add nested sub navigation to SideNavLinks
 (#77685)

* Add subNav prop to SideNavLinks

- for nested navigation

* [Probably extra] Tweak CSS to allow for recursive subnesting

- while attempting to expand the hitbox area of nested links as much as possible

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../applications/shared/layout/side_nav.scss     | 11 +++++++++++
 .../applications/shared/layout/side_nav.test.tsx | 16 ++++++++++++++++
 .../applications/shared/layout/side_nav.tsx      |  3 +++
 3 files changed, 30 insertions(+)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss
index d673542ba1983..79cd7634cfaa0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss
@@ -72,4 +72,15 @@ $euiSizeML: $euiSize * 1.25; // 20px - between medium and large ¯\_(ツ)_/¯
       }
     }
   }
+
+  &__subNav {
+    padding-left: $euiSizeML;
+
+    // Extends the click area of links more to the left, so that second tiers
+    // of subnavigation links still have the same hitbox as first tier links
+    .enterpriseSearchNavLinks__item {
+      margin-left: -$euiSizeML;
+      padding-left: $euiSizeXXL;
+    }
+  }
 }
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx
index c117fa404a16b..b006068ac0d9e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx
@@ -89,4 +89,20 @@ describe('SideNavLink', () => {
     expect(wrapper.find('.testing')).toHaveLength(1);
     expect(wrapper.find('[data-test-subj="testing"]')).toHaveLength(1);
   });
+
+  it('renders nested subnavigation', () => {
+    const subNav = (
+      <SideNavLink to="/elsewhere" data-test-subj="subNav">
+        Another link!
+      </SideNavLink>
+    );
+    const wrapper = shallow(
+      <SideNavLink to="/" subNav={subNav}>
+        Link
+      </SideNavLink>
+    );
+
+    expect(wrapper.find('.enterpriseSearchNavLinks__subNav')).toHaveLength(1);
+    expect(wrapper.find('[data-test-subj="subNav"]')).toHaveLength(1);
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
index 72e4f2f091496..edcfc2c84e3ad 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
@@ -66,6 +66,7 @@ interface ISideNavLinkProps {
   isExternal?: boolean;
   className?: string;
   isRoot?: boolean;
+  subNav?: React.ReactNode;
 }
 
 export const SideNavLink: React.FC<ISideNavLinkProps> = ({
@@ -74,6 +75,7 @@ export const SideNavLink: React.FC<ISideNavLinkProps> = ({
   children,
   className,
   isRoot,
+  subNav,
   ...rest
 }) => {
   const { closeNavigation } = useContext(NavContext) as INavContext;
@@ -103,6 +105,7 @@ export const SideNavLink: React.FC<ISideNavLinkProps> = ({
           {children}
         </EuiLink>
       )}
+      {subNav && <ul className="enterpriseSearchNavLinks__subNav">{subNav}</ul>}
     </li>
   );
 };