fix(compass): make sure we get active user info when setting up intercom (#5418)

* fix(compass): make sure we get active user info when setting up intercom

* test(e2e): add a test to check that intercom is loaded

* chore: fix log id

Author: gribnoysup

packages/atlas-service/src/main.spec.ts

@@ -84,7 +84,7 @@ describe('AtlasServiceMain', function () {
     AtlasService['createMongoDBOIDCPlugin'] = () => mockOidcPlugin;
     AtlasService['atlasUserConfigStore'] =
       mockUserConfigStore as unknown as AtlasUserConfigStore;
-    AtlasService['getUserId'] = () => Promise.resolve('test');
+    AtlasService['getUserId'] = () => 'test';
 
     AtlasService['config'] = defaultConfig;
 

packages/atlas-service/src/main.ts

@@ -168,7 +168,7 @@ export class AtlasService {
     | Pick<HadronIpcMain, 'createHandle' | 'handle' | 'broadcast'>
     | undefined = ipcMain;
 
-  private static getUserId: () => Promise<string>;
+  private static getUserId: () => string;
   private static preferences: PreferencesAccess;
   private static config: AtlasServiceConfig;
 
@@ -237,7 +237,7 @@ export class AtlasService {
     {
       preferences,
       getUserId,
-    }: { preferences: PreferencesAccess; getUserId: () => Promise<string> }
+    }: { preferences: PreferencesAccess; getUserId: () => string }
   ): Promise<void> {
     this.preferences = preferences;
     this.getUserId = getUserId;
@@ -574,7 +574,7 @@ export class AtlasService {
   static async getAIFeatureEnablement(): Promise<AIFeatureEnablement> {
     this.throwIfNetworkTrafficDisabled();
 
-    const userId = await this.getUserId();
+    const userId = this.getUserId();
     const url = `${this.config.atlasApiUnauthBaseUrl}/ai/api/v1/hello/${userId}`;
 
     log.info(

packages/compass-e2e-tests/tests/intercom.test.ts

@@ -0,0 +1,44 @@
+import { init, cleanup, screenshotIfFailed } from '../helpers/compass';
+import type { Compass } from '../helpers/compass';
+
+describe('Intercom integration', function () {
+  let compass: Compass;
+
+  before(async function () {
+    compass = await init(this.test?.fullTitle(), { firstRun: true });
+  });
+
+  afterEach(async function () {
+    await screenshotIfFailed(compass, this.currentTest);
+  });
+
+  after(async function () {
+    // clean up if it failed during the before hook
+    await cleanup(compass);
+  });
+
+  it('should load Intercom script', async function () {
+    const isIntercomAvailable = await compass.browser.execute(() => {
+      return !!process.env.HADRON_METRICS_INTERCOM_APP_ID;
+    });
+
+    // Skip the test if conditions for setting up intercom are not met (they
+    // should always be in CI, this is to make sure this test doesn't fail
+    // locally)
+    if (!isIntercomAvailable && !(process.env.ci || process.env.CI)) {
+      this.skip();
+    }
+
+    await compass.browser.waitUntil(
+      () => {
+        return compass.browser.execute(() => {
+          return typeof (window as any).Intercom === 'function';
+        });
+      },
+      {
+        timeoutMsg:
+          'Expected Intercom SDK to load and be available in the global scope',
+      }
+    );
+  });
+});

packages/compass-preferences-model/src/compass-utils.ts

@@ -11,8 +11,14 @@ export async function setupPreferencesAndUser(
   const preferences = await setupPreferences(globalPreferences);
   const userStorage = new UserStorageImpl();
   const user = await userStorage.getOrCreate(getActiveUserId(preferences));
-  // update user id (telemetryAnonymousId) in preferences if new user was created.
-  await preferences.savePreferences({ telemetryAnonymousId: user.id });
+  // update user info (telemetryAnonymousId and userCreatedAt) in preferences to
+  // make sure user info is in sync between preferences and UserStorage and can
+  // be accessed in renderer without the need to use UserStorage directly (we
+  // can't access the same UserStorage instance in renderer)
+  await preferences.savePreferences({
+    telemetryAnonymousId: user.id,
+    userCreatedAt: user.createdAt.getTime(),
+  });
   await userStorage.updateUser(user.id, {
     lastUsed: new Date(),
   });

packages/compass-preferences-model/src/preferences-schema.ts

@@ -67,6 +67,7 @@ export type InternalUserPreferences = {
   lastKnownVersion: string;
   currentUserId?: string;
   telemetryAnonymousId?: string;
+  userCreatedAt: number;
 };
 
 // UserPreferences contains all preferences stored to disk.
@@ -311,6 +312,17 @@ export const storedUserPreferencesProps: Required<{
     validator: z.string().uuid().optional(),
     type: 'string',
   },
+  /**
+   * Stores the timestamp for when the user was created
+   */
+  userCreatedAt: {
+    ui: false,
+    cli: false,
+    global: false,
+    description: null,
+    validator: z.number().default(Date.now()),
+    type: 'number',
+  },
   /**
    * Enable/disable the AI services. This is currently set
    * in the atlas-service initialization where we make a request to the

packages/compass-preferences-model/src/utils.ts

@@ -1,6 +1,5 @@
 import { usePreference } from './react';
 import type { AllPreferences, PreferencesAccess, User } from '.';
-import type { UserStorage } from './user-storage';
 
 export function getActiveUserId(
   preferences: PreferencesAccess
@@ -9,15 +8,15 @@ export function getActiveUserId(
   return currentUserId || telemetryAnonymousId;
 }
 
-export async function getActiveUser(
-  preferences: PreferencesAccess,
-  userStorage: UserStorage
-): Promise<User> {
+export function getActiveUser(
+  preferences: PreferencesAccess
+): Pick<User, 'id' | 'createdAt'> {
   const userId = getActiveUserId(preferences);
+  const { userCreatedAt } = preferences.getPreferences();
   if (!userId) {
     throw new Error('User not setup.');
   }
-  return userStorage.getUser(userId);
+  return { id: userId, createdAt: new Date(userCreatedAt) };
 }
 
 /**

packages/compass/src/app/index.jsx packages/compass/src/app/index.tsxpackages/compass/src/app/index.jsx renamed to packages/compass/src/app/index.tsx

@@ -5,10 +5,7 @@ import dns from 'dns';
 import { ipcRenderer } from 'hadron-ipc';
 import * as remote from '@electron/remote';
 import { AppRegistryProvider, globalAppRegistry } from 'hadron-app-registry';
-import {
-  defaultPreferencesInstance,
-  getActiveUser,
-} from 'compass-preferences-model';
+import { defaultPreferencesInstance } from 'compass-preferences-model';
 import { CompassHomePlugin } from '@mongodb-js/compass-home';
 import { PreferencesProvider } from 'compass-preferences-model/provider';
 
@@ -24,7 +21,7 @@ if (!process.env.NODE_OPTIONS.includes('--dns-result-order')) {
 // Setup error reporting to main process before anything else.
 window.addEventListener('error', (event) => {
   event.preventDefault();
-  ipcRenderer?.call(
+  void ipcRenderer?.call(
     'compass:error:fatal',
     event.error
       ? { message: event.error.message, stack: event.error.stack }
@@ -65,7 +62,7 @@ import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 const { log, mongoLogId, track } = createLoggerAndTelemetry('COMPASS-APP');
 
 // Lets us call `setShowDevFeatureFlags(true | false)` from DevTools.
-window.setShowDevFeatureFlags = async (showDevFeatureFlags = true) => {
+(window as any).setShowDevFeatureFlags = async (showDevFeatureFlags = true) => {
   await defaultPreferencesInstance.savePreferences({ showDevFeatureFlags });
 };
 
@@ -108,14 +105,20 @@ const Application = View.extend({
      * @see NODE-4281
      * @todo: remove when NODE-4281 is merged.
      */
-    Number.prototype.unref = () => {};
+    (Number.prototype as any).unref = () => {
+      // noop
+    };
 
-    function trackPerfEvent({ name, value }) {
+    function trackPerfEvent({
+      name,
+      value,
+    }: Pick<webvitals.Metric, 'name' | 'value'>) {
       const fullName = {
         FCP: 'First Contentful Paint',
         LCP: 'Largest Contentful Paint',
         FID: 'First Input Delay',
         CLS: 'Cumulative Layout Shift',
+        TTFB: 'Time to First Byte',
       }[name];
       track(fullName, { value });
     }
@@ -211,9 +214,16 @@ const app = {
     state.preRender();
 
     try {
-      const user = await getActiveUser(defaultPreferencesInstance);
-      setupIntercom(user, defaultPreferencesInstance);
+      void setupIntercom(defaultPreferencesInstance);
     } catch (e) {
+      log.warn(
+        mongoLogId(1_001_000_289),
+        'Main Window',
+        'Failed to set up Intercom',
+        {
+          error: (e as Error).message,
+        }
+      );
       // noop
     }
     // Catch a data refresh coming from window-manager.
@@ -273,4 +283,4 @@ Object.defineProperty(app, 'state', {
   },
 });
 
-app.init();
+void app.init();

packages/compass/src/app/intercom/setup-intercom.spec.ts

@@ -22,13 +22,12 @@ describe('setupIntercom', function () {
   let fetchMock: SinonStub;
   let preferences: PreferencesAccess;
 
-  async function testRunSetupIntercom(user: User) {
+  async function testRunSetupIntercom() {
     const intercomScript = {
       load: sinon.spy(),
       unload: sinon.spy(),
     };
     await setupIntercom(
-      user,
       preferences,
       intercomScript as unknown as IntercomScript
     );
@@ -55,6 +54,8 @@ describe('setupIntercom', function () {
     preferences = await createSandboxFromDefaultPreferences();
     await preferences.savePreferences({
       enableFeedbackPanel: true,
+      telemetryAnonymousId: mockUser.id,
+      userCreatedAt: mockUser.createdAt.getTime(),
     });
   });
 
@@ -72,7 +73,7 @@ describe('setupIntercom', function () {
       await preferences.savePreferences({
         enableFeedbackPanel: true,
       });
-      const { intercomScript } = await testRunSetupIntercom(mockUser);
+      const { intercomScript } = await testRunSetupIntercom();
 
       expect(intercomScript.load).to.have.been.calledWith({
         app_id: 'appid123',
@@ -94,15 +95,15 @@ describe('setupIntercom', function () {
       await preferences.savePreferences({
         enableFeedbackPanel: false,
       });
-      const { intercomScript } = await testRunSetupIntercom(mockUser);
+      const { intercomScript } = await testRunSetupIntercom();
       expect(intercomScript.load).not.to.have.been.called;
       expect(intercomScript.unload).to.have.been.called;
     });
   });
 
   describe('when cannot be enabled', function () {
     async function expectSetupGetsSkipped() {
-      const { intercomScript } = await testRunSetupIntercom(mockUser);
+      const { intercomScript } = await testRunSetupIntercom();
 
       expect(intercomScript.load).to.not.have.been.called;
 

packages/compass/src/app/intercom/setup-intercom.ts

@@ -1,13 +1,12 @@
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import type { IntercomMetadata } from './intercom-script';
 import { IntercomScript, buildIntercomScriptUrl } from './intercom-script';
-
-import type { PreferencesAccess, User } from 'compass-preferences-model';
+import type { PreferencesAccess } from 'compass-preferences-model';
+import { getActiveUser } from 'compass-preferences-model';
 
 const { debug } = createLoggerAndTelemetry('COMPASS-INTERCOM');
 
 export async function setupIntercom(
-  user: User,
   preferences: PreferencesAccess,
   intercomScript: IntercomScript = new IntercomScript()
 ): Promise<void> {
@@ -26,6 +25,8 @@ export async function setupIntercom(
     return;
   }
 
+  const user = getActiveUser(preferences);
+
   const metadata: IntercomMetadata = {
     user_id: user.id,
     app_id: intercomAppId,

packages/compass/src/index.d.ts

@@ -41,3 +41,16 @@ declare module 'process' {
     }
   }
 }
+
+declare module 'marky' {
+  declare function mark(label: string): void;
+  declare function stop(label: string): void;
+  export { mark, stop };
+}
+
+declare module 'ampersand-view' {
+  class View {
+    static extend(...args: any): any;
+  }
+  export default View;
+}