Convert Group subnav to EuiSideNav format

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

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',

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);
   });
 });

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