From 2fbe05b5b10338c56fe266e7b4a4d8b0f938fe53 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 16 Jun 2021 21:49:23 -0700 Subject: [PATCH] Convert Settings subnav to EuiSideNav format + update main WS nav --- .../components/layout/nav.test.tsx | 3 ++ .../components/layout/nav.tsx | 3 +- .../components/settings_sub_nav.test.tsx | 38 ++++++++++++++---- .../settings/components/settings_sub_nav.tsx | 40 ++++++++++++++----- 4 files changed, 64 insertions(+), 20 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..dcca51fb775137 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/settings/components/settings_sub_nav', () => ({ + useSettingsSubNav: () => [], +})); 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..509ab4c8b22404 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 { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav'; export const useWorkplaceSearchNav = () => { const navItems: Array> = [ @@ -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/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx index 5cd8a3fc1cf031..31b0bc6af996e8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx +++ b/x-pack/plugins/enterprise_search/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(); + 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/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx index 3f68997a17b8bb..be231075b30217 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx +++ b/x-pack/plugins/enterprise_search/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 = () => ( - <> - {NAV.SETTINGS_CUSTOMIZE} - - {NAV.SETTINGS_SOURCE_PRIORITIZATION} - - {NAV.SETTINGS_OAUTH} - -); +export const useSettingsSubNav = () => { + const isSettingsPage = !!useRouteMatch(ORG_SETTINGS_PATH); + if (!isSettingsPage) return undefined; + + const navItems: Array> = [ + { + 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; +};