Configure ScopedHistory consistenty regardless of URL used to mount app

elastic · Aug 17, 2020 · 0bfb4b4 · 0bfb4b4
1 parent 0b28dc2
commit 0bfb4b4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/core/public/application/ui/app_router.tsx b/src/core/public/application/ui/app_router.tsx
@@ -64,9 +64,9 @@ export const AppRouter: FunctionComponent<Props> = ({
               key={mounter.appRoute}
               path={mounter.appRoute}
               exact={mounter.exactRoute}
-              render={({ match: { url } }) => (
+              render={({ match: { path } }) => (
                 <AppContainer
-                  appPath={url}
+                  appPath={path}
                   appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
                   createScopedHistory={createScopedHistory}
                   {...{ appId, mounter, setAppLeaveHandler, setIsMounting }}

diff --git a/test/plugin_functional/plugins/core_plugin_a/public/application.tsx b/test/plugin_functional/plugins/core_plugin_a/public/application.tsx
@@ -20,7 +20,7 @@
 import { History } from 'history';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Router, Route, withRouter, RouteComponentProps, Redirect } from 'react-router-dom';
 
 import {
   EuiPage,
@@ -95,7 +95,7 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
           {
             id: 'home',
             name: 'Home',
-            onClick: () => history.push(''),
+            onClick: () => history.push('/home'),
             'data-test-subj': 'fooNavHome',
           },
           {
@@ -122,7 +122,8 @@ const FooApp = ({ history, context }: { history: History; context: AppMountConte
       <EuiPageSideBar>
         <Nav navigateToApp={context.core.application.navigateToApp} />
       </EuiPageSideBar>
-      <Route path="/" exact component={Home} />
+      <Route path="/" exact render={() => <Redirect to="/home" />} />
+      <Route path="/home" exact component={Home} />
       <Route path="/page-a" component={PageA} />
     </EuiPage>
   </Router>

diff --git a/test/plugin_functional/test_suites/core_plugins/applications.ts b/test/plugin_functional/test_suites/core_plugins/applications.ts
@@ -54,6 +54,9 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
     });
   };
 
+  const navigateTo = async (path: string) =>
+    await browser.navigateTo(`${PageObjects.common.getHostPort()}${path}`);
+
   describe('ui applications', function describeIndexTests() {
     before(async () => {
       await PageObjects.common.navigateToApp('foo');
@@ -63,6 +66,15 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
       await testSubjects.existOrFail('fooAppHome');
     });
 
+    it('redirects and renders correctly regardless of trailing slash', async () => {
+      await navigateTo(`/app/foo`);
+      await waitForUrlToBe('/app/foo/home');
+      await testSubjects.existOrFail('fooAppHome');
+      await navigateTo(`/app/foo/`);
+      await waitForUrlToBe('/app/foo/home');
+      await testSubjects.existOrFail('fooAppHome');
+    });
+
     it('navigates to its own pages', async () => {
       // Go to page A
       await testSubjects.click('fooNavPageA');
@@ -72,7 +84,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
       // Go to home page
       await testSubjects.click('fooNavHome');
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });
@@ -86,7 +98,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
     it('navigates to app root when navlink is clicked', async () => {
       await appsMenu.clickLink('Foo');
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       // await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });
@@ -105,7 +117,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
     it('can use the back button to navigate back to previous app', async () => {
       await browser.goBack();
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });