core-app-api: refactor RouteTracker integration

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-app-api/src/app/AppManager.tsx

@@ -17,8 +17,10 @@
 import { Config } from '@backstage/config';
 import React, {
   ComponentType,
+  createContext,
   PropsWithChildren,
   ReactElement,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -77,6 +79,7 @@ import { AppThemeProvider } from './AppThemeProvider';
 import { defaultConfigLoader } from './defaultConfigLoader';
 import { ApiRegistry } from '../apis/system/ApiRegistry';
 import { resolveRouteBindings } from './resolveRouteBindings';
+import { BackstageRouteObject } from '../routing/types';
 
 type CompatiblePlugin =
   | BackstagePlugin<any, any>
@@ -84,6 +87,10 @@ type CompatiblePlugin =
       output(): Array<{ type: 'feature-flag'; name: string }>;
     });
 
+const InternalAppContext = createContext<{
+  routeObjects: BackstageRouteObject[];
+}>({ routeObjects: [] });
+
 /**
  * Get the app base path from the configured app baseUrl.
  *
@@ -300,7 +307,11 @@ export class AppManager implements BackstageApp {
                 routeBindings={routeBindings}
                 basePath={getBasePath(loadedConfig.api)}
               >
-                {children}
+                <InternalAppContext.Provider
+                  value={{ routeObjects: routing.objects }}
+                >
+                  {children}
+                </InternalAppContext.Provider>
               </RoutingProvider>
             </ThemeProvider>
           </AppContextProvider>
@@ -335,6 +346,7 @@ export class AppManager implements BackstageApp {
     const AppRouter = ({ children }: PropsWithChildren<{}>) => {
       const configApi = useApi(configApiRef);
       const mountPath = `${getBasePath(configApi)}/*`;
+      const { routeObjects } = useContext(InternalAppContext);
 
       // If the app hasn't configured a sign-in page, we just continue as guest.
       if (!SignInPageComponent) {
@@ -360,7 +372,7 @@ export class AppManager implements BackstageApp {
 
         return (
           <RouterComponent>
-            <RouteTracker tree={children} />
+            <RouteTracker routeObjects={routeObjects} />
             <Routes>
               <Route path={mountPath} element={<>{children}</>} />
             </Routes>
@@ -370,7 +382,7 @@ export class AppManager implements BackstageApp {
 
       return (
         <RouterComponent>
-          <RouteTracker tree={children} />
+          <RouteTracker routeObjects={routeObjects} />
           <SignInPageWrapper component={SignInPageComponent}>
             <Routes>
               <Route path={mountPath} element={<>{children}</>} />

packages/core-app-api/src/routing/RouteTracker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { matchRoutes, useLocation } from 'react-router-dom';
 import {
   useAnalytics,
@@ -22,12 +22,6 @@ import {
   CommonAnalyticsContext,
   RouteRef,
 } from '@backstage/core-plugin-api';
-import { routingV1Collector } from './collectors';
-import {
-  childDiscoverer,
-  routeElementDiscoverer,
-  traverseElementTree,
-} from '../extensions/traversal';
 import { BackstageRouteObject } from './types';
 
 /**
@@ -97,24 +91,15 @@ const TrackNavigation = ({
  * Logs a "navigate" event with appropriate plugin-level analytics context
  * attributes each time the user navigates to a page.
  */
-export const RouteTracker = ({ tree }: { tree: React.ReactNode }) => {
+export const RouteTracker = ({
+  routeObjects,
+}: {
+  routeObjects: BackstageRouteObject[];
+}) => {
   const { pathname, search, hash } = useLocation();
-  // todo(iamEAP): Work this into the existing traversal and make the data
-  // available on the provider. Then grab from app instance on the router.
-  const { routing } = useMemo(() => {
-    return traverseElementTree({
-      root: tree,
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV1Collector,
-      },
-    });
-  }, [tree]);
 
   return (
-    <AnalyticsContext
-      attributes={getExtensionContext(pathname, routing.objects)}
-    >
+    <AnalyticsContext attributes={getExtensionContext(pathname, routeObjects)}>
       <TrackNavigation pathname={pathname} search={search} hash={hash} />
     </AnalyticsContext>
   );