Set up top-level product navigations

NYI: sub navigations (future separate PRs)

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/index.ts

@@ -6,4 +6,5 @@
  */
 
 export { AppSearchPageTemplate } from './page_template';
+export { useAppSearchNav } from './nav';
 export { KibanaHeaderActions } from './kibana_header_actions';

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setMockValues } from '../../../__mocks__/kea_logic';
+
+jest.mock('../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
+
+import { useAppSearchNav } from './nav';
+
+describe('useAppSearchNav', () => {
+  const MOCK_DEFAULT_NAV = [
+    {
+      id: 'engines',
+      name: 'Engines',
+      href: '/engines',
+      items: [],
+    },
+  ];
+
+  it('always generates a default engines nav item', () => {
+    setMockValues({ myRole: {} });
+
+    expect(useAppSearchNav()).toEqual(MOCK_DEFAULT_NAV);
+  });
+
+  it('generates a settings nav item if the user can view settings', () => {
+    setMockValues({ myRole: { canViewSettings: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      ...MOCK_DEFAULT_NAV,
+      {
+        id: 'settings',
+        name: 'Settings',
+        href: '/settings',
+      },
+    ]);
+  });
+
+  it('generates a credentials nav item if the user can view credentials', () => {
+    setMockValues({ myRole: { canViewAccountCredentials: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      ...MOCK_DEFAULT_NAV,
+      {
+        id: 'credentials',
+        name: 'Credentials',
+        href: '/credentials',
+      },
+    ]);
+  });
+
+  it('generates a users & roles nav item if the user can view role mappings', () => {
+    setMockValues({ myRole: { canViewRoleMappings: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      ...MOCK_DEFAULT_NAV,
+      {
+        id: 'usersRoles',
+        name: 'Users & roles',
+        href: '/role_mappings',
+      },
+    ]);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useValues } from 'kea';
+
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../shared/layout';
+import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+
+import { AppLogic } from '../../app_logic';
+import { ENGINES_PATH, SETTINGS_PATH, CREDENTIALS_PATH, ROLE_MAPPINGS_PATH } from '../../routes';
+import { CREDENTIALS_TITLE } from '../credentials';
+import { ENGINES_TITLE } from '../engines';
+import { SETTINGS_TITLE } from '../settings';
+
+export const useAppSearchNav = () => {
+  const {
+    myRole: { canViewSettings, canViewAccountCredentials, canViewRoleMappings },
+  } = useValues(AppLogic);
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'engines',
+      name: ENGINES_TITLE,
+      ...generateNavLink({ to: ENGINES_PATH, isRoot: true }),
+      items: [], // TODO: Engine nav
+    },
+  ];
+
+  if (canViewSettings) {
+    navItems.push({
+      id: 'settings',
+      name: SETTINGS_TITLE,
+      ...generateNavLink({ to: SETTINGS_PATH }),
+    });
+  }
+
+  if (canViewAccountCredentials) {
+    navItems.push({
+      id: 'credentials',
+      name: CREDENTIALS_TITLE,
+      ...generateNavLink({ to: CREDENTIALS_PATH }),
+    });
+  }
+
+  if (canViewRoleMappings) {
+    navItems.push({
+      id: 'usersRoles',
+      name: ROLE_MAPPINGS_TITLE,
+      ...generateNavLink({ to: ROLE_MAPPINGS_PATH }),
+    });
+  }
+
+  return navItems;
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx

@@ -5,6 +5,10 @@
  * 2.0.
  */
 
+jest.mock('./nav', () => ({
+  useAppSearchNav: () => [],
+}));
+
 import React from 'react';
 
 import { shallow } from 'enzyme';

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx

@@ -12,6 +12,8 @@ import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplate, PageTemplateProps } from '../../../shared/layout';
 import { SendAppSearchTelemetry } from '../../../shared/telemetry';
 
+import { useAppSearchNav } from './nav';
+
 export const AppSearchPageTemplate: React.FC<PageTemplateProps> = ({
   children,
   pageChrome,
@@ -23,7 +25,7 @@ export const AppSearchPageTemplate: React.FC<PageTemplateProps> = ({
       {...pageTemplateProps}
       solutionNav={{
         name: APP_SEARCH_PLUGIN.NAME,
-        items: [], // TODO: Nav items
+        items: useAppSearchNav(),
       }}
       setPageChrome={pageChrome && <SetAppSearchChrome trail={pageChrome} />}
     >

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/index.ts

@@ -6,7 +6,7 @@
  */
 
 export { WorkplaceSearchPageTemplate } from './page_template';
-export { WorkplaceSearchNav } from './nav';
+export { useWorkplaceSearchNav, WorkplaceSearchNav } from './nav';
 export { WorkplaceSearchHeaderActions } from './kibana_header_actions';
 export { AccountHeader } from './account_header';
 export { PersonalDashboardLayout } from './personal_dashboard_layout';

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx

@@ -5,15 +5,60 @@
  * 2.0.
  */
 
-import '../../../__mocks__/enterprise_search_url.mock';
+jest.mock('../../../shared/layout', () => ({
+  ...jest.requireActual('../../../shared/layout'),
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
 import React from 'react';
 
 import { shallow } from 'enzyme';
 
 import { SideNav, SideNavLink } from '../../../shared/layout';
 
-import { WorkplaceSearchNav } from './';
+import { useWorkplaceSearchNav, WorkplaceSearchNav } from './';
+
+describe('useWorkplaceSearchNav', () => {
+  it('returns an array of top-level Workplace Search nav items', () => {
+    expect(useWorkplaceSearchNav()).toEqual([
+      {
+        id: 'root',
+        name: 'Overview',
+        href: '/',
+      },
+      {
+        id: 'sources',
+        name: 'Sources',
+        href: '/sources',
+        items: [],
+      },
+      {
+        id: 'groups',
+        name: 'Groups',
+        href: '/groups',
+        items: [],
+      },
+      {
+        id: 'usersRoles',
+        name: 'Users & roles',
+        href: '/role_mappings',
+      },
+      {
+        id: 'security',
+        name: 'Security',
+        href: '/security',
+      },
+      {
+        id: 'settings',
+        name: 'Settings',
+        href: '/settings',
+        items: [],
+      },
+    ]);
+  });
+});
+
+// TODO: Delete below once fully migrated to KibanaPageTemplate
 
 describe('WorkplaceSearchNav', () => {
   it('renders', () => {

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx

@@ -7,10 +7,10 @@
 
 import React from 'react';
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSideNavItemType, EuiSpacer } from '@elastic/eui';
 
 import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
-import { SideNav, SideNavLink } from '../../../shared/layout';
+import { generateNavLink, SideNav, SideNavLink } from '../../../shared/layout';
 import { NAV } from '../../constants';
 import {
   SOURCES_PATH,
@@ -20,6 +20,47 @@ import {
   ORG_SETTINGS_PATH,
 } from '../../routes';
 
+export const useWorkplaceSearchNav = () => {
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'root',
+      name: NAV.OVERVIEW,
+      ...generateNavLink({ to: '/', isRoot: true }),
+    },
+    {
+      id: 'sources',
+      name: NAV.SOURCES,
+      ...generateNavLink({ to: SOURCES_PATH }),
+      items: [], // TODO: Source subnav
+    },
+    {
+      id: 'groups',
+      name: NAV.GROUPS,
+      ...generateNavLink({ to: GROUPS_PATH }),
+      items: [], // TODO: Group subnav
+    },
+    {
+      id: 'usersRoles',
+      name: NAV.ROLE_MAPPINGS,
+      ...generateNavLink({ to: ROLE_MAPPINGS_PATH }),
+    },
+    {
+      id: 'security',
+      name: NAV.SECURITY,
+      ...generateNavLink({ to: SECURITY_PATH }),
+    },
+    {
+      id: 'settings',
+      name: NAV.SETTINGS,
+      ...generateNavLink({ to: ORG_SETTINGS_PATH }),
+      items: [], // TODO: Settings subnav
+    },
+  ];
+  return navItems;
+};
+
+// TODO: Delete below once fully migrated to KibanaPageTemplate
+
 interface Props {
   sourcesSubNav?: React.ReactNode;
   groupsSubNav?: React.ReactNode;

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.test.tsx

@@ -5,6 +5,10 @@
  * 2.0.
  */
 
+jest.mock('./nav', () => ({
+  useWorkplaceSearchNav: () => [],
+}));
+
 import React from 'react';
 
 import { shallow } from 'enzyme';

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.tsx

@@ -12,6 +12,8 @@ import { SetWorkplaceSearchChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplate, PageTemplateProps } from '../../../shared/layout';
 import { SendWorkplaceSearchTelemetry } from '../../../shared/telemetry';
 
+import { useWorkplaceSearchNav } from './nav';
+
 export const WorkplaceSearchPageTemplate: React.FC<PageTemplateProps> = ({
   children,
   pageChrome,
@@ -24,7 +26,7 @@ export const WorkplaceSearchPageTemplate: React.FC<PageTemplateProps> = ({
       {...pageTemplateProps}
       solutionNav={{
         name: WORKPLACE_SEARCH_PLUGIN.NAME,
-        items: [], // TODO: Nav items
+        items: useWorkplaceSearchNav(),
       }}
       setPageChrome={pageChrome && <SetWorkplaceSearchChrome trail={pageChrome} />}
     >