🪟 🔧 Add proper page view events for Segment (#16220)

* 🪟 🔧 Add proper page view events for Segment

airbyte-webapp/package.json

@@ -34,6 +34,7 @@
     "@monaco-editor/react": "^4.4.5",
     "@sentry/react": "^6.19.6",
     "@sentry/tracing": "^6.19.6",
+    "@types/segment-analytics": "^0.0.34",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
     "firebase": "^9.8.2",

airbyte-webapp/src/config/types.ts

@@ -1,5 +1,3 @@
-import { SegmentAnalytics } from "core/analytics/types";
-
 import { OutboundLinks } from "./links";
 
 declare global {
@@ -14,7 +12,7 @@ declare global {
     REACT_APP_INTEGRATION_DOCS_URLS?: string;
     SEGMENT_TOKEN?: string;
     LAUNCHDARKLY_KEY?: string;
-    analytics: SegmentAnalytics;
+    analytics: SegmentAnalytics.AnalyticsJS;
   }
 }
 

airbyte-webapp/src/core/analytics/AnalyticsService.test.ts

@@ -10,6 +10,18 @@ describe("AnalyticsService", () => {
       identify: jest.fn(),
       page: jest.fn(),
       reset: jest.fn(),
+      user: jest.fn(),
+      setAnonymousId: jest.fn(),
+      init: jest.fn(),
+      use: jest.fn(),
+      addIntegration: jest.fn(),
+      load: jest.fn(),
+      trackLink: jest.fn(),
+      trackForm: jest.fn(),
+      ready: jest.fn(),
+      debug: jest.fn(),
+      on: jest.fn(),
+      timeout: jest.fn(),
     };
   });
 

airbyte-webapp/src/core/analytics/AnalyticsService.ts

