ApplicationService: emit from currentAppId$ in legacy mode (#55536)

* emit currentAppId$ in legacy mode

* fix karma tests

* fix karma json structure

* flip if/else

* filter undefined from currentAppId$

src/core/public/application/application_service.test.ts

@@ -19,7 +19,7 @@
 
 import { createElement } from 'react';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { bufferCount, skip, take, takeUntil } from 'rxjs/operators';
+import { bufferCount, take, takeUntil } from 'rxjs/operators';
 import { shallow } from 'enzyme';
 
 import { injectedMetadataServiceMock } from '../injected_metadata/injected_metadata_service.mock';
@@ -518,6 +518,22 @@ describe('#start()', () => {
     expect([...availableApps.keys()]).toEqual(['app1', 'legacyApp1']);
   });
 
+  describe('currentAppId$', () => {
+    it('emits the legacy app id when in legacy mode', async () => {
+      setupDeps.injectedMetadata.getLegacyMode.mockReturnValue(true);
+      setupDeps.injectedMetadata.getLegacyMetadata.mockReturnValue({
+        app: {
+          id: 'legacy',
+          title: 'Legacy App',
+        },
+      } as any);
+      await service.setup(setupDeps);
+      const { currentAppId$ } = await service.start(startDeps);
+
+      expect(await currentAppId$.pipe(take(1)).toPromise()).toEqual('legacy');
+    });
+  });
+
   describe('getComponent', () => {
     it('returns renderable JSX tree', async () => {
       service.setup(setupDeps);
@@ -651,7 +667,7 @@ describe('#start()', () => {
 
       const { currentAppId$, navigateToApp } = await service.start(startDeps);
       const stop$ = new Subject();
-      const promise = currentAppId$.pipe(skip(1), bufferCount(4), takeUntil(stop$)).toPromise();
+      const promise = currentAppId$.pipe(bufferCount(4), takeUntil(stop$)).toPromise();
 
       await navigateToApp('alpha');
       await navigateToApp('beta');

src/core/public/application/application_service.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
-import { map, shareReplay, takeUntil } from 'rxjs/operators';
+import { map, shareReplay, takeUntil, distinctUntilChanged, filter } from 'rxjs/operators';
 import { createBrowserHistory, History } from 'history';
 
 import { InjectedMetadataSetup } from '../injected_metadata';
@@ -114,8 +114,10 @@ export class ApplicationService {
     history,
   }: SetupDeps): InternalApplicationSetup {
     const basename = basePath.get();
-    // Only setup history if we're not in legacy mode
-    if (!injectedMetadata.getLegacyMode()) {
+    if (injectedMetadata.getLegacyMode()) {
+      this.currentAppId$.next(injectedMetadata.getLegacyMetadata().app.id);
+    } else {
+      // Only setup history if we're not in legacy mode
       this.history = history || createBrowserHistory({ basename });
     }
 
@@ -264,7 +266,11 @@ export class ApplicationService {
     return {
       applications$,
       capabilities,
-      currentAppId$: this.currentAppId$.pipe(takeUntil(this.stop$)),
+      currentAppId$: this.currentAppId$.pipe(
+        filter(appId => appId !== undefined),
+        distinctUntilChanged(),
+        takeUntil(this.stop$)
+      ),
       registerMountContext: this.mountContext.registerContext,
       getUrlForApp: (appId, { path }: { path?: string } = {}) =>
         getAppUrl(availableMounters, appId, path),

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

@@ -45,7 +45,6 @@ export const AppContainer: FunctionComponent<Props> = ({
   const [appNotFound, setAppNotFound] = useState(false);
   const elementRef = useRef<HTMLDivElement>(null);
   const unmountRef: MutableRefObject<AppUnmount | null> = useRef<AppUnmount>(null);
-  // const appStatus = useObservable(appStatus$);
 
   useLayoutEffect(() => {
     const unmount = () => {

src/core/public/injected_metadata/injected_metadata_service.mock.ts

@@ -35,6 +35,10 @@ const createSetupContractMock = () => {
   setupContract.getKibanaVersion.mockReturnValue('kibanaVersion');
   setupContract.getLegacyMode.mockReturnValue(true);
   setupContract.getLegacyMetadata.mockReturnValue({
+    app: {
+      id: 'foo',
+      title: 'Foo App',
+    },
     nav: [],
     uiSettings: {
       defaults: { legacyInjectedUiSettingDefaults: true },

src/core/public/injected_metadata/injected_metadata_service.ts

@@ -68,7 +68,10 @@ export interface InjectedMetadataParams {
     uiPlugins: InjectedPluginMetadata[];
     legacyMode: boolean;
     legacyMetadata: {
-      app: unknown;
+      app: {
+        id: string;
+        title: string;
+      };
       bundleId: string;
       nav: LegacyNavLink[];
       version: string;
@@ -171,7 +174,10 @@ export interface InjectedMetadataSetup {
   /** Indicates whether or not we are rendering a known legacy app. */
   getLegacyMode: () => boolean;
   getLegacyMetadata: () => {
-    app: unknown;
+    app: {
+      id: string;
+      title: string;
+    };
     bundleId: string;
     nav: LegacyNavLink[];
     version: string;

src/legacy/core_plugins/tests_bundle/tests_entry_template.js

@@ -78,6 +78,10 @@ const coreSystem = new CoreSystem({
     buildNumber: 1234,
     legacyMode: true,
     legacyMetadata: {
+      app: {
+        id: 'karma',
+        title: 'Karma',
+      },
       nav: [],
       version: '1.2.3',
       buildNum: 1234,