Resolve cyclic dependency between analytics files

airbyte-webapp/src/hooks/services/Analytics/index.tsx

@@ -1,2 +1 @@
-export * from "./TrackPageAnalytics";
 export * from "./useAnalyticsService";

airbyte-webapp/src/hooks/services/Analytics/TrackPageAnalytics.tsx → airbyte-webapp/src/hooks/services/Analytics/useTrackPageAnalytics.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 import useRouter from "hooks/useRouter";
 
 import { getPageName } from "./pageNameUtils";
 import { useAnalyticsService } from "./useAnalyticsService";
 
-export const TrackPageAnalytics: React.FC = () => {
+export const useTrackPageAnalytics = () => {
   const { pathname } = useRouter();
   const analyticsService = useAnalyticsService();
   useEffect(() => {
@@ -15,6 +15,4 @@ export const TrackPageAnalytics: React.FC = () => {
       analyticsService.page(pageName);
     }
   }, [analyticsService, pathname]);
-
-  return null;
 };

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -4,8 +4,8 @@ import { useEffectOnce } from "react-use";
 
 import LoadingPage from "components/LoadingPage";
 
-import { TrackPageAnalytics } from "hooks/services/Analytics/TrackPageAnalytics";
 import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/services/Analytics/useAnalyticsService";
+import { useTrackPageAnalytics } from "hooks/services/Analytics/useTrackPageAnalytics";
 import { FeatureItem, useFeatureRegisterValues } from "hooks/services/Feature";
 import { useApiHealthPoll } from "hooks/services/Health";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
@@ -154,14 +154,14 @@ export const Routing: React.FC = () => {
   );
   useAnalyticsRegisterValues(analyticsContext);
   useAnalyticsIdentifyUser(user?.userId);
+  useTrackPageAnalytics();
 
   if (!inited) {
     return <LoadingPage />;
   }
 
   return (
     <WorkspaceServiceProvider>
-      <TrackPageAnalytics />
       <Suspense fallback={<LoadingPage />}>
         {/* Allow email verification no matter whether the user is logged in or not */}
         <Routes>

airbyte-webapp/src/pages/routes.tsx

@@ -5,7 +5,8 @@ import { useEffectOnce } from "react-use";
 
 import { useConfig } from "config";
 import { Workspace } from "core/domain/workspace/Workspace";
-import { TrackPageAnalytics, useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/services/Analytics";
+import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/services/Analytics";
+import { useTrackPageAnalytics } from "hooks/services/Analytics/useTrackPageAnalytics";
 import { useApiHealthPoll } from "hooks/services/Health";
 import { useNotificationService } from "hooks/services/Notification";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
@@ -55,7 +56,6 @@ const useAddAnalyticsContextForWorkspace = (workspace: Workspace): void => {
 const MainViewRoutes: React.FC<{ workspace: Workspace }> = ({ workspace }) => {
   return (
     <MainView>
-      <TrackPageAnalytics />
       <Routes>
         <Route path={`${RoutePaths.Destination}/*`} element={<DestinationPage />} />
         <Route path={`${RoutePaths.Source}/*`} element={<SourcesPage />} />
@@ -96,6 +96,7 @@ export const AutoSelectFirstWorkspace: React.FC<{ includePath?: boolean }> = ({
 const RoutingWithWorkspace: React.FC = () => {
   const workspace = useCurrentWorkspace();
   useAddAnalyticsContextForWorkspace(workspace);
+  useTrackPageAnalytics();
   useApiHealthPoll();
   useDemo();