@@ -1,9 +1,9 @@
-import { Action, EventParams, Namespace, SegmentAnalytics } from "./types";
+import { Action, EventParams, Namespace } from "./types";
 
 export class AnalyticsService {
   constructor(private context: Record<string, unknown>, private version?: string) {}
 
-  private getSegmentAnalytics = (): SegmentAnalytics | undefined => window.analytics;
+  private getSegmentAnalytics = (): SegmentAnalytics.AnalyticsJS | undefined => window.analytics;
 
   alias = (newId: string): void => this.getSegmentAnalytics()?.alias?.(newId);
 

airbyte-webapp/src/core/analytics/types.ts

@@ -1,12 +1,3 @@
-export interface SegmentAnalytics {
-  page: (name?: string) => void;
-  reset: () => void;
-  alias: (newId: string) => void;
-  track: (name: string, properties: Record<string, unknown>) => void;
-  identify: (userId?: string, traits?: Record<string, unknown>) => void;
-  group: (organisationId: string, traits: Record<string, unknown>) => void;
-}
-
 export const enum Namespace {
   SOURCE = "Source",
   DESTINATION = "Destination",

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

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

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

@@ -0,0 +1,33 @@
+export enum PageTrackingCodes {
+  SIGNUP = "Auth.Signup",
+  LOGIN = "Auth.Login",
+  RESET_PASSWORD = "Auth.ResetPassword",
+  VERIFY_EMAIL = "Auth.VerifyEmail",
+  ONBOARDING = "Onboarding",
+  SOURCE_NEW = "Source.New",
+  SOURCE_LIST = "Source.List",
+  SOURCE_ITEM = "Source.Item",
+  SOURCE_ITEM_SETTINGS = "Source.Item.Settings",
+  DESTINATION_NEW = "Destination.New",
+  DESTINATION_LIST = "Destination.List",
+  DESTINATION_ITEM = "Destination.Item",
+  DESTINATION_ITEM_SETTINGS = "Destination.Item.Settings",
+  CONNECTIONS_NEW = "Connections.New",
+  CONNECTIONS_LIST = "Connections.List",
+  CONNECTIONS_ITEM = "Connections.Item",
+  CONNECTIONS_ITEM_STATUS = "Connections.Item.Status",
+  CONNECTIONS_ITEM_TRANSFORMATION = "Connections.Item.TransformationView",
+  CONNECTIONS_ITEM_REPLICATION = "Connections.Item.ReplicationView",
+  CONNECTIONS_ITEM_SETTINGS = "Connections.Item.Settings",
+  SETTINGS_ACCOUNT = "Settings.Account",
+  SETTINGS_WORKSPACE = "Settings.Workspace",
+  SETTINGS_DESTINATION = "Settings.Destination",
+  SETTINGS_SOURCE = "Settings.Source",
+  SETTINGS_CONFIGURATION = "Settings.Configuration",
+  SETTINGS_NOTIFICATION = "Settings.Notifications",
+  SETTINGS_ACCESS_MANAGEMENT = "Settings.AccessManagement",
+  SETTINGS_METRICS = "Settings.Metrics",
+  CREDITS = "Credits",
+  WORKSPACES = "Workspaces",
+  PREFERENCES = "Preferences",
+}

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

@@ -6,7 +6,6 @@ import ApiErrorBoundary from "components/ApiErrorBoundary";
 import LoadingPage from "components/LoadingPage";
 
 import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/services/Analytics/useAnalyticsService";
-import { useTrackPageAnalytics } from "hooks/services/Analytics/useTrackPageAnalytics";
 import { FeatureItem, FeatureSet, useFeatureService } from "hooks/services/Feature";
 import { useApiHealthPoll } from "hooks/services/Health";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
@@ -153,7 +152,6 @@ export const Routing: React.FC = () => {
   );
   useAnalyticsRegisterValues(analyticsContext);
   useAnalyticsIdentifyUser(user?.userId, { providers, email: user?.email });
-  useTrackPageAnalytics();
 
   if (!inited) {
     return <LoadingPage />;

airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx

@@ -5,6 +5,7 @@ import { useAsync } from "react-use";
 
 import LoadingPage from "components/LoadingPage";
 
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useNotificationService } from "hooks/services/Notification";
 import useRouter from "hooks/useRouter";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
@@ -26,6 +27,7 @@ export const VerifyEmailAction: React.FC = () => {
   const { formatMessage } = useIntl();
   const { registerNotification } = useNotificationService();
 
+  useTrackPage(PageTrackingCodes.VERIFY_EMAIL);
   useAsync(async () => {
     if (query.mode === FirebaseActionMode.VERIFY_EMAIL) {
       // Send verification code to authentication service

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx

@@ -6,6 +6,7 @@ import * as yup from "yup";
 import { LabeledInput, Link, LoadingButton } from "components";
 import HeadTitle from "components/HeadTitle";
 
+import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import useRouter from "hooks/useRouter";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
@@ -26,6 +27,7 @@ const LoginPage: React.FC = () => {
   const { formatMessage } = useIntl();
   const { login } = useAuthService();
   const { query, replace } = useRouter();
+  useTrackPage(PageTrackingCodes.LOGIN);
 
   return (
     <div>

airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx

@@ -6,6 +6,7 @@ import * as yup from "yup";
 import { LoadingButton, LabeledInput, Link } from "components";
 import HeadTitle from "components/HeadTitle";
 
+import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useNotificationService } from "hooks/services/Notification/NotificationService";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
@@ -22,6 +23,7 @@ const ResetPasswordPage: React.FC = () => {
   const { registerNotification } = useNotificationService();
   const { formatMessage } = useIntl();
 
+  useTrackPage(PageTrackingCodes.RESET_PASSWORD);
   return (
     <div>
       <HeadTitle titles={[{ id: "login.resetPassword" }]} />

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx

@@ -4,6 +4,8 @@ import { FormattedMessage } from "react-intl";
 import { Text } from "components/base/Text";
 import HeadTitle from "components/HeadTitle";
 
+import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
+
 import { OAuthLogin } from "../OAuthLogin";
 import { Disclaimer, SignupForm } from "./components/SignupForm";
 import SpecialBlock from "./components/SpecialBlock";
@@ -14,6 +16,7 @@ interface SignupPageProps {
 }
 
 const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
+  useTrackPage(PageTrackingCodes.SIGNUP);
   return (
     <div>
       <HeadTitle titles={[{ id: "login.signup" }]} />

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx

@@ -6,6 +6,7 @@ import { PageTitle } from "components";
 import HeadTitle from "components/HeadTitle";
 import MainPageWithScroll from "components/MainPageWithScroll";
 
+import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
 import CreditsUsage from "./components/CreditsUsage";
@@ -23,7 +24,7 @@ const EmailVerificationHintWithMargin = styled(EmailVerificationHint)`
 
 const CreditsPage: React.FC = () => {
   const { emailVerified } = useAuthService();
-
+  useTrackPage(PageTrackingCodes.CREDITS);
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "credits.credits" }]} />}

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/AccountSettingsView.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 
 import { LoadingButton } from "components";
 
+import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
 
@@ -19,6 +20,7 @@ const AccountSettingsView: React.FC = () => {
   const authService = useAuthService();
   const { mutateAsync: logout, isLoading: isLoggingOut } = useMutation(() => authService.logout());
 
+  useTrackPage(PageTrackingCodes.SETTINGS_ACCOUNT);
   return (
     <>
       <NameSection />

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx

@@ -6,6 +6,7 @@ import { useToggle } from "react-use";
 import { Button, H5, LoadingButton } from "components";
 import Table from "components/Table";
 
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { User } from "packages/cloud/lib/domain/users";
@@ -41,6 +42,8 @@ const RemoveUserSection: React.FC<{ workspaceId: string; email: string }> = ({ w
 };
 
 export const UsersSettingsView: React.FC = () => {
+  useTrackPage(PageTrackingCodes.SETTINGS_ACCESS_MANAGEMENT);
+
   const [modalIsOpen, toggleModal] = useToggle(false);
   const { workspaceId } = useCurrentWorkspace();
 

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 
 import { Button, LabeledInput, LoadingButton } from "components";
 
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import {
   useRemoveWorkspace,
@@ -33,7 +34,7 @@ const Buttons = styled.div`
 
 export const WorkspaceSettingsView: React.FC = () => {
   const { formatMessage } = useIntl();
-
+  useTrackPage(PageTrackingCodes.SETTINGS_WORKSPACE);
   const { exitWorkspace } = useWorkspaceService();
   const workspace = useCurrentWorkspace();
   const removeWorkspace = useRemoveWorkspace();

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/WorkspacesPage.tsx

@@ -4,6 +4,8 @@ import styled from "styled-components";
 
 import { H1, H3 } from "components";
 
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+
 import WorkspacesList from "./components/WorkspacesList";
 
 const MainContent = styled.div`
@@ -25,6 +27,7 @@ const Subtitle = styled(H3)`
 `;
 
 const WorkspacesPage: React.FC = () => {
+  useTrackPage(PageTrackingCodes.WORKSPACES);
   return (
     <MainContent>
       <Logo src="/cloud-main-logo.svg" width={186} />

airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx

@@ -5,6 +5,7 @@ import { Button, LoadingPage, MainPageWithScroll, PageTitle } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
 
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useConnectionList } from "hooks/services/useConnectionHook";
 import useRouter from "hooks/useRouter";
@@ -15,6 +16,7 @@ import ConnectionsTable from "./components/ConnectionsTable";
 const AllConnectionsPage: React.FC = () => {
   const { push } = useRouter();
 
+  useTrackPage(PageTrackingCodes.CONNECTIONS_LIST);
   const { connections } = useConnectionList();
   const allowCreateConnection = useFeature(FeatureItem.AllowCreateConnection);