From c49e0045db5c45422aa63dfbbfc7ca3d35fe4066 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 16 Jun 2021 22:54:23 -0700
Subject: [PATCH] Convert Group subnav to EuiSideNav format

---
 .../components/layout/nav.test.tsx            |  3 ++
 .../components/layout/nav.tsx                 |  3 +-
 .../groups/components/group_sub_nav.test.tsx  | 37 +++++++++++--------
 .../views/groups/components/group_sub_nav.tsx | 32 +++++++++-------
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
index 90da5b3163ecfc..2e11a564ebe871 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
@@ -9,6 +9,9 @@ jest.mock('../../../shared/layout', () => ({
   ...jest.requireActual('../../../shared/layout'),
   generateNavLink: jest.fn(({ to }) => ({ href: to })),
 }));
+jest.mock('../../views/groups/components/group_sub_nav', () => ({
+  useGroupSubNav: () => [],
+}));
 
 import React from 'react';
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
index 8e7b13a6218214..90921e9308c1b9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -19,6 +19,7 @@ import {
   GROUPS_PATH,
   ORG_SETTINGS_PATH,
 } from '../../routes';
+import { useGroupSubNav } from '../../views/groups/components/group_sub_nav';
 
 export const useWorkplaceSearchNav = () => {
   const navItems: Array<EuiSideNavItemType<unknown>> = [
@@ -37,7 +38,7 @@ export const useWorkplaceSearchNav = () => {
       id: 'groups',
       name: NAV.GROUPS,
       ...generateNavLink({ to: GROUPS_PATH }),
-      items: [], // TODO: Group subnav
+      items: useGroupSubNav(),
     },
     {
       id: 'usersRoles',
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.test.tsx
index 263ec5f1b27c0d..6e912e65a7b61c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.test.tsx
@@ -7,26 +7,33 @@
 
 import { setMockValues } from '../../../../__mocks__/kea_logic';
 
-import React from 'react';
+jest.mock('../../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
-import { shallow } from 'enzyme';
+import { useGroupSubNav } from './group_sub_nav';
 
-import { SideNavLink } from '../../../../shared/layout';
-
-import { GroupSubNav } from './group_sub_nav';
-
-describe('GroupSubNav', () => {
-  it('renders empty when no group id present', () => {
-    setMockValues({ group: {} });
-    const wrapper = shallow(<GroupSubNav />);
+describe('useGroupSubNav', () => {
+  it('renders nav items', () => {
+    setMockValues({ group: { id: '1' } });
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(0);
+    expect(useGroupSubNav()).toEqual([
+      {
+        id: 'groupOverview',
+        name: 'Overview',
+        href: '/groups/1',
+      },
+      {
+        id: 'groupSourcePrioritization',
+        name: 'Source Prioritization',
+        href: '/groups/1/source_prioritization',
+      },
+    ]);
   });
 
-  it('renders nav items', () => {
-    setMockValues({ group: { id: '1' } });
-    const wrapper = shallow(<GroupSubNav />);
+  it('returns undefined when no group id is present', () => {
+    setMockValues({ group: {} });
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(2);
+    expect(useGroupSubNav()).toEqual(undefined);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.tsx
index c5fc0717d11057..b27f38d75bcc06 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.tsx
@@ -5,28 +5,34 @@
  * 2.0.
  */
 
-import React from 'react';
-
 import { useValues } from 'kea';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../../shared/layout';
 import { NAV } from '../../../constants';
 import { getGroupPath, getGroupSourcePrioritizationPath } from '../../../routes';
 import { GroupLogic } from '../group_logic';
 
-export const GroupSubNav: React.FC = () => {
+export const useGroupSubNav = () => {
   const {
     group: { id },
   } = useValues(GroupLogic);
 
-  if (!id) return null;
+  if (!id) return undefined;
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'groupOverview',
+      name: NAV.GROUP_OVERVIEW,
+      ...generateNavLink({ to: getGroupPath(id) }),
+    },
+    {
+      id: 'groupSourcePrioritization',
+      name: NAV.SOURCE_PRIORITIZATION,
+      ...generateNavLink({ to: getGroupSourcePrioritizationPath(id) }),
+    },
+  ];
 
-  return (
-    <>
-      <SideNavLink to={getGroupPath(id)}>{NAV.GROUP_OVERVIEW}</SideNavLink>
-      <SideNavLink to={getGroupSourcePrioritizationPath(id)}>
-        {NAV.SOURCE_PRIORITIZATION}
-      </SideNavLink>
-    </>
-  );
+  return navItems;
 };