Remove use of appBasePath and use history for initializing router

- For details - see elastic#56705
paul-tavares · Mar 20, 2020 · f90253c · f90253c
1 parent 6feed5a
commit f90253c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/components/header_nav.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/components/header_nav.tsx
@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTabs, EuiTab } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
 export interface NavTabs {
   name: string;
@@ -46,33 +47,33 @@ export const navTabs: NavTabs[] = [
   },
 ];
 
-export const HeaderNavigation: React.FunctionComponent<{ basename: string }> = React.memo(
-  ({ basename }) => {
-    const history = useHistory();
-    const location = useLocation();
+export const HeaderNavigation: React.FunctionComponent = React.memo(() => {
+  const history = useHistory();
+  const location = useLocation();
+  const { services } = useKibana();
+  const BASE_PATH = services.application.getUrlForApp('endpoint');
 
-    function renderNavTabs(tabs: NavTabs[]) {
-      return tabs.map((tab, index) => {
-        return (
-          <EuiTab
-            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.href !== '/' && location.pathname.startsWith(tab.href))
-            }
-          >
-            {tab.name}
-          </EuiTab>
-        );
-      });
-    }
+  const tabList = useMemo(() => {
+    return navTabs.map((tab, index) => {
+      return (
+        <EuiTab
+          data-test-subj={`${tab.id}EndpointTab`}
+          key={index}
+          href={`${BASE_PATH}${tab.href}`}
+          onClick={(event: MouseEvent) => {
+            event.preventDefault();
+            history.push(tab.href);
+          }}
+          isSelected={
+            tab.href === location.pathname ||
+            (tab.href !== '/' && location.pathname.startsWith(tab.href))
+          }
+        >
+          {tab.name}
+        </EuiTab>
+      );
+    });
+  }, [BASE_PATH, history, location.pathname]);
 
-    return <EuiTabs>{renderNavTabs(navTabs)}</EuiTabs>;
-  }
-);
+  return <EuiTabs>{tabList}</EuiTabs>;
+});
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/index.tsx
@@ -6,9 +6,9 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { CoreStart, AppMountParameters } from 'kibana/public';
+import { CoreStart, AppMountParameters, ScopedHistory } from 'kibana/public';
 import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
-import { Route, Switch, BrowserRouter } from 'react-router-dom';
+import { Route, Switch, Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import { useObservable } from 'react-use';
@@ -29,12 +29,12 @@ import { EuiThemeProvider } from '../../../../../legacy/common/eui_styled_compon
 export function renderApp(
   coreStart: CoreStart,
   depsStart: EndpointPluginStartDependencies,
-  { appBasePath, element }: AppMountParameters
+  { element, history }: AppMountParameters
 ) {
   coreStart.http.get('/api/endpoint/hello-world');
   const store = appStoreFactory({ coreStart, depsStart });
   ReactDOM.render(
-    <AppRoot basename={appBasePath} store={store} coreStart={coreStart} depsStart={depsStart} />,
+    <AppRoot history={history} store={store} coreStart={coreStart} depsStart={depsStart} />,
     element
   );
   return () => {
@@ -43,15 +43,15 @@ export function renderApp(
 }
 
 interface RouterProps {
-  basename: string;
+  history: ScopedHistory;
   store: Store;
   coreStart: CoreStart;
   depsStart: EndpointPluginStartDependencies;
 }
 
 const AppRoot: React.FunctionComponent<RouterProps> = React.memo(
   ({
-    basename,
+    history,
     store,
     coreStart: { http, notifications, uiSettings, application },
     depsStart: { data },
@@ -63,9 +63,9 @@ const AppRoot: React.FunctionComponent<RouterProps> = React.memo(
         <I18nProvider>
           <KibanaContextProvider services={{ http, notifications, application, data }}>
             <EuiThemeProvider darkMode={isDarkMode}>
-              <BrowserRouter basename={basename}>
+              <Router history={history}>
                 <RouteCapture>
-                  <HeaderNavigation basename={basename} />
+                  <HeaderNavigation />
                   <Switch>
                     <Route
                       exact
@@ -93,7 +93,7 @@ const AppRoot: React.FunctionComponent<RouterProps> = React.memo(
                     />
                   </Switch>
                 </RouteCapture>
-              </BrowserRouter>
+              </Router>
             </EuiThemeProvider>
           </KibanaContextProvider>
         </I18nProvider>