console(platform): Respect the Heap custom events convention

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6520
GitOrigin-RevId: afbf6139fe4bee0e17a90ee1b7a22c8442a75e28

console/cypress/e2e/tracing/api-graphiql/heap.api-graphiql.integration.test.ts

@@ -38,7 +38,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Prettify > click'
+        'GraphiQl - click - Prettify'
       );
     });
 
@@ -49,7 +49,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > History > click'
+        'GraphiQl - click - History'
       );
     });
 
@@ -60,7 +60,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Explorer > click'
+        'GraphiQl - click - Explorer'
       );
     });
 
@@ -71,7 +71,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > REST > click'
+        'GraphiQl - click - REST'
       );
     });
 
@@ -82,7 +82,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Derive action > click'
+        'GraphiQl - click - Derive action'
       );
     });
 
@@ -109,13 +109,13 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Analyze > click'
+        'GraphiQl - click - Analyze'
       );
     });
 
     // --------------------
     cy.log(
-      `**--- ⚠️ 'GraphiQl > Cache > click' is not tested because it's part of the Pro Console for which we do not have tests yet**`
+      `**--- ⚠️ 'GraphiQl - click - Cache' is not tested because it's part of the Pro Console for which we do not have tests yet**`
     );
 
     // --------------------
@@ -125,7 +125,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > click'
+        'GraphiQl - click - Code Exporter'
       );
     });
 
@@ -136,7 +136,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > JavaScript/TypeScript > click'
+        'GraphiQl > Code Exporter - click - JavaScript/TypeScript'
       );
 
       // --------------------
@@ -145,7 +145,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > Fetch > click'
+        'GraphiQl > Code Exporter - click - Fetch'
       );
 
       // --------------------
@@ -154,7 +154,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > server-side usage > click'
+        'GraphiQl > Code Exporter - click - server-side usage'
       );
 
       // --------------------
@@ -163,7 +163,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > async/await > click'
+        'GraphiQl > Code Exporter - click - async/await'
       );
 
       // --------------------
@@ -182,7 +182,7 @@ describe('Tracing GraphiQL plugins usage', () => {
 
       cy.get('@spyHeapTrack').should(
         'have.been.calledWith',
-        'GraphiQl > Code Exporter > copy > click'
+        'GraphiQl > Code Exporter - click - copy'
       );
     });
   });

console/src/components/Services/ApiExplorer/customAnalyticsEvents/graphiQl/trackGraphiQlCodeExporterClick.ts

@@ -1,5 +1,4 @@
 import { trackCustomEvent } from '@/features/Analytics';
-import type { GraphiQlToolbarButtonClickEventNames } from './types';
 
 /**
  * Track every interaction with the GraphiQL Code Exporter plugin.
@@ -13,6 +12,9 @@ export function trackGraphiQlCodeExporterClick(
     | 'server-side usage'
     | 'JavaScript/TypeScript'
 ) {
-  const eventName: GraphiQlToolbarButtonClickEventNames = `GraphiQl > Code Exporter > ${button} > click`;
-  trackCustomEvent(eventName);
+  trackCustomEvent({
+    location: 'GraphiQl > Code Exporter',
+    action: 'click',
+    object: button,
+  });
 }

console/src/components/Services/ApiExplorer/customAnalyticsEvents/graphiQl/trackGraphiQlToolbarButtonClick.ts

@@ -1,5 +1,4 @@
 import { trackCustomEvent } from '@/features/Analytics';
-import type { GraphiQlToolbarButtonClickEventNames } from './types';
 
 /**
  * Track all the clicks on the buttons at the top of GraphiQL.
@@ -15,6 +14,9 @@ export function trackGraphiQlToolbarButtonClick(
     | 'Derive action'
     | 'Code Exporter'
 ) {
-  const eventName: GraphiQlToolbarButtonClickEventNames = `GraphiQl > ${button} > click`;
-  trackCustomEvent(eventName);
+  trackCustomEvent({
+    location: 'GraphiQl',
+    action: 'click',
+    object: button,
+  });
 }

console/src/components/Services/ApiExplorer/customAnalyticsEvents/graphiQl/types.ts

@@ -1,16 +0,0 @@
-export type GraphiQlToolbarButtonClickEventNames =
-  | 'GraphiQl > REST > click'
-  | 'GraphiQl > Cache > click'
-  | 'GraphiQl > History > click'
-  | 'GraphiQl > Analyze > click'
-  | 'GraphiQl > Prettify > click'
-  | 'GraphiQl > Explorer > click'
-  | 'GraphiQl > Derive action > click'
-  // Code exporter
-  | 'GraphiQl > Code Exporter > click'
-  | 'GraphiQl > Code Exporter > copy > click'
-  | 'GraphiQl > Code Exporter > Fetch > click'
-  | 'GraphiQl > Code Exporter > async/await > click'
-  | 'GraphiQl > Code Exporter > async/await > click'
-  | 'GraphiQl > Code Exporter > server-side usage > click'
-  | 'GraphiQl > Code Exporter > JavaScript/TypeScript > click';

console/src/features/Analytics/core/trackCustomEvent.ts

@@ -1,5 +1,12 @@
 import * as Sentry from '@sentry/react';
-import type { ReservedEventNames } from './heap/types';
+
+// Heap suggest using the "Location – Action – Object" pattern
+// @see: https://help.heap.io/definitions/events/events-overview/#:~:text=Custom%20events%20are%20events%20that,events%20to%20keep%20them%20organized.
+interface HeapEvent {
+  location: string;
+  action: string;
+  object: string;
+}
 
 interface CustomEventOptions {
   severity?: 'log' | 'warning' | 'error';
@@ -17,41 +24,27 @@ const defaultOptions: CustomEventOptions = {
 /**
  * Track a custom event both in Heap and Sentry.
  */
-export function trackCustomEvent<EVENT_NAME extends string>(
-  name: EVENT_NAME extends ReservedEventNames ? never : EVENT_NAME,
+export function trackCustomEvent(
+  event: HeapEvent,
   options?: CustomEventOptions
 ) {
-  const trackOptions = { ...defaultOptions, ...options };
+  const eventName = `${event.location} - ${event.action} - ${event.object}`;
 
-  const { message, severity } = trackOptions;
+  const trackOptions = { ...defaultOptions, ...options };
+  const { message } = trackOptions;
   const data = message ? { message, ...trackOptions.data } : trackOptions.data;
 
   // --------------------------------------------------
   // HEAP TRACKING
   // --------------------------------------------------
-  switch (severity) {
-    case 'error':
-      const errorName = `(ERROR) ${name}`;
-      window.heap?.track(errorName, data);
-      break;
-
-    case 'warning':
-      const warningName = `(WARN) ${name}`;
-      window.heap?.track(warningName, data);
-      break;
-
-    case 'log':
-    default:
-      window.heap?.track(name, data);
-      break;
-  }
+  window.heap?.track(eventName, data);
 
   // --------------------------------------------------
   // SENTRY TRACKING
   // --------------------------------------------------
   Sentry.addBreadcrumb({
     message,
-    type: name,
+    type: eventName,
     data: options?.data,
     level: options?.severity,
   });