feat: Welcome modal COMPASS-6150 (#3535)

* WIP

* welcome modal

* refactor welcome & settings

* reformat

* typescript

* fix deps

* also ensure the defaults are there if we open the settings modal from ipc event

* rm TODO

* don't show the welcome modal in e2e tests by default

* attempts at fixes

* COMPASS_-specific env var

* rename test to be more accurate

* use a command line argument rather than env var

* remove pause

* true, not false..

packages/compass-components/package.json

@@ -44,6 +44,7 @@
     "@leafygreen-ui/icon-button": "^13.1.0",
     "@leafygreen-ui/leafygreen-provider": "^2.3.2",
     "@leafygreen-ui/logo": "^6.1.2",
+    "@leafygreen-ui/marketing-modal": "^3.0.5",
     "@leafygreen-ui/menu": "^15.0.0",
     "@leafygreen-ui/modal": "^10.0.0",
     "@leafygreen-ui/palette": "^3.4.0",

packages/compass-components/src/components/leafygreen.tsx

@@ -25,6 +25,7 @@ import {
   default as LeafyGreenModal,
   Footer as LeafyGreenModalFooter,
 } from '@leafygreen-ui/modal';
+import { default as LeafyGreenMarketingModal } from '@leafygreen-ui/marketing-modal';
 import Popover from '@leafygreen-ui/popover';
 import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
 import {
@@ -135,6 +136,11 @@ const Modal = withTheme(
     React.ComponentProps<typeof LeafyGreenModal>
   >
 ) as typeof LeafyGreenModal;
+const MarketingModal: typeof LeafyGreenMarketingModal = withTheme(
+  LeafyGreenMarketingModal as React.ComponentType<
+    React.ComponentProps<typeof LeafyGreenMarketingModal>
+  >
+) as typeof LeafyGreenMarketingModal;
 const RadioGroup: typeof LeafyGreenRadioGroup = withTheme(
   LeafyGreenRadioGroup as React.ComponentType<
     React.ComponentProps<typeof LeafyGreenRadioGroup>
@@ -183,6 +189,7 @@ export {
   MenuSeparator,
   Modal,
   ModalFooter,
+  MarketingModal,
   MongoDBLogoMark,
   MongoDBLogo,
   Popover,

packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts

@@ -0,0 +1,18 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function closeWelcomeModal(
+  browser: CompassBrowser
+): Promise<void> {
+  if (!(await browser.existsEventually(Selectors.WelcomeModal))) {
+    return;
+  }
+
+  const welcomeModalElement = await browser.$(Selectors.WelcomeModal);
+
+  await welcomeModalElement.waitForDisplayed();
+  await browser.clickVisible(Selectors.CloseWelcomeModalButton);
+  await welcomeModalElement.waitForDisplayed({
+    reverse: true,
+  });
+}

packages/compass-e2e-tests/helpers/commands/index.ts

@@ -3,6 +3,7 @@ export * from './click-visible';
 export * from './set-value-visible';
 export * from './wait-for-connection-screen';
 export * from './close-settings-modal';
+export * from './close-welcome-modal';
 export * from './connect-with-connection-string';
 export * from './connect-with-connection-form';
 export * from './disconnect';

packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts

@@ -6,7 +6,7 @@ export async function openSettingsModal(
 ): Promise<void> {
   await browser.execute(() => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('electron').ipcRenderer.emit('window:show-network-optin');
+    require('electron').ipcRenderer.emit('window:show-settings');
   });
 
   const settingsModalElement = await browser.$(Selectors.SettingsModal);

packages/compass-e2e-tests/helpers/compass.ts

@@ -68,19 +68,14 @@ interface RenderLogEntry {
 
 export class Compass {
   browser: CompassBrowser;
-  isFirstRun: boolean;
   testPackagedApp: boolean;
   renderLogs: RenderLogEntry[];
   logs: LogEntry[];
   logPath?: string;
   userDataPath?: string;
 
-  constructor(
-    browser: CompassBrowser,
-    { isFirstRun = false, testPackagedApp = false } = {}
-  ) {
+  constructor(browser: CompassBrowser, { testPackagedApp = false } = {}) {
     this.browser = browser;
-    this.isFirstRun = isFirstRun;
     this.testPackagedApp = testPackagedApp;
     this.logs = [];
     this.renderLogs = [];
@@ -273,7 +268,6 @@ export class Compass {
 
 interface StartCompassOptions {
   firstRun?: boolean;
-  noCloseSettingsModal?: boolean;
   extraSpawnArgs?: string[];
   wrapBinary?: (binary: string) => Promise<string> | string;
 }
@@ -337,8 +331,6 @@ async function startCompass(opts: StartCompassOptions = {}): Promise<Compass> {
   const { testPackagedApp, binary } = await getCompassExecutionParameters();
   const nowFormatted = formattedDate();
 
-  const isFirstRun = opts.firstRun || !defaultUserDataDir;
-
   // If this is not the first run, but we want it to be, delete the user data
   // dir so it will be recreated below.
   if (defaultUserDataDir && opts.firstRun) {
@@ -410,6 +402,11 @@ async function startCompass(opts: StartCompassOptions = {}): Promise<Compass> {
     ...(opts.extraSpawnArgs ?? [])
   );
 
+  if (opts.firstRun === undefined) {
+    // by default make sure we don't get the welcome modal
+    chromeArgs.push('--showed-network-opt-in=true');
+  }
+
   // https://webdriver.io/docs/options/#webdriver-options
   const webdriverOptions = {
     logLevel: 'info',
@@ -467,7 +464,7 @@ async function startCompass(opts: StartCompassOptions = {}): Promise<Compass> {
   // @ts-expect-error
   const browser = await remote(options);
 
-  const compass = new Compass(browser, { isFirstRun, testPackagedApp });
+  const compass = new Compass(browser, { testPackagedApp });
 
   await compass.recordLogs();
 
@@ -665,11 +662,12 @@ export async function beforeTests(
 
   const { browser } = compass;
 
-  await browser.waitForConnectionScreen();
-  if (compass.isFirstRun && !opts.noCloseSettingsModal) {
-    await browser.closeSettingsModal();
+  if (opts.firstRun) {
+    await browser.closeWelcomeModal();
   }
 
+  await browser.waitForConnectionScreen();
+
   return compass;
 }
 

packages/compass-e2e-tests/helpers/selectors.ts

@@ -3,6 +3,11 @@ export const SettingsModal = '[data-testid="settings-modal"]';
 export const CloseSettingsModalButton =
   '[data-testid="settings-modal"] [aria-label="Close modal"]';
 
+// Welcome Modal
+export const WelcomeModal = '[data-testid="welcome-modal"]';
+export const CloseWelcomeModalButton =
+  '[data-testid="welcome-modal"] [aria-label="Close modal"]';
+
 // Connection screen
 export const ConnectSection = '[data-testid="connections-disconnected"]';
 export const ConnectButton = '[data-testid="connect-button"]';

packages/compass-e2e-tests/tests/global-preferences.test.ts

@@ -149,7 +149,7 @@ describe('Global preferences', function () {
   it('allows setting networkTraffic: false and reflects that in the settings modal', async function () {
     await fs.writeFile(path.join(tmpdir, 'config'), 'networkTraffic: false\n');
     // No settings modal opened for Isolated edition
-    const compass = await beforeTests({ noCloseSettingsModal: true });
+    const compass = await beforeTests();
     try {
       const browser = compass.browser;
       await browser.openSettingsModal();

packages/compass-e2e-tests/tests/no-network-traffic.test.ts

@@ -44,7 +44,6 @@ describe('networkTraffic: false / Isolated Edition', function () {
 
     const compass = await beforeTests({
       extraSpawnArgs: ['--no-network-traffic'],
-      noCloseSettingsModal: true,
       wrapBinary,
     });
     const browser = compass.browser;

packages/compass-e2e-tests/tests/time-to-first-query.test.ts

@@ -7,6 +7,10 @@ import { createNumbersCollection } from '../helpers/insert-data';
 describe('Time to first query', function () {
   let compass: Compass | undefined;
 
+  beforeEach(async function () {
+    await createNumbersCollection();
+  });
+
   afterEach(async function () {
     // cleanup outside of the test so that the time it takes to run does not
     // get added to the time it took to run the first query
@@ -18,13 +22,9 @@ describe('Time to first query', function () {
     }
   });
 
-  beforeEach(async function () {
-    await createNumbersCollection();
-  });
-
-  it('can open compass, connect to a database and run a query on a collection (new version)', async function () {
+  it('can open compass, connect to a database and run a query on a collection (never seen welcome)', async function () {
     // start compass inside the test so that the time is measured together
-    compass = await beforeTests();
+    compass = await beforeTests({ firstRun: true });
 
     const { browser } = compass;
 
@@ -59,7 +59,8 @@ describe('Time to first query', function () {
 
   it('can open compass, connect to a database and run a query on a collection (second run onwards)', async function () {
     // start compass inside the test so that the time is measured together
-    compass = await beforeTests();
+
+    compass = await beforeTests({ firstRun: false });
 
     const { browser } = compass;
 

packages/compass-home/package.json

@@ -37,17 +37,21 @@
   "license": "SSPL",
   "dependencies": {
     "@mongodb-js/compass-components": "^1.2.0",
+    "@mongodb-js/compass-welcome": "^0.1.0",
     "@mongodb-js/compass-settings": "^0.4.0",
     "@mongodb-js/compass-connections": "^1.3.0",
+    "compass-preferences-model": "^2.2.0",
     "hadron-app-registry": "^9.0.1",
     "hadron-ipc": "^3.1.0",
     "mongodb-data-service": "^22.1.1",
     "react": "^16.14.0"
   },
   "peerDependencies": {
     "@mongodb-js/compass-components": "^1.2.0",
+    "@mongodb-js/compass-welcome": "^0.1.0",
     "@mongodb-js/compass-settings": "^0.4.0",
     "@mongodb-js/compass-connections": "^1.3.0",
+    "compass-preferences-model": "^2.2.0",
     "hadron-app-registry": "^9.0.1",
     "hadron-ipc": "^3.1.0",
     "mongodb-data-service": "^22.1.1",

packages/compass-home/src/components/home.spec.tsx

@@ -62,7 +62,7 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" />
+          <Home appName="home-testing" showWelcomeModal={false} />
         </AppRegistryContext.Provider>
       );
     });
@@ -83,7 +83,7 @@ describe('Home [Component]', function () {
     ) {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" />
+          <Home appName="home-testing" showWelcomeModal={false} />
         </AppRegistryContext.Provider>
       );
       testAppRegistry.emit('data-service-connected', null, dataService, {
@@ -157,7 +157,7 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" />
+          <Home appName="home-testing" showWelcomeModal={false} />
         </AppRegistryContext.Provider>
       );
     });
@@ -185,7 +185,7 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       const { unmount } = render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" />
+          <Home appName="home-testing" showWelcomeModal={false} />
         </AppRegistryContext.Provider>
       );
       unmount();

packages/compass-home/src/components/home.tsx

@@ -6,9 +6,12 @@ import {
   ThemeProvider,
   ToastArea,
   uiColors,
+  compassUIColors,
 } from '@mongodb-js/compass-components';
 import type { ThemeState } from '@mongodb-js/compass-components';
 import Connections from '@mongodb-js/compass-connections';
+import Settings from '@mongodb-js/compass-settings';
+import Welcome from '@mongodb-js/compass-welcome';
 import ipc from 'hadron-ipc';
 import type { ConnectionInfo, DataService } from 'mongodb-data-service';
 import { getConnectionTitle } from 'mongodb-data-service';
@@ -20,12 +23,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import preferences from 'compass-preferences-model';
 import { useAppRegistryContext } from '../contexts/app-registry-context';
 import updateTitle from '../modules/update-title';
 import type Namespace from '../types/namespace';
 import Workspace from './workspace';
-import Settings from '@mongodb-js/compass-settings';
-import { compassUIColors } from '@mongodb-js/compass-components';
 
 const homeViewStyles = css({
   display: 'flex',
@@ -226,6 +228,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
       ipc.ipcRenderer?.removeListener('app:disconnect', onDisconnect);
     };
   }, [appRegistry, onDataServiceDisconnected]);
+
   useEffect(() => {
     // Setup app registry listeners.
     appRegistry.on('data-service-connected', onDataServiceConnected);
@@ -278,8 +281,9 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
 }
 
 function ThemedHome(
-  props: React.ComponentProps<typeof Home>
+  props: React.ComponentProps<typeof Home> & { showWelcomeModal: boolean }
 ): ReturnType<typeof Home> {
+  const { showWelcomeModal } = props;
   const appRegistry = useAppRegistryContext();
 
   const [theme, setTheme] = useState<ThemeState>({
@@ -323,10 +327,51 @@ function ThemedHome(
     };
   }, [appRegistry]);
 
+  const [isWelcomeOpen, setIsWelcomeOpen] = useState(showWelcomeModal);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  function showSettingsModal() {
+    async function show() {
+      await preferences.ensureDefaultConfigurableUserPreferences();
+      setIsSettingsOpen(true);
+    }
+
+    void show();
+  }
+
+  useEffect(() => {
+    ipc.ipcRenderer?.on('window:show-settings', showSettingsModal);
+    return function cleanup() {
+      ipc.ipcRenderer?.off('window:show-settings', showSettingsModal);
+    };
+  }, [appRegistry]);
+
+  const closeWelcomeModal = useCallback(
+    (showSettings: boolean) => {
+      async function close() {
+        await preferences.ensureDefaultConfigurableUserPreferences();
+        setIsWelcomeOpen(false);
+        if (showSettings) {
+          setIsSettingsOpen(true);
+        }
+      }
+
+      void close();
+    },
+    [setIsWelcomeOpen]
+  );
+
+  const closeSettingsModal = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, [setIsSettingsOpen]);
+
   return (
     <LeafyGreenProvider>
       <ThemeProvider theme={theme}>
-        <Settings />
+        {showWelcomeModal && (
+          <Welcome isOpen={isWelcomeOpen} closeModal={closeWelcomeModal} />
+        )}
+        <Settings isOpen={isSettingsOpen} closeModal={closeSettingsModal} />
         <ToastArea>
           <div
             className={cx(

packages/compass-home/src/plugin.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import type AppRegistry from 'hadron-app-registry';
-
 import Home from './components/home';
 import AppRegistryContext from './contexts/app-registry-context';
 
@@ -9,13 +8,15 @@ import './index.less';
 function Plugin({
   appName,
   appRegistry,
+  showWelcomeModal,
 }: {
   appName: string;
   appRegistry: AppRegistry;
+  showWelcomeModal: boolean;
 }): React.ReactElement {
   return (
     <AppRegistryContext.Provider value={appRegistry}>
-      <Home appName={appName} />
+      <Home appName={appName} showWelcomeModal={showWelcomeModal} />
     </AppRegistryContext.Provider>
   );
 }