From c1fa1923a242efcedef94b733716e4ac9305252f Mon Sep 17 00:00:00 2001
From: Josh Dover <me@joshdover.com>
Date: Mon, 24 Aug 2020 11:41:38 -0600
Subject: [PATCH] [7.x] Configure ScopedHistory consistenty regardless of URL
 used to mount app (#75074) (#75684)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/core/public/application/ui/app_router.tsx  |  4 ++--
 .../core_plugin_a/public/application.tsx       |  7 ++++---
 .../test_suites/core_plugins/applications.ts   | 18 +++++++++++++++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/core/public/application/ui/app_router.tsx b/src/core/public/application/ui/app_router.tsx
index f2d2d1e6587ac..f1f22237c32db 100644
--- 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
index 159bb54f50903..9cf81d27e4e8d 100644
--- 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
index 9306b62b9d521..9ecef65f5f09a 100644
--- 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');
     });