Add Telemetry (#466)

* Telemetry v1

* Add package-lock.json to gitignore

front/src/App.tsx

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { RequireAuth } from '@/auth/components/RequireAuth';
 import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
+import { useTrackPageView } from '@/analytics/hooks/useTrackPageView';
 import { useGoToHotkeys } from '@/hotkeys/hooks/useGoToHotkeys';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
 import { Index } from '~/pages/auth/Index';
@@ -18,6 +19,8 @@ export function App() {
   useGoToHotkeys('o', '/opportunities');
   useGoToHotkeys('s', '/settings/profile');
 
+  useTrackPageView();
+
   return (
     <DefaultLayout>
       <Routes>

front/src/generated/graphql.tsx

@@ -641,6 +641,12 @@ export type EnumPipelineProgressableTypeFilter = {
   notIn?: InputMaybe<Array<PipelineProgressableType>>;
 };
 
+export type Event = {
+  __typename?: 'Event';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean'];
+};
+
 export type IntNullableFilter = {
   equals?: InputMaybe<Scalars['Int']>;
   gt?: InputMaybe<Scalars['Int']>;
@@ -676,6 +682,7 @@ export type LoginToken = {
 export type Mutation = {
   __typename?: 'Mutation';
   challenge: LoginToken;
+  createEvent: Event;
   createOneComment: Comment;
   createOneCommentThread: CommentThread;
   createOneCompany: Company;
@@ -700,6 +707,12 @@ export type MutationChallengeArgs = {
 };
 
 
+export type MutationCreateEventArgs = {
+  data: Scalars['JSON'];
+  type: Scalars['String'];
+};
+
+
 export type MutationCreateOneCommentArgs = {
   data: CommentCreateInput;
 };
@@ -1657,6 +1670,14 @@ export type DeleteCompaniesMutationVariables = Exact<{
 
 export type DeleteCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } };
 
+export type CreateEventMutationVariables = Exact<{
+  type: Scalars['String'];
+  data: Scalars['JSON'];
+}>;
+
+
+export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Event', success: boolean } };
+
 export type GetPipelinesQueryVariables = Exact<{
   where?: InputMaybe<PipelineWhereInput>;
 }>;
@@ -2422,6 +2443,40 @@ export function useDeleteCompaniesMutation(baseOptions?: Apollo.MutationHookOpti
 export type DeleteCompaniesMutationHookResult = ReturnType<typeof useDeleteCompaniesMutation>;
 export type DeleteCompaniesMutationResult = Apollo.MutationResult<DeleteCompaniesMutation>;
 export type DeleteCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteCompaniesMutation, DeleteCompaniesMutationVariables>;
+export const CreateEventDocument = gql`
+    mutation CreateEvent($type: String!, $data: JSON!) {
+  createEvent(type: $type, data: $data) {
+    success
+  }
+}
+    `;
+export type CreateEventMutationFn = Apollo.MutationFunction<CreateEventMutation, CreateEventMutationVariables>;
+
+/**
+ * __useCreateEventMutation__
+ *
+ * To run a mutation, you first call `useCreateEventMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateEventMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createEventMutation, { data, loading, error }] = useCreateEventMutation({
+ *   variables: {
+ *      type: // value for 'type'
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions<CreateEventMutation, CreateEventMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateEventMutation, CreateEventMutationVariables>(CreateEventDocument, options);
+      }
+export type CreateEventMutationHookResult = ReturnType<typeof useCreateEventMutation>;
+export type CreateEventMutationResult = Apollo.MutationResult<CreateEventMutation>;
+export type CreateEventMutationOptions = Apollo.BaseMutationOptions<CreateEventMutation, CreateEventMutationVariables>;
 export const GetPipelinesDocument = gql`
     query GetPipelines($where: PipelineWhereInput) {
   findManyPipeline(where: $where) {

front/src/modules/analytics/hooks/useEventTracker.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import { useCreateEventMutation } from '~/generated/graphql';
+
+import { useIsTelemetryEnabled } from './useIsTelemetryEnabled';
+
+interface EventLocation {
+  pathname: string;
+}
+
+export interface EventData {
+  location: EventLocation;
+}
+
+export function useEventTracker() {
+  const telemetryEnabled = useIsTelemetryEnabled();
+  const [createEventMutation] = useCreateEventMutation();
+
+  return useCallback(
+    (eventType: string, eventData: EventData) => {
+      if (telemetryEnabled) {
+        createEventMutation({
+          variables: {
+            type: eventType,
+            data: eventData,
+          },
+        });
+      }
+    },
+    [createEventMutation, telemetryEnabled],
+  );
+}

front/src/modules/analytics/hooks/useIsTelemetryEnabled.ts

@@ -0,0 +1,4 @@
+export function useIsTelemetryEnabled() {
+  // TODO: replace by clientConfig
+  return process.env.IS_TELEMETRY_ENABLED !== 'false';
+}

front/src/modules/analytics/hooks/useTrackEvent.ts

@@ -0,0 +1,7 @@
+import { EventData, useEventTracker } from './useEventTracker';
+
+export function useTrackEvent(eventType: string, eventData: EventData) {
+  const eventTracker = useEventTracker();
+
+  return eventTracker(eventType, eventData);
+}

front/src/modules/analytics/hooks/useTrackPageView.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useEventTracker } from './useEventTracker';
+
+export function useTrackPageView() {
+  const location = useLocation();
+  const eventTracker = useEventTracker();
+
+  useEffect(() => {
+    eventTracker('pageview', {
+      location: {
+        pathname: location.pathname,
+      },
+    });
+  }, [location, eventTracker]);
+}

front/src/modules/analytics/services/index.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_EVENT = gql`
+  mutation CreateEvent($type: String!, $data: JSON!) {
+    createEvent(type: $type, data: $data) {
+      success
+    }
+  }
+`;

front/src/testing/graphqlMocks.ts

@@ -2,6 +2,7 @@ import { getOperationName } from '@apollo/client/utilities';
 import { graphql } from 'msw';
 
 import { GET_COMPANIES } from '@/companies/services';
+import { CREATE_EVENT } from '@/analytics/services';
 import { GET_PEOPLE, UPDATE_PERSON } from '@/people/services';
 import {
   SEARCH_COMPANY_QUERY,
@@ -102,4 +103,11 @@ export const graphqlMocks = [
       }),
     );
   }),
+  graphql.mutation(getOperationName(CREATE_EVENT) ?? '', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        createEvent: { success: 1, __typename: 'Event' },
+      }),
+    );
+  }),
 ];