[Shared UX Router Component] Fix context implementation

packages/core/application/core-application-browser-internal/src/application_service.tsx

@@ -374,6 +374,7 @@ export class ApplicationService {
             setAppActionMenu={this.setAppActionMenu}
             setIsMounting={(isMounting) => httpLoadingCount$.next(isMounting ? 1 : 0)}
             hasCustomBranding$={this.hasCustomBranding$}
+            appId$={this.currentAppId$}
           />
         );
       },

packages/core/application/core-application-browser-internal/src/ui/app_router.tsx

@@ -8,16 +8,17 @@
 
 import React, { FunctionComponent, useMemo } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { Router, Routes, Route } from '@kbn/shared-ux-router';
+import { Router, Routes, Route, RouterProvider } from '@kbn/shared-ux-router';
 import { History } from 'history';
-import { EMPTY, Observable } from 'rxjs';
+import { BehaviorSubject, EMPTY, Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 
 import type { CoreTheme } from '@kbn/core-theme-browser';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
 import { type AppLeaveHandler, AppStatus } from '@kbn/core-application-browser';
 import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
 import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
+import { ExecutionContextService } from '@kbn/core-execution-context-browser-internal';
 import type { Mounter } from '../types';
 import { AppContainer } from './app_container';
 import { CoreScopedHistory } from '../scoped_history';
@@ -32,6 +33,7 @@ interface Props {
   setAppActionMenu: (appId: string, mount: MountPoint | undefined) => void;
   setIsMounting: (isMounting: boolean) => void;
   hasCustomBranding$?: Observable<boolean>;
+  appId$: BehaviorSubject<string | undefined>;
 }
 
 interface Params {
@@ -48,6 +50,7 @@ export const AppRouter: FunctionComponent<Props> = ({
   appStatuses$,
   setIsMounting,
   hasCustomBranding$,
+  appId$,
 }) => {
   const appStatuses = useObservable(appStatuses$, new Map());
   const createScopedHistory = useMemo(
@@ -56,66 +59,69 @@ export const AppRouter: FunctionComponent<Props> = ({
   );
 
   const showPlainSpinner = useObservable(hasCustomBranding$ ?? EMPTY, false);
+  const { context$, get, set, clear } = new ExecutionContextService().start({ curApp$: appId$ });
 
   return (
     <KibanaErrorBoundaryProvider analytics={analytics}>
       <KibanaErrorBoundary>
-        <Router history={history}>
-          <Routes>
-            {[...mounters].map(([appId, mounter]) => (
+        <RouterProvider context$={context$} get={get} set={set} clear={clear}>
+          <Router history={history}>
+            <Routes>
+              {[...mounters].map(([appId, mounter]) => (
+                <Route
+                  key={mounter.appRoute}
+                  path={mounter.appRoute}
+                  exact={mounter.exactRoute}
+                  render={({ match: { path } }) => (
+                    <AppContainer
+                      appPath={path}
+                      appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+                      createScopedHistory={createScopedHistory}
+                      {...{
+                        appId,
+                        mounter,
+                        setAppLeaveHandler,
+                        setAppActionMenu,
+                        setIsMounting,
+                        theme$,
+                        showPlainSpinner,
+                      }}
+                    />
+                  )}
+                />
+              ))}
+              {/* handler for legacy apps and used as a catch-all to display 404 page on not existing /app/appId apps*/}
               <Route
-                key={mounter.appRoute}
-                path={mounter.appRoute}
-                exact={mounter.exactRoute}
-                render={({ match: { path } }) => (
-                  <AppContainer
-                    appPath={path}
-                    appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                    createScopedHistory={createScopedHistory}
-                    {...{
-                      appId,
-                      mounter,
-                      setAppLeaveHandler,
-                      setAppActionMenu,
-                      setIsMounting,
-                      theme$,
-                      showPlainSpinner,
-                    }}
-                  />
-                )}
+                path="/app/:appId"
+                render={({
+                  match: {
+                    params: { appId },
+                    url,
+                  },
+                }: RouteComponentProps<Params>) => {
+                  // the id/mounter retrieval can be removed once #76348 is addressed
+                  const [id, mounter] = mounters.has(appId) ? [appId, mounters.get(appId)] : [];
+                  return (
+                    <AppContainer
+                      appPath={url}
+                      appId={id ?? appId}
+                      appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+                      createScopedHistory={createScopedHistory}
+                      {...{
+                        mounter,
+                        setAppLeaveHandler,
+                        setAppActionMenu,
+                        setIsMounting,
+                        theme$,
+                        showPlainSpinner,
+                      }}
+                    />
+                  );
+                }}
               />
-            ))}
-            {/* 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={({
-                match: {
-                  params: { appId },
-                  url,
-                },
-              }: RouteComponentProps<Params>) => {
-                // the id/mounter retrieval can be removed once #76348 is addressed
-                const [id, mounter] = mounters.has(appId) ? [appId, mounters.get(appId)] : [];
-                return (
-                  <AppContainer
-                    appPath={url}
-                    appId={id ?? appId}
-                    appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                    createScopedHistory={createScopedHistory}
-                    {...{
-                      mounter,
-                      setAppLeaveHandler,
-                      setAppActionMenu,
-                      setIsMounting,
-                      theme$,
-                      showPlainSpinner,
-                    }}
-                  />
-                );
-              }}
-            />
-          </Routes>
-        </Router>
+            </Routes>
+          </Router>
+        </RouterProvider>
       </KibanaErrorBoundary>
     </KibanaErrorBoundaryProvider>
   );

packages/core/application/core-application-browser-internal/tsconfig.json

@@ -37,6 +37,7 @@
     "@kbn/core-analytics-browser",
     "@kbn/shared-ux-router",
     "@kbn/shared-ux-error-boundary",
+    "@kbn/core-execution-context-browser-internal",
   ],
   "exclude": [
     "target/**/*",

packages/shared-ux/router/impl/index.ts

@@ -9,3 +9,4 @@
 export { Route } from './route';
 export { HashRouter, BrowserRouter, MemoryRouter, Router } from './router';
 export { Routes } from './routes';
+export { RouterProvider } from './services';

packages/shared-ux/router/impl/route.tsx

@@ -71,7 +71,7 @@ export const Route = <T extends {}>({
  * The match propagator that is part of the Route
  */
 export const MatchPropagator = () => {
-  const { executionContext } = useKibanaSharedUX().services;
+  const { executionContext } = useKibanaSharedUX().services.coreStart?.http;
   const match = useRouteMatch();
 
   useSharedUXExecutionContext(executionContext, {

packages/shared-ux/router/impl/router.test.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { RouterProvider } from './services';
+import { KibanaSharedUXRouterProviderDeps } from '@kbn/shared-ux-router-types';
+import { executionContextServiceMock } from '@kbn/core-execution-context-server-mocks';
+
+describe('<RouterProvider', () => {
+  let mockContext$: KibanaSharedUXRouterProviderDeps['context$'];
+
+  beforeEach(() => {
+    mockContext$ = executionContextServiceMock;
+  });
+
+  it('should render', async () => {
+    const { findByTestId } = render(
+      <RouterProvider context$={mockContext$} set={jest.fn()} get={jest.fn()} clear={jest.fn()} />
+    );
+    expect(findByTestId('router-shared-ux')).toBeTruthy();
+  });
+});

packages/shared-ux/router/impl/router.tsx

@@ -42,7 +42,7 @@ export const MemoryRouter = ({ children, ...props }: MemoryRouterProps) => (
 );
 
 export const Router = ({ children, ...props }: RouterProps) => (
-  <ReactRouter {...props}>
+  <ReactRouter {...props} data-test-subj="router-shared-ux">
     <CompatRouter>{children}</CompatRouter>
   </ReactRouter>
 );

packages/shared-ux/router/impl/services.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { createContext, useContext, FC, PropsWithChildren, useMemo } from 'react';
+import {
+  KibanaSharedUXRouterProviderDeps,
+  SharedUXRouterServices,
+} from '@kbn/shared-ux-router-types';
+
+const Context = createContext<SharedUXRouterServices | null>(null);
+
+export const SharedUXRouterDepsProvider: FC<PropsWithChildren<SharedUXRouterServices>> = ({
+  children,
+  services,
+}) => <Context.Provider value={{ services }}>{children}</Context.Provider>;
+
+export const RouterProvider: FC<PropsWithChildren<KibanaSharedUXRouterProviderDeps>> = ({
+  children,
+  context$,
+  get,
+  set,
+  clear,
+}) => {
+  const parentContext = useContext(Context);
+  const value: SharedUXRouterServices = useMemo(() => {
+    if (parentContext) {
+      return parentContext;
+    }
+
+    return {
+      services: { get, set, clear, context$ },
+    };
+  }, [clear, context$, get, parentContext, set]);
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+/** Utility that provides context
+ * @internal
+ */
+export function useKibanaSharedUX(): SharedUXRouterServices {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error(
+      'Kibana Shared UX Context is missing. Ensure your component or React root is wrapped with Kibana Shared UX Context.'
+    );
+  }
+  return context;
+}

packages/shared-ux/router/impl/tsconfig.json

@@ -13,6 +13,8 @@
     "**/*",
   ],
   "kbn_references": [
+    "@kbn/shared-ux-router-types",
+    "@kbn/core-execution-context-server-mocks",
   ],
   "exclude": [
     "target/**/*",

packages/shared-ux/router/impl/use_execution_context.ts

@@ -7,7 +7,7 @@
  */
 
 import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
-import { SharedUXExecutionContextSetup } from './services';
+import { SharedUXExecutionContextStart } from './services';
 import { SharedUXExecutionContext } from './types';
 
 /**
@@ -16,7 +16,9 @@ import { SharedUXExecutionContext } from './types';
  * @param context
  */
 export function useSharedUXExecutionContext(
-  executionContext: SharedUXExecutionContextSetup | undefined,
+  executionContext:
+    | SharedUXExecutionContextStart['coreStart']['http']['executionContext']
+    | undefined,
   context: SharedUXExecutionContext
 ) {
   useDeepCompareEffect(() => {