AnalyticsService event cleanup (#15142)

* AnalyticsService event cleanup

* Remove dead generics

* Fix broken parameters

Author: Tim Roes

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -6,9 +6,10 @@ import { IDataItem } from "components/base/DropDown/components/Option";
 import { JobItem } from "components/JobItem/JobItem";
 import LoadingSchema from "components/LoadingSchema";
 
+import { Action, Namespace } from "core/analytics";
 import { LogsRequestError } from "core/request/LogsRequestError";
+import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
-import { TrackActionLegacyType, TrackActionType, TrackActionNamespace, useTrackAction } from "hooks/useTrackAction";
 import ConnectionForm from "views/Connection/ConnectionForm";
 import { ConnectionFormProps } from "views/Connection/ConnectionForm/ConnectionForm";
 import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
@@ -40,10 +41,7 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   additionBottomControls,
 }) => {
   const { mutateAsync: createConnection } = useCreateConnection();
-  const trackNewConnectionAction = useTrackAction(
-    TrackActionNamespace.CONNECTION,
-    TrackActionLegacyType.NEW_CONNECTION
-  );
+  const analyticsService = useAnalyticsService();
 
   const { schema, isLoading, schemaErrorStatus, catalogId, onDiscoverSchema } = useDiscoverSchema(source.sourceId);
 
@@ -90,7 +88,8 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
     const enabledStreams = connection.syncCatalog.streams.filter((stream) => stream.config?.selected).length;
 
     if (item) {
-      trackNewConnectionAction("Select a frequency", TrackActionType.FREQUENCY, {
+      analyticsService.track(Namespace.CONNECTION, Action.FREQUENCY, {
+        actionDescription: "Frequency selected",
         frequency: item.label,
         connector_source_definition: source?.sourceName,
         connector_source_definition_id: source?.sourceDefinitionId,

airbyte-webapp/src/components/EntityTable/hooks.tsx

@@ -1,7 +1,8 @@
 import { getFrequencyConfig } from "config/utils";
+import { Action, Namespace } from "core/analytics";
 import { buildConnectionUpdate } from "core/domain/connection";
+import { useAnalyticsService } from "hooks/services/Analytics";
 import { useSyncConnection, useUpdateConnection } from "hooks/services/useConnectionHook";
-import { TrackActionLegacyType, TrackActionType, TrackActionNamespace, useTrackAction } from "hooks/useTrackAction";
 
 import { ConnectionStatus, WebBackendConnectionRead } from "../../core/request/AirbyteClient";
 
@@ -11,7 +12,7 @@ const useSyncActions = (): {
 } => {
   const { mutateAsync: updateConnection } = useUpdateConnection();
   const { mutateAsync: syncConnection } = useSyncConnection();
-  const trackSourceAction = useTrackAction(TrackActionNamespace.CONNECTION, TrackActionLegacyType.SOURCE);
+  const analyticsService = useAnalyticsService();
 
   const changeStatus = async (connection: WebBackendConnectionRead) => {
     await updateConnection(
@@ -24,16 +25,13 @@ const useSyncActions = (): {
 
     const enabledStreams = connection.syncCatalog.streams.filter((stream) => stream.config?.selected).length;
 
-    const trackableAction =
-      connection.status === ConnectionStatus.active ? TrackActionType.DISABLE : TrackActionType.REENABLE;
+    const trackableAction = connection.status === ConnectionStatus.active ? Action.DISABLE : Action.REENABLE;
 
-    const trackableActionString = `${trackableAction} connection`;
-
-    trackSourceAction(trackableActionString, trackableAction, {
+    analyticsService.track(Namespace.CONNECTION, trackableAction, {
       frequency: frequency?.type,
       connector_source: connection.source?.sourceName,
       connector_source_definition_id: connection.source?.sourceDefinitionId,
-      connector_destination: connection.destination?.name,
+      connector_destination: connection.destination?.destinationName,
       connector_destination_definition_id: connection.destination?.destinationDefinitionId,
       available_streams: connection.syncCatalog.streams.length,
       enabled_streams: enabledStreams,

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

@@ -0,0 +1,57 @@
+import { AnalyticsService } from "./AnalyticsService";
+import { Action, Namespace } from "./types";
+
+describe("AnalyticsService", () => {
+  beforeEach(() => {
+    window.analytics = {
+      track: jest.fn(),
+      alias: jest.fn(),
+      group: jest.fn(),
+      identify: jest.fn(),
+      page: jest.fn(),
+      reset: jest.fn(),
+    };
+  });
+
+  it("should send events to segment", () => {
+    const service = new AnalyticsService({});
+    service.track(Namespace.CONNECTION, Action.CREATE, {});
+    expect(window.analytics.track).toHaveBeenCalledWith("Airbyte.UI.Connection.Create", expect.anything());
+  });
+
+  it("should send version and environment for prod", () => {
+    const service = new AnalyticsService({}, "0.42.13");
+    service.track(Namespace.CONNECTION, Action.CREATE, {});
+    expect(window.analytics.track).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ environment: "prod", airbyte_version: "0.42.13" })
+    );
+  });
+
+  it("should send version and environment for dev", () => {
+    const service = new AnalyticsService({}, "dev");
+    service.track(Namespace.CONNECTION, Action.CREATE, {});
+    expect(window.analytics.track).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ environment: "dev", airbyte_version: "dev" })
+    );
+  });
+
+  it("should pass parameters to segment event", () => {
+    const service = new AnalyticsService({});
+    service.track(Namespace.CONNECTION, Action.CREATE, { actionDescription: "Created new connection" });
+    expect(window.analytics.track).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ actionDescription: "Created new connection" })
+    );
+  });
+
+  it("should pass context parameters to segment event", () => {
+    const service = new AnalyticsService({ context: 42 });
+    service.track(Namespace.CONNECTION, Action.CREATE, { actionDescription: "Created new connection" });
+    expect(window.analytics.track).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ actionDescription: "Created new connection", context: 42 })
+    );
+  });
+});

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

@@ -1,4 +1,4 @@
-import { SegmentAnalytics } from "./types";
+import { Action, EventParams, Namespace, SegmentAnalytics } from "./types";
 
 export class AnalyticsService {
   constructor(private context: Record<string, unknown>, private version?: string) {}
@@ -11,13 +11,14 @@ export class AnalyticsService {
 
   reset = (): void => this.getSegmentAnalytics()?.reset?.();
 
-  track = <P = Record<string, unknown>>(name: string, properties: P): void =>
-    this.getSegmentAnalytics()?.track?.(name, {
-      ...properties,
+  track = (namespace: Namespace, action: Action, params: EventParams & { actionDescription?: string }) => {
+    this.getSegmentAnalytics()?.track(`Airbyte.UI.${namespace}.${action}`, {
+      ...params,
       ...this.context,
       airbyte_version: this.version,
       environment: this.version === "dev" ? "dev" : "prod",
     });
+  };
 
   identify = (userId: string, traits: Record<string, unknown> = {}): void => {
     this.getSegmentAnalytics()?.identify?.(userId, traits);

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

@@ -0,0 +1,2 @@
+export { AnalyticsService } from "./AnalyticsService";
+export { Namespace, Action } from "./types";

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

@@ -1,4 +1,4 @@
-interface SegmentAnalytics {
+export interface SegmentAnalytics {
   page: (name?: string) => void;
   reset: () => void;
   alias: (newId: string) => void;
@@ -7,4 +7,33 @@ interface SegmentAnalytics {
   group: (organisationId: string, traits: Record<string, unknown>) => void;
 }
 
-export type { SegmentAnalytics };
+export const enum Namespace {
+  SOURCE = "Source",
+  DESTINATION = "Destination",
+  CONNECTION = "Connection",
+  CONNECTOR = "Connector",
+  ONBOARDING = "Onboarding",
+  USER = "User",
+}
+
+export const enum Action {
+  CREATE = "Create",
+  TEST = "Test",
+  SELECT = "Select",
+  SUCCESS = "TestSuccess",
+  FAILURE = "TestFailure",
+  FREQUENCY = "FrequencySet",
+  SYNC = "FullRefreshSync",
+  EDIT_SCHEMA = "EditSchema",
+  DISABLE = "Disable",
+  REENABLE = "Reenable",
+  DELETE = "Delete",
+  REQUEST = "Request",
+  SKIP = "Skip",
+  FEEDBACK = "Feedback",
+  PREFERENCES = "Preferences",
+  NO_MATCHING_CONNECTOR = "NoMatchingConnector",
+  SELECTION_OPENED = "SelectionOpened",
+}
+
+export type EventParams = Record<string, unknown>;

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -1,10 +1,10 @@
 import { QueryClient, useMutation, useQueryClient } from "react-query";
 
 import { getFrequencyConfig } from "config/utils";
+import { Action, Namespace } from "core/analytics";
 import { SyncSchema } from "core/domain/catalog";
 import { WebBackendConnectionService } from "core/domain/connection";
 import { ConnectionService } from "core/domain/connection/ConnectionService";
-import { TrackActionLegacyType, useTrackAction, TrackActionNamespace, TrackActionType } from "hooks/useTrackAction";
 import { useInitService } from "services/useInitService";
 
 import { useConfig } from "../../config";
@@ -21,6 +21,7 @@ import {
 import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { SCOPE_WORKSPACE } from "../../services/Scope";
 import { useDefaultRequestMiddlewares } from "../../services/useDefaultRequestMiddlewares";
+import { useAnalyticsService } from "./Analytics";
 import { useCurrentWorkspace } from "./useWorkspace";
 
 export const connectionsKeys = {
@@ -88,15 +89,16 @@ export const useConnectionLoad = (
 
 export const useSyncConnection = () => {
   const service = useConnectionService();
-  const trackSourceAction = useTrackAction(TrackActionNamespace.SOURCE, TrackActionLegacyType.SOURCE);
+  const analyticsService = useAnalyticsService();
 
   return useMutation((connection: WebBackendConnectionRead) => {
     const frequency = getFrequencyConfig(connection.schedule);
 
-    trackSourceAction("Full refresh sync", TrackActionType.SYNC, {
+    analyticsService.track(Namespace.CONNECTION, Action.SYNC, {
+      actionDescription: "Manual triggered sync",
       connector_source: connection.source?.sourceName,
       connector_source_definition_id: connection.source?.sourceDefinitionId,
-      connector_destination: connection.destination?.name,
+      connector_destination: connection.destination?.destinationName,
       connector_destination_definition_id: connection.destination?.destinationDefinitionId,
       frequency: frequency?.type,
     });
@@ -120,10 +122,7 @@ const useGetConnection = (connectionId: string, options?: { refetchInterval: num
 const useCreateConnection = () => {
   const service = useWebConnectionService();
   const queryClient = useQueryClient();
-  const trackNewConnectionAction = useTrackAction(
-    TrackActionNamespace.CONNECTION,
-    TrackActionLegacyType.NEW_CONNECTION
-  );
+  const analyticsService = useAnalyticsService();
 
   return useMutation(
     async ({
@@ -146,7 +145,8 @@ const useCreateConnection = () => {
 
       const frequencyData = getFrequencyConfig(values.schedule);
 
-      trackNewConnectionAction("Set up connection", TrackActionType.CREATE, {
+      analyticsService.track(Namespace.CONNECTION, Action.CREATE, {
+        actionDescription: "New connection created",
         frequency: frequencyData?.type || "",
         connector_source_definition: source?.sourceName,
         connector_source_definition_id: sourceDefinition?.sourceDefinitionId,

airbyte-webapp/src/hooks/services/useDestinationHook.tsx

@@ -1,8 +1,8 @@
 import { useMutation, useQueryClient } from "react-query";
 
+import { Action, Namespace } from "core/analytics";
 import { ConnectionConfiguration } from "core/domain/connection";
 import { DestinationService } from "core/domain/connector/DestinationService";
-import { TrackActionLegacyType, TrackActionType, TrackActionNamespace, useTrackAction } from "hooks/useTrackAction";
 import { useInitService } from "services/useInitService";
 import { isDefined } from "utils/common";
 
@@ -11,6 +11,7 @@ import { DestinationRead, WebBackendConnectionRead } from "../../core/request/Ai
 import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { SCOPE_WORKSPACE } from "../../services/Scope";
 import { useDefaultRequestMiddlewares } from "../../services/useDefaultRequestMiddlewares";
+import { useAnalyticsService } from "./Analytics";
 import { connectionsKeys, ListConnection } from "./useConnectionHook";
 import { useCurrentWorkspace } from "./useWorkspace";
 
@@ -92,14 +93,15 @@ const useCreateDestination = () => {
 const useDeleteDestination = () => {
   const service = useDestinationService();
   const queryClient = useQueryClient();
-  const trackDestinationAction = useTrackAction(TrackActionNamespace.DESTINATION, TrackActionLegacyType.SOURCE);
+  const analyticsService = useAnalyticsService();
 
   return useMutation(
     (payload: { destination: DestinationRead; connectionsWithDestination: WebBackendConnectionRead[] }) =>
       service.delete(payload.destination.destinationId),
     {
       onSuccess: (_data, ctx) => {
-        trackDestinationAction("Delete destination", TrackActionType.DELETE, {
+        analyticsService.track(Namespace.DESTINATION, Action.DELETE, {
+          actionDescription: "Destination deleted",
           connector_destination: ctx.destination.destinationName,
           connector_destination_definition_id: ctx.destination.destinationDefinitionId,
         });

airbyte-webapp/src/hooks/services/useRequestConnector.tsx

@@ -1,3 +1,4 @@
+import { Action, Namespace } from "core/analytics";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 
 interface Values {
@@ -13,7 +14,8 @@ const useRequestConnector = (): {
   const analyticsService = useAnalyticsService();
 
   const requestConnector = (values: Values) => {
-    analyticsService.track("Request a Connector", {
+    analyticsService.track(Namespace.CONNECTOR, Action.REQUEST, {
+      actionDescription: "Request new connector",
       email: values.email,
       // This parameter has a legacy name from when it was only the webpage, but we wanted to keep the parameter
       // name the same after renaming the field to additional information

airbyte-webapp/src/hooks/services/useSourceHook.tsx

@@ -2,18 +2,19 @@ import { useCallback, useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 
 import { useConfig } from "config";
+import { Action, Namespace } from "core/analytics";
 import { SyncSchema } from "core/domain/catalog";
 import { ConnectionConfiguration } from "core/domain/connection";
 import { SourceService } from "core/domain/connector/SourceService";
 import { JobInfo } from "core/domain/job";
-import { TrackActionLegacyType, TrackActionType, TrackActionNamespace, useTrackAction } from "hooks/useTrackAction";
 import { useInitService } from "services/useInitService";
 import { isDefined } from "utils/common";
 
 import { SourceRead, SynchronousJobRead, WebBackendConnectionRead } from "../../core/request/AirbyteClient";
 import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { SCOPE_WORKSPACE } from "../../services/Scope";
 import { useDefaultRequestMiddlewares } from "../../services/useDefaultRequestMiddlewares";
+import { useAnalyticsService } from "./Analytics";
 import { connectionsKeys, ListConnection } from "./useConnectionHook";
 import { useCurrentWorkspace } from "./useWorkspace";
 
@@ -98,14 +99,15 @@ const useCreateSource = () => {
 const useDeleteSource = () => {
   const service = useSourceService();
   const queryClient = useQueryClient();
-  const trackSourceAction = useTrackAction(TrackActionNamespace.SOURCE, TrackActionLegacyType.SOURCE);
+  const analyticsService = useAnalyticsService();
 
   return useMutation(
     (payload: { source: SourceRead; connectionsWithSource: WebBackendConnectionRead[] }) =>
       service.delete(payload.source.sourceId),
     {
       onSuccess: (_data, ctx) => {
-        trackSourceAction("Delete source", TrackActionType.DELETE, {
+        analyticsService.track(Namespace.SOURCE, Action.DELETE, {
+          actionDescription: "Source deleted",
           connector_source: ctx.source.sourceName,
           connector_source_definition_id: ctx.source.sourceDefinitionId,
         });