[Endpoint] add react router to endpoint app (#53808)

* add react router to endpoint app * linting * linting * linting * correct tests * change history from hash to browser, add new test util * remove default values in helper functions * fix type check, use FunctionComponent as oppsed to FC * use BrowserRouter component * use BrowserRouter component lin * add comments to test framework, change function name to include browserHistory Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jan 2, 2020 · fa6a801 · fa6a801
1 parent d9554ff
commit fa6a801
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 21 deletions.
diff --git a/test/functional/page_objects/common_page.ts b/test/functional/page_objects/common_page.ts
@@ -39,6 +39,14 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
   const defaultTryTimeout = config.get('timeouts.try');
   const defaultFindTimeout = config.get('timeouts.find');
 
+  interface NavigateProps {
+    appConfig: {};
+    ensureCurrentUrl: boolean;
+    shouldLoginIfPrompted: boolean;
+    shouldAcceptAlert: boolean;
+    useActualUrl: boolean;
+  }
+
   class CommonPage {
     /**
      * Navigates the browser window to provided URL
@@ -115,6 +123,34 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
       return currentUrl;
     }
 
+    private async navigate(navigateProps: NavigateProps) {
+      const {
+        appConfig,
+        ensureCurrentUrl,
+        shouldLoginIfPrompted,
+        shouldAcceptAlert,
+        useActualUrl,
+      } = navigateProps;
+      const appUrl = getUrl.noAuth(config.get('servers.kibana'), appConfig);
+
+      await retry.try(async () => {
+        if (useActualUrl) {
+          log.debug(`navigateToActualUrl ${appUrl}`);
+          await browser.get(appUrl);
+        } else {
+          await CommonPage.navigateToUrlAndHandleAlert(appUrl, shouldAcceptAlert);
+        }
+
+        const currentUrl = shouldLoginIfPrompted
+          ? await this.loginIfPrompted(appUrl)
+          : await browser.getCurrentUrl();
+
+        if (ensureCurrentUrl && !currentUrl.includes(appUrl)) {
+          throw new Error(`expected ${currentUrl}.includes(${appUrl})`);
+        }
+      });
+    }
+
     /**
      * Navigates browser using the pathname from the appConfig and subUrl as the hash
      * @param appName As defined in the apps config, e.g. 'home'
@@ -137,23 +173,44 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
         hash: useActualUrl ? subUrl : `/${appName}/${subUrl}`,
       };
 
-      const appUrl = getUrl.noAuth(config.get('servers.kibana'), appConfig);
-
-      await retry.try(async () => {
-        if (useActualUrl) {
-          log.debug(`navigateToActualUrl ${appUrl}`);
-          await browser.get(appUrl);
-        } else {
-          await CommonPage.navigateToUrlAndHandleAlert(appUrl, shouldAcceptAlert);
-        }
+      await this.navigate({
+        appConfig,
+        ensureCurrentUrl,
+        shouldLoginIfPrompted,
+        shouldAcceptAlert,
+        useActualUrl,
+      });
+    }
 
-        const currentUrl = shouldLoginIfPrompted
-          ? await this.loginIfPrompted(appUrl)
-          : await browser.getCurrentUrl();
+    /**
+     * Navigates browser using the pathname from the appConfig and subUrl as the extended path.
+     * This was added to be able to test an application that uses browser history over hash history.
+     * @param appName As defined in the apps config, e.g. 'home'
+     * @param subUrl The route after the appUrl, e.g. 'tutorial_directory/sampleData'
+     * @param args additional arguments
+     */
+    public async navigateToUrlWithBrowserHistory(
+      appName: string,
+      subUrl?: string,
+      {
+        basePath = '',
+        ensureCurrentUrl = true,
+        shouldLoginIfPrompted = true,
+        shouldAcceptAlert = true,
+        useActualUrl = true,
+      } = {}
+    ) {
+      const appConfig = {
+        // subUrl following the basePath, assumes no hashes.  Ex: 'app/endpoint/management'
+        pathname: `${basePath}${config.get(['apps', appName]).pathname}${subUrl}`,
+      };
 
-        if (ensureCurrentUrl && !currentUrl.includes(appUrl)) {
-          throw new Error(`expected ${currentUrl}.includes(${appUrl})`);
-        }
+      await this.navigate({
+        appConfig,
+        ensureCurrentUrl,
+        shouldLoginIfPrompted,
+        shouldAcceptAlert,
+        useActualUrl,
       });
     }
 

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/index.tsx
@@ -8,24 +8,55 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart, AppMountParameters } from 'kibana/public';
 import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { Route, BrowserRouter, Switch } from 'react-router-dom';
 
 /**
  * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
  */
-export function renderApp(coreStart: CoreStart, { element }: AppMountParameters) {
+export function renderApp(coreStart: CoreStart, { appBasePath, element }: AppMountParameters) {
   coreStart.http.get('/api/endpoint/hello-world');
 
-  ReactDOM.render(<AppRoot />, element);
+  ReactDOM.render(<AppRoot basename={appBasePath} />, element);
 
   return () => {
     ReactDOM.unmountComponentAtNode(element);
   };
 }
 
-const AppRoot = React.memo(() => (
+interface RouterProps {
+  basename: string;
+}
+
+const AppRoot: React.FunctionComponent<RouterProps> = React.memo(({ basename }) => (
   <I18nProvider>
-    <h1 data-test-subj="welcomeTitle">
-      <FormattedMessage id="xpack.endpoint.welcomeTitle" defaultMessage="Hello World" />
-    </h1>
+    <BrowserRouter basename={basename}>
+      <Switch>
+        <Route
+          exact
+          path="/"
+          render={() => (
+            <h1 data-test-subj="welcomeTitle">
+              <FormattedMessage id="xpack.endpoint.welcomeTitle" defaultMessage="Hello World" />
+            </h1>
+          )}
+        />
+        <Route
+          path="/management"
+          render={() => (
+            <h1 data-test-subj="endpointManagement">
+              <FormattedMessage
+                id="xpack.endpoint.endpointManagement"
+                defaultMessage="Manage Endpoints"
+              />
+            </h1>
+          )}
+        />
+        <Route
+          render={() => (
+            <FormattedMessage id="xpack.endpoint.notFound" defaultMessage="Page Not Found" />
+          )}
+        />
+      </Switch>
+    </BrowserRouter>
   </I18nProvider>
 ));
diff --git a/x-pack/test/functional/apps/endpoint/feature_controls/endpoint_spaces.ts b/x-pack/test/functional/apps/endpoint/feature_controls/endpoint_spaces.ts
@@ -42,6 +42,15 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
         });
         await testSubjects.existOrFail('welcomeTitle');
       });
+
+      it(`endpoint management shows 'Manage Endpoints'`, async () => {
+        await pageObjects.common.navigateToUrlWithBrowserHistory('endpoint', '/management', {
+          basePath: '/s/custom_space',
+          ensureCurrentUrl: false,
+          shouldLoginIfPrompted: false,
+        });
+        await testSubjects.existOrFail('endpointManagement');
+      });
     });
 
     describe('space with endpoint disabled', () => {