[Endpoint] Task/add nav bar (#58604)

* Add tabs to the Endpoint app.  Uses EuiTabs and browser history for integration with react-router

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 3 people

x-pack/plugins/endpoint/public/applications/endpoint/components/header_nav.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { MouseEvent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTabs, EuiTab } from '@elastic/eui';
+import { useHistory, useLocation } from 'react-router-dom';
+
+export interface NavTabs {
+  name: string;
+  id: string;
+  href: string;
+}
+
+export const navTabs: NavTabs[] = [
+  {
+    id: 'home',
+    name: i18n.translate('xpack.endpoint.headerNav.home', {
+      defaultMessage: 'Home',
+    }),
+    href: '/',
+  },
+  {
+    id: 'management',
+    name: i18n.translate('xpack.endpoint.headerNav.management', {
+      defaultMessage: 'Management',
+    }),
+    href: '/management',
+  },
+  {
+    id: 'alerts',
+    name: i18n.translate('xpack.endpoint.headerNav.alerts', {
+      defaultMessage: 'Alerts',
+    }),
+    href: '/alerts',
+  },
+  {
+    id: 'policies',
+    name: i18n.translate('xpack.endpoint.headerNav.policies', {
+      defaultMessage: 'Policies',
+    }),
+    href: '/policy',
+  },
+];
+
+export const HeaderNavigation: React.FunctionComponent<{ basename: string }> = React.memo(
+  ({ basename }) => {
+    const history = useHistory();
+    const location = useLocation();
+
+    function renderNavTabs(tabs: NavTabs[]) {
+      return tabs.map((tab, index) => {
+        return (
+          <EuiTab
+            data-testid={`${tab.id}EndpointTab`}
+            data-test-subj={`${tab.id}EndpointTab`}
+            key={index}
+            href={`${basename}${tab.href}`}
+            onClick={(event: MouseEvent) => {
+              event.preventDefault();
+              history.push(tab.href);
+            }}
+            isSelected={tab.href === location.pathname}
+          >
+            {tab.name}
+          </EuiTab>
+        );
+      });
+    }
+
+    return <EuiTabs>{renderNavTabs(navTabs)}</EuiTabs>;
+  }
+);

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

@@ -16,6 +16,7 @@ import { appStoreFactory } from './store';
 import { AlertIndex } from './view/alerts';
 import { ManagementList } from './view/managing';
 import { PolicyList } from './view/policy';
+import { HeaderNavigation } from './components/header_nav';
 
 /**
  * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
@@ -41,6 +42,7 @@ const AppRoot: React.FunctionComponent<RouterProps> = React.memo(({ basename, st
     <I18nProvider>
       <BrowserRouter basename={basename}>
         <RouteCapture>
+          <HeaderNavigation basename={basename} />
           <Switch>
             <Route
               exact

x-pack/test/functional/apps/endpoint/header_nav.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default ({ getPageObjects, getService }: FtrProviderContext) => {
+  const pageObjects = getPageObjects(['common', 'endpoint']);
+  const testSubjects = getService('testSubjects');
+
+  describe('Header nav', function() {
+    this.tags('ciGroup7');
+    before(async () => {
+      await pageObjects.common.navigateToApp('endpoint');
+    });
+
+    it('renders the tabs when the app loads', async () => {
+      const homeTabText = await testSubjects.getVisibleText('homeEndpointTab');
+      const managementTabText = await testSubjects.getVisibleText('managementEndpointTab');
+      const alertsTabText = await testSubjects.getVisibleText('alertsEndpointTab');
+      const policiesTabText = await testSubjects.getVisibleText('policiesEndpointTab');
+
+      expect(homeTabText.trim()).to.be('Home');
+      expect(managementTabText.trim()).to.be('Management');
+      expect(alertsTabText.trim()).to.be('Alerts');
+      expect(policiesTabText.trim()).to.be('Policies');
+    });
+
+    it('renders the management page when the Management tab is selected', async () => {
+      await (await testSubjects.find('managementEndpointTab')).click();
+      await testSubjects.existOrFail('managementViewTitle');
+    });
+
+    it('renders the alerts page when the Alerts tab is selected', async () => {
+      await (await testSubjects.find('alertsEndpointTab')).click();
+      await testSubjects.existOrFail('alertListPage');
+    });
+
+    it('renders the policy page when Policy tab is selected', async () => {
+      await (await testSubjects.find('policiesEndpointTab')).click();
+      await testSubjects.existOrFail('policyViewTitle');
+    });
+
+    it('renders the home page when Home tab is selected after selecting another tab', async () => {
+      await (await testSubjects.find('managementEndpointTab')).click();
+      await testSubjects.existOrFail('managementViewTitle');
+
+      await (await testSubjects.find('homeEndpointTab')).click();
+      await testSubjects.existOrFail('welcomeTitle');
+    });
+  });
+};

x-pack/test/functional/apps/endpoint/index.ts

@@ -11,6 +11,7 @@ export default function({ loadTestFile }: FtrProviderContext) {
 
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./landing_page'));
+    loadTestFile(require.resolve('./header_nav'));
     loadTestFile(require.resolve('./management'));
     loadTestFile(require.resolve('./policy_list'));
     loadTestFile(require.resolve('./alert_list'));