From abeda11ba155826a60fd7fc492841ecdb95be2a3 Mon Sep 17 00:00:00 2001
From: Chris Collins <chriscollins3456@gmail.com>
Date: Thu, 4 May 2023 17:52:07 -0400
Subject: [PATCH] feat(tracking) Add tracking events to our chrome extension
 page (#7967)

---
 datahub-web-react/src/app/analytics/event.ts   | 18 +++++++++++++++++-
 .../src/app/embed/EmbeddedPage.tsx             | 12 +++++++++++-
 .../app/entity/shared/embed/EmbeddedHeader.tsx | 11 +++++++++++
 .../datahubusage/DataHubUsageEventType.java    |  4 +++-
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/datahub-web-react/src/app/analytics/event.ts b/datahub-web-react/src/app/analytics/event.ts
index 88b1fdec36a49..c9558f29f551e 100644
--- a/datahub-web-react/src/app/analytics/event.ts
+++ b/datahub-web-react/src/app/analytics/event.ts
@@ -64,6 +64,8 @@ export enum EventType {
     SelectAutoCompleteOption,
     SelectQuickFilterEvent,
     DeselectQuickFilterEvent,
+    EmbedProfileViewEvent,
+    EmbedProfileViewInDataHubEvent,
 }
 
 /**
@@ -495,6 +497,18 @@ export interface DeselectQuickFilterEvent extends BaseEvent {
     quickFilterValue: string;
 }
 
+export interface EmbedProfileViewEvent extends BaseEvent {
+    type: EventType.EmbedProfileViewEvent;
+    entityType: string;
+    entityUrn: string;
+}
+
+export interface EmbedProfileViewInDataHubEvent extends BaseEvent {
+    type: EventType.EmbedProfileViewInDataHubEvent;
+    entityType: string;
+    entityUrn: string;
+}
+
 /**
  * Event consisting of a union of specific event types.
  */
@@ -557,4 +571,6 @@ export type Event =
     | DeleteQueryEvent
     | SelectAutoCompleteOption
     | SelectQuickFilterEvent
-    | DeselectQuickFilterEvent;
+    | DeselectQuickFilterEvent
+    | EmbedProfileViewEvent
+    | EmbedProfileViewInDataHubEvent;
diff --git a/datahub-web-react/src/app/embed/EmbeddedPage.tsx b/datahub-web-react/src/app/embed/EmbeddedPage.tsx
index adff77f3e6d50..429f83f34af6e 100644
--- a/datahub-web-react/src/app/embed/EmbeddedPage.tsx
+++ b/datahub-web-react/src/app/embed/EmbeddedPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 import styled from 'styled-components/macro';
 import { useGetGrantedPrivilegesQuery } from '../../graphql/policy.generated';
@@ -9,6 +9,8 @@ import { decodeUrn } from '../entity/shared/utils';
 import CompactContext from '../shared/CompactContext';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { useGetAuthenticatedUserUrn } from '../useGetAuthenticatedUser';
+import analytics from '../analytics/analytics';
+import { EventType } from '../analytics';
 
 const EmbeddedPageWrapper = styled.div`
     max-height: 100%;
@@ -29,6 +31,14 @@ export default function EmbeddedPage({ entityType }: Props) {
     const { urn: encodedUrn } = useParams<RouteParams>();
     const urn = decodeUrn(encodedUrn);
 
+    useEffect(() => {
+        analytics.event({
+            type: EventType.EmbedProfileViewEvent,
+            entityType,
+            entityUrn: urn,
+        });
+    }, [entityType, urn]);
+
     const authenticatedUserUrn = useGetAuthenticatedUserUrn();
     const { data } = useGetGrantedPrivilegesQuery({
         variables: {
diff --git a/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx b/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx
index 646b3c87538d5..d4c3f2b218f82 100644
--- a/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx
+++ b/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx
@@ -10,6 +10,8 @@ import { IconStyleType } from '../../Entity';
 import { useEntityData } from '../EntityContext';
 import { getDisplayedEntityType } from '../containers/profile/header/PlatformContent/PlatformContentContainer';
 import { ANTD_GRAY } from '../constants';
+import analytics from '../../../analytics/analytics';
+import { EventType } from '../../../analytics';
 
 const HeaderWrapper = styled.div`
     display: flex;
@@ -61,6 +63,14 @@ export default function EmbeddedHeader() {
     const appConfig = useAppConfig();
     const themeConfig = useTheme();
 
+    function trackClickViewInDataHub() {
+        analytics.event({
+            type: EventType.EmbedProfileViewInDataHubEvent,
+            entityType,
+            entityUrn: entityData?.urn || '',
+        });
+    }
+
     const typeIcon = entityRegistry.getIcon(entityType, 12, IconStyleType.ACCENT, ANTD_GRAY[8]);
     const displayedEntityType = getDisplayedEntityType(entityData, entityRegistry, entityType);
     const entityName = entityRegistry.getDisplayName(entityType, entityData);
@@ -86,6 +96,7 @@ export default function EmbeddedHeader() {
                         href={`${window.location.origin}/${entityTypePathName}/${entityData?.urn}`}
                         target="_blank"
                         rel="noreferrer noopener"
+                        onClick={trackClickViewInDataHub}
                     >
                         view in DataHub <ArrowRightOutlined />
                     </StyledLink>
diff --git a/metadata-io/src/main/java/com/linkedin/metadata/datahubusage/DataHubUsageEventType.java b/metadata-io/src/main/java/com/linkedin/metadata/datahubusage/DataHubUsageEventType.java
index 3d41b6d87dacb..9c015b5e2fdc2 100644
--- a/metadata-io/src/main/java/com/linkedin/metadata/datahubusage/DataHubUsageEventType.java
+++ b/metadata-io/src/main/java/com/linkedin/metadata/datahubusage/DataHubUsageEventType.java
@@ -63,7 +63,9 @@ public enum DataHubUsageEventType {
   UPDATE_QUERY_EVENT("UpdateQueryEvent"),
   SELECT_AUTO_COMPLETE_OPTION("SelectAutoCompleteOption"),
   SELECT_QUICK_FILTER_EVENT("SelectQuickFilterEvent"),
-  DESELECT_QUICK_FILTER_EVENT("DeselectQuickFilterEvent");
+  DESELECT_QUICK_FILTER_EVENT("DeselectQuickFilterEvent"),
+  EMBED_PROFILE_VIEW_EVENT("EmbedProfileViewEvent"),
+  EMBED_PROFILE_VIEW_IN_DATAHUB_EVENT("EmbedProfileViewInDataHubEvent");
 
   private final String type;