Convert Settings subnav to EuiSideNav format

+ update main WS nav
elastic · Jun 17, 2021 · 2fbe05b · 2fbe05b
1 parent cfe6d65
commit 2fbe05b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 20 deletions.
diff --git a/...ins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/...ins/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/settings/components/settings_sub_nav', () => ({
+  useSettingsSubNav: () => [],
+}));
 
 import React from 'react';
 

diff --git a/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -19,6 +19,7 @@ import {
   GROUPS_PATH,
   ORG_SETTINGS_PATH,
 } from '../../routes';
+import { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav';
 
 export const useWorkplaceSearchNav = () => {
   const navItems: Array<EuiSideNavItemType<unknown>> = [
@@ -53,7 +54,7 @@ export const useWorkplaceSearchNav = () => {
       id: 'settings',
       name: NAV.SETTINGS,
       ...generateNavLink({ to: ORG_SETTINGS_PATH }),
-      items: [], // TODO: Settings subnav
+      items: useSettingsSubNav(),
     },
   ];
 

diff --git a/.../public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx b/.../public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx
@@ -5,18 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+jest.mock('../../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
-import { shallow } from 'enzyme';
+import { mockUseRouteMatch } from '../../../../__mocks__/react_router';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { useSettingsSubNav } from './settings_sub_nav';
 
-import { SettingsSubNav } from './settings_sub_nav';
+describe('useSettingsSubNav', () => {
+  it('returns an array of side nav items when on the /settings path', () => {
+    mockUseRouteMatch.mockReturnValueOnce(true);
 
-describe('SettingsSubNav', () => {
-  it('renders', () => {
-    const wrapper = shallow(<SettingsSubNav />);
+    expect(useSettingsSubNav()).toEqual([
+      {
+        id: 'settingsCustomize',
+        name: 'Customize',
+        href: '/settings/customize',
+      },
+      {
+        id: 'settingsConnectors',
+        name: 'Content source connectors',
+        href: '/settings/connectors',
+      },
+      {
+        id: 'settingsOAuth',
+        name: 'OAuth application',
+        href: '/settings/oauth',
+      },
+    ]);
+  });
+
+  it('returns undefined when not on the /settings path', () => {
+    mockUseRouteMatch.mockReturnValueOnce(false);
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(3);
+    expect(useSettingsSubNav()).toEqual(undefined);
   });
 });
diff --git a/...earch/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx b/...earch/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx
@@ -5,22 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../../shared/layout';
 import { NAV } from '../../../constants';
 import {
+  ORG_SETTINGS_PATH,
   ORG_SETTINGS_CUSTOMIZE_PATH,
   ORG_SETTINGS_CONNECTORS_PATH,
   ORG_SETTINGS_OAUTH_APPLICATION_PATH,
 } from '../../../routes';
 
-export const SettingsSubNav: React.FC = () => (
-  <>
-    <SideNavLink to={ORG_SETTINGS_CUSTOMIZE_PATH}>{NAV.SETTINGS_CUSTOMIZE}</SideNavLink>
-    <SideNavLink to={ORG_SETTINGS_CONNECTORS_PATH}>
-      {NAV.SETTINGS_SOURCE_PRIORITIZATION}
-    </SideNavLink>
-    <SideNavLink to={ORG_SETTINGS_OAUTH_APPLICATION_PATH}>{NAV.SETTINGS_OAUTH}</SideNavLink>
-  </>
-);
+export const useSettingsSubNav = () => {
+  const isSettingsPage = !!useRouteMatch(ORG_SETTINGS_PATH);
+  if (!isSettingsPage) return undefined;
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'settingsCustomize',
+      name: NAV.SETTINGS_CUSTOMIZE,
+      ...generateNavLink({ to: ORG_SETTINGS_CUSTOMIZE_PATH }),
+    },
+    {
+      id: 'settingsConnectors',
+      name: NAV.SETTINGS_SOURCE_PRIORITIZATION,
+      ...generateNavLink({ to: ORG_SETTINGS_CONNECTORS_PATH, shouldShowActiveForSubroutes: true }),
+    },
+    {
+      id: 'settingsOAuth',
+      name: NAV.SETTINGS_OAUTH,
+      ...generateNavLink({ to: ORG_SETTINGS_OAUTH_APPLICATION_PATH }),
+    },
+  ];
+
+  return navItems;
+};