Add fullstory identify call

airbyte-webapp/package.json

@@ -15,6 +15,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "@fullstory/browser": "^1.4.9",
     "@papercups-io/chat-widget": "^1.1.5",
     "@papercups-io/storytime": "^1.0.6",
     "@rest-hooks/legacy": "^2.0.5",

airbyte-webapp/src/components/hooks/services/Notification/NotificationService.tsx

@@ -60,10 +60,14 @@ function NotificationService({ children }: { children: React.ReactNode }) {
   );
 }
 
-export const useNotificationService = (
+export const useNotificationService: (
   notification?: Notification,
   dependencies?: []
 ) => {
+  registerNotification: (notification: Notification) => void;
+  unregisterAllNotifications: () => void;
+  unregisterNotificationById: (notificationId: string | number) => void;
+} = (notification, dependencies) => {
   const notificationService = useContext(notificationServiceContext);
   if (!notificationService) {
     throw new Error(

airbyte-webapp/src/components/hooks/useFullStory.tsx

@@ -1,41 +1,10 @@
 import { useEffect } from "react";
+import * as FullStory from "@fullstory/browser";
 
-// if org is undefined calls to fullstory will be a no-op.
-const useFullStory = (org?: string): void => {
+const useFullStory = (config: FullStory.SnippetOptions): void => {
   useEffect(() => {
-    if (org) {
-      const script = document.createElement("script");
-      script.innerText = `
-          window['_fs_debug'] = false;
-          window['_fs_host'] = 'fullstory.com';
-          window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
-          window['_fs_org'] = '${org}';
-          window['_fs_namespace'] = 'FS';
-          (function(m,n,e,t,l,o,g,y){
-              if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
-              g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
-              o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
-              y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
-              g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
-              g.anonymize=function(){g.identify(!!0)};
-              g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
-              g.log = function(a,b){g("log",[a,b])};
-              g.consent=function(a){g("consent",!arguments.length||a)};
-              g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
-              g.clearUserCookie=function(){};
-              g.setVars=function(n, p){g('setVars',[n,p]);};
-              g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
-              if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
-              g._v="1.3.0";
-          })(window,document,window['_fs_namespace'],'script','user');
-      `;
-      script.async = true;
-
-      if (typeof window !== "undefined" && !("_fs_namespace" in window)) {
-        document.body.appendChild(script);
-      }
-    }
-  }, [org]);
+    FullStory.init(config);
+  }, [config]);
 };
 
 export default useFullStory;

airbyte-webapp/src/config/index.ts

@@ -1,3 +1,4 @@
+import * as Fullstory from "@fullstory/browser";
 import { SegmentAnalytics } from "core/analytics/types";
 
 declare global {
@@ -30,27 +31,24 @@ type Config = {
     baseUrl: string;
     enableStorytime: boolean;
   };
-  fullstory: {
-    org: string;
-  };
+  fullstory: Fullstory.SnippetOptions;
   apiUrl: string;
   healthCheckInterval: number;
   isDemo: boolean;
   version?: string;
 };
 
+const BASE_DOCS_LINK = "https://docs.airbyte.io";
+
 const config: Config = {
   ui: {
-    technicalSupport: "https://docs.airbyte.io/troubleshooting/on-deploying",
+    technicalSupport: `${BASE_DOCS_LINK}/troubleshooting/on-deploying`,
     helpLink: "https://airbyte.io/community",
     slackLink: "https://slack.airbyte.io",
     docsLink: "https://docs.airbyte.io",
-    configurationArchiveLink:
-      "https://docs.airbyte.io/tutorials/upgrading-airbyte",
-    normalizationLink:
-      "https://docs.airbyte.io/understanding-airbyte/namespaces",
-    namespaceLink:
-      "https://docs.airbyte.io/understanding-airbyte/connections#airbyte-basic-normalization",
+    configurationArchiveLink: `${BASE_DOCS_LINK}/tutorials/upgrading-airbyte`,
+    normalizationLink: `${BASE_DOCS_LINK}/understanding-airbyte/namespaces`,
+    namespaceLink: `${BASE_DOCS_LINK}/understanding-airbyte/connections#airbyte-basic-normalization`,
     tutorialLink:
       "https://www.youtube.com/watch?v=Rcpt5SVsMpk&feature=emb_logo",
     workspaceId: "5ae6b09b-fdec-41af-aaf7-7d94cfc33ef6",
@@ -68,7 +66,8 @@ const config: Config = {
     enableStorytime: window.PAPERCUPS_STORYTIME !== "disabled",
   },
   fullstory: {
-    org: window.FULLSTORY === "disabled" ? "" : "13AXQ4",
+    orgId: "13AXQ4",
+    devMode: window.FULLSTORY === "disabled",
   },
   version: window.AIRBYTE_VERSION,
   apiUrl:

airbyte-webapp/src/core/analytics/AnalyticsService.ts

@@ -1,20 +1,22 @@
+import * as FullStory from "@fullstory/browser";
+
 import config from "config";
 import { SegmentAnalytics } from "./types";
 
 export class AnalyticsService {
-  private static getAnalytics = (): SegmentAnalytics | undefined =>
+  private static getSegmentAnalytics = (): SegmentAnalytics | undefined =>
     window.analytics;
 
   static alias = (newId: string): void =>
-    AnalyticsService.getAnalytics()?.alias?.(newId);
+    AnalyticsService.getSegmentAnalytics()?.alias?.(newId);
 
   static page = (name: string): void =>
-    AnalyticsService.getAnalytics()?.page?.(name);
+    AnalyticsService.getSegmentAnalytics()?.page?.(name);
 
-  static reset = (): void => AnalyticsService.getAnalytics()?.reset?.();
+  static reset = (): void => AnalyticsService.getSegmentAnalytics()?.reset?.();
 
   static track = (name: string, properties: Record<string, unknown>): void =>
-    AnalyticsService.getAnalytics()?.track?.(name, {
+    AnalyticsService.getSegmentAnalytics()?.track?.(name, {
       user_id: config.ui.workspaceId,
       ...properties,
       airbyte_version: config.version,
@@ -24,10 +26,14 @@ export class AnalyticsService {
   static identify = (
     userId: string,
     traits: Record<string, unknown> = {}
-  ): void => AnalyticsService.getAnalytics()?.identify?.(userId, traits);
+  ): void => {
+    AnalyticsService.getSegmentAnalytics()?.identify?.(userId, traits);
+    FullStory.identify(userId);
+  };
 
   static group = (
     organisationId: string,
     traits: Record<string, unknown> = {}
-  ): void => AnalyticsService.getAnalytics()?.group?.(organisationId, traits);
+  ): void =>
+    AnalyticsService.getSegmentAnalytics()?.group?.(organisationId, traits);
 }

airbyte-webapp/src/pages/routes.tsx

@@ -153,7 +153,7 @@ const OnboardingsRoutes = () => {
 
 export const Routing: React.FC = () => {
   useSegment(config.segment.token);
-  useFullStory(config.fullstory.org);
+  useFullStory(config.fullstory);
   useApiHealthPoll(config.healthCheckInterval);
 
   const { workspace } = useWorkspace();