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

* 🪟 🔧 Add proper page view events for Segment

Author: letiescanciano

airbyte-webapp/package-lock.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/package.json

@@ -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/config/types.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.test.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/AnalyticsService.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/core/analytics/types.ts

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

airbyte-webapp/src/hooks/services/Analytics/index.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",
+}