feat(analytics): add clickhouse

.github/workflows/ci-server.yaml

@@ -168,17 +168,33 @@ jobs:
         image: redis
         ports:
           - 6379:6379
+      clickhouse:
+        image: clickhouse/clickhouse-server:latest
+        env:
+          CLICKHOUSE_PASSWORD: clickhousePassword
+          CLICKHOUSE_URL: "http://default:clickhousePassword@localhost:8123/twenty"
+        ports:
+          - 8123:8123
+          - 9000:9000
+        options: >-
+          --health-cmd "clickhouse-client --host=localhost --port=9000 --user=default --password=clickhousePassword --query='SELECT 1'" 
+          --health-interval 10s 
+          --health-timeout 5s 
+          --health-retries 5
     env:
       NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
       NODE_ENV: test
+      ANALYTICS_ENABLED: true
+      CLICKHOUSE_URL: "http://default:clickhousePassword@localhost:8123/twenty"
+      CLICKHOUSE_PASSWORD: clickhousePassword
     steps:
       - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install
-      - name: Update .env.test for billing
+      - name: Update .env.test for integrations tests
         run: |
           echo "IS_BILLING_ENABLED=true" >> .env.test
           echo "BILLING_STRIPE_API_KEY=test-api-key" >> .env.test
@@ -198,6 +214,10 @@ jobs:
       - name: Server / Create Test DB
         run: |
           PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "test";'
+      - name: Run ClickHouse migrations
+        run: npx nx clickhouse:migrate twenty-server
+      - name: Run ClickHouse seeds
+        run: npx nx clickhouse:seed twenty-server
       - name: Server / Run Integration Tests
         uses: ./.github/workflows/actions/nx-affected
         with:

Makefile

@@ -17,4 +17,7 @@ postgres-on-docker:
 		-c "CREATE DATABASE \"test\" WITH OWNER postgres;"
 
 redis-on-docker:
-	docker run -d --name twenty_redis -p 6379:6379 redis/redis-stack-server:latest
+	docker run -d --name twenty_redis -p 6379:6379 redis/redis-stack-server:latest
+
+clickhouse-on-docker:
+	docker run -d --name twenty_clickhouse -p 8123:8123 -p 9000:9000 -e CLICKHOUSE_PASSWORD=devPassword clickhouse/clickhouse-server:latest

packages/twenty-front/.eslintrc.cjs

