use individual route for each KP app

src/core/public/application/application_service.tsx

@@ -198,6 +198,7 @@ export class ApplicationService {
           appBasePath: basePath.prepend(app.appRoute!),
           mount: wrapMount(plugin, app),
           unmountBeforeMounting: false,
+          legacy: false,
         });
       },
       registerLegacyApp: app => {
@@ -232,6 +233,7 @@ export class ApplicationService {
           appBasePath,
           mount,
           unmountBeforeMounting: true,
+          legacy: true,
         });
       },
       registerAppUpdater: (appUpdater$: Observable<AppUpdater>) =>

src/core/public/application/integration_tests/router.test.tsx

@@ -27,7 +27,7 @@ import { createRenderer, createAppMounter, createLegacyAppMounter, getUnmounter
 import { AppStatus } from '../types';
 import { ScopedHistory } from '../scoped_history';
 
-describe('AppContainer', () => {
+describe('AppRouter', () => {
   let mounters: MockedMounterMap<EitherApp>;
   let globalHistory: History;
   let appStatuses$: BehaviorSubject<Map<string, AppStatus>>;
@@ -78,6 +78,16 @@ describe('AppContainer', () => {
           history.push('/subpath');
         },
       }),
+      createAppMounter({
+        appId: 'app5',
+        html: '<div>App 5</div>',
+        appRoute: '/app/my-app/app5',
+      }),
+      createAppMounter({
+        appId: 'app6',
+        html: '<div>App 6</div>',
+        appRoute: '/app/my-app/app6',
+      }),
     ] as Array<MockedMounterTuple<EitherApp>>);
     globalHistory = createMemoryHistory();
     appStatuses$ = mountersToAppStatus$();
@@ -282,6 +292,16 @@ describe('AppContainer', () => {
     expect(unmount).not.toHaveBeenCalled();
   });
 
+  it('allows multiple apps with the same `/app/appXXX` appRoute prefix', async () => {
+    await navigate('/app/my-app/app5/path');
+    expect(mounters.get('app5')!.mounter.mount).toHaveBeenCalledTimes(1);
+    expect(mounters.get('app6')!.mounter.mount).toHaveBeenCalledTimes(0);
+
+    await navigate('/app/my-app/app6/another-path');
+    expect(mounters.get('app5')!.mounter.mount).toHaveBeenCalledTimes(1);
+    expect(mounters.get('app6')!.mounter.mount).toHaveBeenCalledTimes(1);
+  });
+
   it('should not remount when when changing pages within app using hash history', async () => {
     globalHistory = createHashHistory();
     update = createRenderer(

src/core/public/application/integration_tests/utils.tsx

@@ -61,6 +61,7 @@ export const createAppMounter = ({
       mounter: {
         appRoute,
         appBasePath: appRoute,
+        legacy: false,
         mount: jest.fn(async (params: AppMountParameters) => {
           const { appBasePath: basename, element } = params;
           Object.assign(element, {
@@ -88,6 +89,7 @@ export const createLegacyAppMounter = (
       appRoute: `/app/${appId.split(':')[0]}`,
       appBasePath: `/app/${appId.split(':')[0]}`,
       unmountBeforeMounting: true,
+      legacy: true,
       mount: legacyMount,
     },
     unmount: jest.fn(),

src/core/public/application/types.ts

@@ -549,6 +549,7 @@ export type Mounter<T = App | LegacyApp> = SelectivePartial<
     appRoute: string;
     appBasePath: string;
     mount: T extends LegacyApp ? LegacyAppMounter : AppMounter;
+    legacy: boolean;
     unmountBeforeMounting: T extends LegacyApp ? true : boolean;
   },
   T extends LegacyApp ? never : 'unmountBeforeMounting'

src/core/public/application/ui/app_container.test.tsx

@@ -54,6 +54,7 @@ describe('AppContainer', () => {
     appBasePath: '/base-path',
     appRoute: '/some-route',
     unmountBeforeMounting: false,
+    legacy: false,
     mount: async ({ element }: AppMountParameters) => {
       await promise;
       const container = document.createElement('div');
@@ -138,9 +139,10 @@ describe('AppContainer', () => {
   it('should call setIsMounting(false) if mounting throws', async () => {
     const [waitPromise, resolvePromise] = createResolver();
     const mounter = {
-      appBasePath: '/base-path',
+      appBasePath: '/base-path/some-route',
       appRoute: '/some-route',
       unmountBeforeMounting: false,
+      legacy: false,
       mount: async ({ element }: AppMountParameters) => {
         await waitPromise;
         throw new Error(`Mounting failed!`);

src/core/public/application/ui/app_router.tsx

@@ -55,26 +55,25 @@ export const AppRouter: FunctionComponent<Props> = ({
   return (
     <Router history={history}>
       <Switch>
-        {[...mounters].flatMap(([appId, mounter]) =>
-          // Remove /app paths from the routes as they will be handled by the
-          // "named" route parameter `:appId` below
-          mounter.appBasePath.startsWith('/app')
-            ? []
-            : [
-                <Route
-                  key={mounter.appRoute}
-                  path={mounter.appRoute}
-                  render={({ match: { url } }) => (
-                    <AppContainer
-                      appPath={url}
-                      appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                      createScopedHistory={createScopedHistory}
-                      {...{ appId, mounter, setAppLeaveHandler, setIsMounting }}
-                    />
-                  )}
-                />,
-              ]
-        )}
+        {[...mounters]
+          // legacy apps can have multiple sub-apps registered with the same route
+          // which needs additional logic that is handled in the catch-all route below
+          .filter(([_, mounter]) => !mounter.legacy)
+          .map(([appId, mounter]) => (
+            <Route
+              key={mounter.appRoute}
+              path={mounter.appRoute}
+              render={({ match: { url } }) => (
+                <AppContainer
+                  appPath={url}
+                  appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+                  createScopedHistory={createScopedHistory}
+                  {...{ appId, mounter, setAppLeaveHandler, setIsMounting }}
+                />
+              )}
+            />
+          ))}
+        {/* handler for legacy apps and used as a catch-all to display 404 page on not existing /app/appId apps*/}
         <Route
           path="/app/:appId"
           render={({