[Enterprise Search] Added a shouldShowActiveForSubroutes option (#83338)

elastic · Nov 17, 2020 · 8ecce4e · 8ecce4e
1 parent 46b9db3
commit 8ecce4e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
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
@@ -105,6 +105,32 @@ describe('SideNavLink', () => {
     expect(wrapper.find('.enterpriseSearchNavLinks__subNav')).toHaveLength(1);
     expect(wrapper.find('[data-test-subj="subNav"]')).toHaveLength(1);
   });
+
+  describe('shouldShowActiveForSubroutes', () => {
+    it("won't set an active class when route is a subroute of 'to'", () => {
+      (useLocation as jest.Mock).mockImplementationOnce(() => ({ pathname: '/documents/1234' }));
+
+      const wrapper = shallow(
+        <SideNavLink to="/documents" isRoot>
+          Link
+        </SideNavLink>
+      );
+
+      expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(0);
+    });
+
+    it('sets an active class if the current path is a subRoute of "to", and shouldShowActiveForSubroutes is true', () => {
+      (useLocation as jest.Mock).mockImplementationOnce(() => ({ pathname: '/documents/1234' }));
+
+      const wrapper = shallow(
+        <SideNavLink to="/documents" isRoot shouldShowActiveForSubroutes>
+          Link
+        </SideNavLink>
+      );
+
+      expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(1);
+    });
+  });
 });
 
 describe('SideNavItem', () => {

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
@@ -63,15 +63,17 @@ export const SideNav: React.FC<SideNavProps> = ({ product, children }) => {
 
 interface SideNavLinkProps {
   to: string;
+  shouldShowActiveForSubroutes?: boolean;
   isExternal?: boolean;
   className?: string;
   isRoot?: boolean;
   subNav?: React.ReactNode;
 }
 
 export const SideNavLink: React.FC<SideNavLinkProps> = ({
-  isExternal,
   to,
+  shouldShowActiveForSubroutes = false,
+  isExternal,
   children,
   className,
   isRoot,
@@ -82,7 +84,10 @@ export const SideNavLink: React.FC<SideNavLinkProps> = ({
 
   const { pathname } = useLocation();
   const currentPath = stripTrailingSlash(pathname);
-  const isActive = currentPath === to || (isRoot && currentPath === '');
+  const isActive =
+    currentPath === to ||
+    (shouldShowActiveForSubroutes && currentPath.startsWith(to)) ||
+    (isRoot && currentPath === '');
 
   const classes = classNames('enterpriseSearchNavLinks__item', className, {
     'enterpriseSearchNavLinks__item--isActive': !isExternal && isActive, // eslint-disable-line @typescript-eslint/naming-convention