[dashboard] Make analytics types explicit

Author: geropl

components/dashboard/src/Analytics.tsx

@@ -11,41 +11,60 @@ import { v4 } from "uuid";
 
 
 export type Event = "invite_url_requested" | "organisation_authorised";
+type InternalEvent = Event | "path_changed" | "dashboard_clicked";
+
+export type EventProperties =
+    TrackOrgAuthorised
+  | TrackInviteUrlRequested
+;
+type InternalEventProperties = (
+    EventProperties
+  | TrackDashboardClick
+  | TrackPathChanged
+);
+
+export interface TrackOrgAuthorised {
+  installation_id: string,
+  setup_action: string | undefined,
+}
+
+export interface TrackInviteUrlRequested {
+  invite_url: string,
+}
 
-export type TrackingMsg = {
+interface TrackDashboardClick {
   dnt?: boolean,
   path: string,
   button_type?: string,
   label?: string,
-  destination?: string
+  destination?: string,
+};
+
+interface TrackPathChanged {
+  prev: string,
+  path: string,
 }
 
 //call this to track all events outside of button and anchor clicks
-export const trackEvent = (event: Event, properties: any) => {
-  getGitpodService().server.trackEvent({
-    event: event,
-    properties: properties
-  })
+export const trackEvent = (event: Event, properties: EventProperties) => {
+  trackEventInternal(event, properties);
 }
 
-export const getAnonymousId = (): string => {
-  let anonymousId = Cookies.get('ajs_anonymous_id');
-  if (anonymousId) {
-    return anonymousId.replace(/^"(.+(?="$))"$/, '$1'); //strip enclosing double quotes before returning
-  }
-  else {
-    anonymousId = v4();
-    Cookies.set('ajs_anonymous_id', anonymousId, {domain: '.'+window.location.hostname, expires: 365});
-  };
-  return anonymousId;
-}
+const trackEventInternal = (event: InternalEvent, properties: InternalEventProperties, userKnown?: boolean) => {
+  getGitpodService().server.trackEvent({
+    //if the user is authenticated, let server determine the id. else, pass anonymousId explicitly.
+    anonymousId: userKnown ? undefined : getAnonymousId(),
+    event,
+    properties,
+  });
+};
 
 export const trackButtonOrAnchor = (target: HTMLAnchorElement | HTMLButtonElement | HTMLDivElement, userKnown: boolean) => {
   //read manually passed analytics props from 'data-analytics' attribute of event target
-  let passedProps: TrackingMsg | undefined;
+  let passedProps: TrackDashboardClick | undefined;
   if (target.dataset.analytics) {
     try {
-      passedProps = JSON.parse(target.dataset.analytics) as TrackingMsg;
+      passedProps = JSON.parse(target.dataset.analytics) as TrackDashboardClick;
       if (passedProps.dnt) {
         return;
       }
@@ -55,10 +74,10 @@ export const trackButtonOrAnchor = (target: HTMLAnchorElement | HTMLButtonElemen
 
   }
 
-  let trackingMsg: TrackingMsg = {
+  let trackingMsg: TrackDashboardClick = {
     path: window.location.pathname,
     label: target.textContent || undefined
-  }
+  };
 
   if (target instanceof HTMLButtonElement || target instanceof HTMLDivElement) {
     //parse button data
@@ -79,60 +98,59 @@ export const trackButtonOrAnchor = (target: HTMLAnchorElement | HTMLButtonElemen
     trackingMsg.destination = anchor.href;
   }
 
-  const getAncestorProps = (curr: HTMLElement | null): TrackingMsg | undefined => {
+  const getAncestorProps = (curr: HTMLElement | null): TrackDashboardClick | undefined => {
     if (!curr || curr instanceof Document) {
       return;
     }
-    const ancestorProps: TrackingMsg | undefined = getAncestorProps(curr.parentElement);
-    const currProps = JSON.parse(curr.dataset.analytics || "{}");
-    return {...ancestorProps, ...currProps} as TrackingMsg;
+    const ancestorProps: TrackDashboardClick | undefined = getAncestorProps(curr.parentElement);
+    const currProps = JSON.parse(curr.dataset.analytics || "{}") as TrackDashboardClick;
+    return {...ancestorProps, ...currProps};
   }
 
   const ancestorProps = getAncestorProps(target);
 
   //props that were passed directly to the event target take precedence over those passed to ancestor elements, which take precedence over those implicitly determined.
   trackingMsg = {...trackingMsg, ...ancestorProps, ...passedProps};
 
-  //if the user is authenticated, let server determine the id. else, pass anonymousId explicitly.
-  if (userKnown) {
-    getGitpodService().server.trackEvent({
-      event: "dashboard_clicked",
-      properties: trackingMsg
-    });
-  } else {
-    getGitpodService().server.trackEvent({
-      anonymousId: getAnonymousId(),
-      event: "dashboard_clicked",
-      properties: trackingMsg
-    });
-  }
+  trackEventInternal("dashboard_clicked", trackingMsg, userKnown);
 }
 
 //call this when the path changes. Complete page call is unnecessary for SPA after initial call
-export const trackPathChange = (props: { prev: string, path: string }) => {
-  getGitpodService().server.trackEvent({
-    event: "path_changed",
-    properties: props
-  });
+export const trackPathChange = (props: TrackPathChanged) => {
+  trackEventInternal("path_changed", props);
 }
 
+
+type TrackLocationProperties = {
+  referrer: string,
+  path: string,
+  host: string,
+  url: string,
+};
+
 export const trackLocation = async (userKnown: boolean) => {
-  const props = {
+  const props: TrackLocationProperties = {
     referrer: document.referrer,
     path: window.location.pathname,
     host: window.location.hostname,
-    url: window.location.href
-  }
-  if (userKnown) {
-    //if the user is known, make server call
-    getGitpodService().server.trackLocation({
-      properties: props
-    });
-  } else {
-    //make privacy preserving page call (automatically interpreted as such by server if anonymousId is passed)
-    getGitpodService().server.trackLocation({
-      anonymousId: getAnonymousId(),
-      properties: props
-    });
+    url: window.location.href,
+  };
+
+  getGitpodService().server.trackLocation({
+    //if the user is authenticated, let server determine the id. else, pass anonymousId explicitly.
+    anonymousId: userKnown ? undefined : getAnonymousId(),
+    properties: props
+  });
+}
+
+const getAnonymousId = (): string => {
+  let anonymousId = Cookies.get('ajs_anonymous_id');
+  if (anonymousId) {
+    return anonymousId.replace(/^"(.+(?="$))"$/, '$1'); //strip enclosing double quotes before returning
   }
+  else {
+    anonymousId = v4();
+    Cookies.set('ajs_anonymous_id', anonymousId, {domain: '.'+window.location.hostname, expires: 365});
+  };
+  return anonymousId;
 }