@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
   extends: ['../../.eslintrc.react.cjs'],
   ignorePatterns: [

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -63,6 +63,11 @@ export type Analytics = {
   success: Scalars['Boolean']['output'];
 };
 
+export enum AnalyticsType {
+  PAGEVIEW = 'PAGEVIEW',
+  TRACK = 'TRACK'
+}
+
 export type ApiConfig = {
   __typename?: 'ApiConfig';
   mutationMaximumAffectedRecords: Scalars['Float']['output'];
@@ -155,7 +160,8 @@ export type BillingEndTrialPeriodOutput = {
 
 export type BillingMeteredProductUsageOutput = {
   __typename?: 'BillingMeteredProductUsageOutput';
-  includedFreeQuantity: Scalars['Float']['output'];
+  freeTierQuantity: Scalars['Float']['output'];
+  freeTrialQuantity: Scalars['Float']['output'];
   periodEnd: Scalars['DateTime']['output'];
   periodStart: Scalars['DateTime']['output'];
   productKey: BillingProductKey;
@@ -474,6 +480,10 @@ export type CreateServerlessFunctionInput = {
 };
 
 export type CreateWorkflowVersionStepInput = {
+  /** Next step ID */
+  nextStepId?: InputMaybe<Scalars['String']['input']>;
+  /** Parent step ID */
+  parentStepId?: InputMaybe<Scalars['String']['input']>;
   /** New step type */
   stepType: Scalars['String']['input'];
   /** Workflow version ID */
@@ -598,6 +608,12 @@ export type FeatureFlag = {
   workspaceId: Scalars['String']['output'];
 };
 
+export type FeatureFlagDto = {
+  __typename?: 'FeatureFlagDTO';
+  key: FeatureFlagKey;
+  value: Scalars['Boolean']['output'];
+};
+
 export enum FeatureFlagKey {
   IsAirtableIntegrationEnabled = 'IsAirtableIntegrationEnabled',
   IsAnalyticsV2Enabled = 'IsAnalyticsV2Enabled',
@@ -970,8 +986,9 @@ export type Mutation = {
   syncRemoteTable: RemoteTable;
   syncRemoteTableSchemaChanges: RemoteTable;
   track: Analytics;
+  trackAnalytics: Analytics;
   unsyncRemoteTable: RemoteTable;
-  updateLabPublicFeatureFlag: FeatureFlag;
+  updateLabPublicFeatureFlag: FeatureFlagDto;
   updateOneField: Field;
   updateOneObject: Object;
   updateOneRemoteServer: RemoteServer;
@@ -1252,6 +1269,14 @@ export type MutationTrackArgs = {
 };
 
 
+export type MutationTrackAnalyticsArgs = {
+  event?: InputMaybe<Scalars['String']['input']>;
+  name?: InputMaybe<Scalars['String']['input']>;
+  properties?: InputMaybe<Scalars['JSON']['input']>;
+  type: AnalyticsType;
+};
+
+
 export type MutationUnsyncRemoteTableArgs = {
   input: RemoteTableInput;
 };
@@ -2462,7 +2487,7 @@ export type Workspace = {
   defaultRole?: Maybe<Role>;
   deletedAt?: Maybe<Scalars['DateTime']['output']>;
   displayName?: Maybe<Scalars['String']['output']>;
-  featureFlags?: Maybe<Array<FeatureFlag>>;
+  featureFlags?: Maybe<Array<FeatureFlagDto>>;
   hasValidEnterpriseKey: Scalars['Boolean']['output'];
   id: Scalars['UUID']['output'];
   inviteHash?: Maybe<Scalars['String']['output']>;

packages/twenty-front/src/generated/graphql.tsx

@@ -55,6 +55,11 @@ export type Analytics = {
   success: Scalars['Boolean'];
 };
 
+export enum AnalyticsType {
+  PAGEVIEW = 'PAGEVIEW',
+  TRACK = 'TRACK'
+}
+
 export type ApiConfig = {
   __typename?: 'ApiConfig';
   mutationMaximumAffectedRecords: Scalars['Float'];
@@ -899,6 +904,7 @@ export type Mutation = {
   submitFormStep: Scalars['Boolean'];
   switchToYearlyInterval: BillingUpdateOutput;
   track: Analytics;
+  trackAnalytics: Analytics;
   updateLabPublicFeatureFlag: FeatureFlagDto;
   updateOneField: Field;
   updateOneObject: Object;
@@ -1139,6 +1145,14 @@ export type MutationTrackArgs = {
 };
 
 
+export type MutationTrackAnalyticsArgs = {
+  event?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+  properties?: InputMaybe<Scalars['JSON']>;
+  type: AnalyticsType;
+};
+
+
 export type MutationUpdateLabPublicFeatureFlagArgs = {
   input: UpdateLabPublicFeatureFlagInput;
 };
@@ -2403,6 +2417,16 @@ export type GetTimelineThreadsFromPersonIdQueryVariables = Exact<{
 
 export type GetTimelineThreadsFromPersonIdQuery = { __typename?: 'Query', getTimelineThreadsFromPersonId: { __typename?: 'TimelineThreadsWithTotal', totalNumberOfThreads: number, timelineThreads: Array<{ __typename?: 'TimelineThread', id: any, read: boolean, visibility: MessageChannelVisibility, lastMessageReceivedAt: string, lastMessageBody: string, subject: string, numberOfMessagesInThread: number, participantCount: number, firstParticipant: { __typename?: 'TimelineThreadParticipant', personId?: any | null, workspaceMemberId?: any | null, firstName: string, lastName: string, displayName: string, avatarUrl: string, handle: string }, lastTwoParticipants: Array<{ __typename?: 'TimelineThreadParticipant', personId?: any | null, workspaceMemberId?: any | null, firstName: string, lastName: string, displayName: string, avatarUrl: string, handle: string }> }> } };
 
+export type TrackAnalyticsMutationVariables = Exact<{
+  type: AnalyticsType;
+  event?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+  properties?: InputMaybe<Scalars['JSON']>;
+}>;
+
+
+export type TrackAnalyticsMutation = { __typename?: 'Mutation', trackAnalytics: { __typename?: 'Analytics', success: boolean } };
+
 export type TrackMutationVariables = Exact<{
   action: Scalars['String'];
   payload: Scalars['JSON'];
@@ -3326,6 +3350,42 @@ export function useGetTimelineThreadsFromPersonIdLazyQuery(baseOptions?: Apollo.
 export type GetTimelineThreadsFromPersonIdQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromPersonIdQuery>;
 export type GetTimelineThreadsFromPersonIdLazyQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromPersonIdLazyQuery>;
 export type GetTimelineThreadsFromPersonIdQueryResult = Apollo.QueryResult<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>;
+export const TrackAnalyticsDocument = gql`
+    mutation TrackAnalytics($type: AnalyticsType!, $event: String, $name: String, $properties: JSON) {
+  trackAnalytics(type: $type, event: $event, name: $name, properties: $properties) {
+    success
+  }
+}
+    `;
+export type TrackAnalyticsMutationFn = Apollo.MutationFunction<TrackAnalyticsMutation, TrackAnalyticsMutationVariables>;
+
+/**
+ * __useTrackAnalyticsMutation__
+ *
+ * To run a mutation, you first call `useTrackAnalyticsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useTrackAnalyticsMutation` 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 [trackAnalyticsMutation, { data, loading, error }] = useTrackAnalyticsMutation({
+ *   variables: {
+ *      type: // value for 'type'
+ *      event: // value for 'event'
+ *      name: // value for 'name'
+ *      properties: // value for 'properties'
+ *   },
+ * });
+ */
+export function useTrackAnalyticsMutation(baseOptions?: Apollo.MutationHookOptions<TrackAnalyticsMutation, TrackAnalyticsMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<TrackAnalyticsMutation, TrackAnalyticsMutationVariables>(TrackAnalyticsDocument, options);
+      }
+export type TrackAnalyticsMutationHookResult = ReturnType<typeof useTrackAnalyticsMutation>;
+export type TrackAnalyticsMutationResult = Apollo.MutationResult<TrackAnalyticsMutation>;
+export type TrackAnalyticsMutationOptions = Apollo.BaseMutationOptions<TrackAnalyticsMutation, TrackAnalyticsMutationVariables>;
 export const TrackDocument = gql`
     mutation Track($action: String!, $payload: JSON!) {
   track(action: $action, payload: $payload) {

packages/twenty-front/src/modules/analytics/graphql/queries/track.ts

@@ -1,8 +1,18 @@
 import { gql } from '@apollo/client';
 
-export const TRACK = gql`
-  mutation Track($action: String!, $payload: JSON!) {
-    track(action: $action, payload: $payload) {
+export const TRACK_ANALYTICS = gql`
+  mutation TrackAnalytics(
+    $type: AnalyticsType!
+    $event: String
+    $name: String
+    $properties: JSON
+  ) {
+    trackAnalytics(
+      type: $type
+      event: $event
+      name: $name
+      properties: $properties
+    ) {
       success
     }
   }

packages/twenty-front/src/modules/analytics/hooks/__tests__/useEventTracker.test.tsx

@@ -5,23 +5,76 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { ReactNode } from 'react';
 import { RecoilRoot } from 'recoil';
 
-import { useEventTracker } from '../useEventTracker';
+import { ANALYTICS_COOKIE_NAME, useEventTracker } from '../useEventTracker';
+import { AnalyticsType } from '~/generated/graphql';
+
+// Mock document.cookie
+Object.defineProperty(document, 'cookie', {
+  writable: true,
+  value: `${ANALYTICS_COOKIE_NAME}=exampleId`,
+});
 
 const mocks: MockedResponse[] = [
   {
     request: {
       query: gql`
-        mutation Track($action: String!, $payload: JSON!) {
-          track(action: $action, payload: $payload) {
+        mutation TrackAnalytics(
+          $type: AnalyticsType!
+          $event: String
+          $name: String
+          $properties: JSON
+        ) {
+          trackAnalytics(
+            type: $type
+            event: $event
+            name: $name
+            properties: $properties
+          ) {
+            success
+          }
+        }
+      `,
+      variables: {
+        type: AnalyticsType['TRACK'],
+        event: 'Example Event',
+        properties: {
+          foo: 'bar',
+        },
+      },
+    },
+    result: jest.fn(() => ({
+      data: {
+        track: {
+          success: true,
+        },
+      },
+    })),
+  },
+  {
+    request: {
+      query: gql`
+        mutation TrackAnalytics(
+          $type: AnalyticsType!
+          $event: String
+          $name: String
+          $properties: JSON
+        ) {
+          trackAnalytics(
+            type: $type
+            event: $event
+            name: $name
+            properties: $properties
+          ) {
             success
           }
         }
       `,
       variables: {
-        action: 'exampleType',
-        payload: {
+        type: AnalyticsType['PAGEVIEW'],
+        name: 'Example',
+        properties: {
           sessionId: 'exampleId',
-          pathname: '',
+          pathname: '/example/path',
           userAgent: '',
           timeZone: '',
           locale: '',
@@ -50,24 +103,45 @@ const Wrapper = ({ children }: { children: ReactNode }) => (
 
 describe('useEventTracker', () => {
   it('should make the call to track the event', async () => {
-    const eventType = 'exampleType';
-    const eventData = {
-      sessionId: 'exampleId',
-      pathname: '',
-      userAgent: '',
-      timeZone: '',
-      locale: '',
-      href: '',
-      referrer: '',
+    const payload = {
+      event: 'Example Event',
+      properties: {
+        foo: 'bar',
+      },
     };
+
     const { result } = renderHook(() => useEventTracker(), {
       wrapper: Wrapper,
     });
     act(() => {
-      result.current(eventType, eventData);
+      result.current(AnalyticsType['TRACK'], payload);
     });
     await waitFor(() => {
       expect(mocks[0].result).toHaveBeenCalled();
     });
   });
+
+  it('should make the call to track a pageview', async () => {
+    const payload = {
+      name: 'Example',
+      properties: {
+        sessionId: 'exampleId',
+        pathname: '/example/path',
+        userAgent: '',
+        timeZone: '',
+        locale: '',
+        href: '',
+        referrer: '',
+      },
+    };
+    const { result } = renderHook(() => useEventTracker(), {
+      wrapper: Wrapper,
+    });
+    act(() => {
+      result.current(AnalyticsType['PAGEVIEW'], payload);
+    });
+    await waitFor(() => {
+      expect(mocks[1].result).toHaveBeenCalled();
+    });
+  });
 });